Work at Surfe
Work at Surfe
Front-end coding challenge

Front-end coding challenge

Welcome to this front-end Coding Challenge! We will ask you to complete the following exercise as part of our interview process. It aims at assessing your proficiency with front-end, and your problem-solving mindset.

You can submit this article as a public GitHub repository with the exercise and a short README explaining how to run it. You can write your code in React (preferred), Vue or Vanilla JS. You can work with Typescript if you feel like it. For styling you can use Tailwind SCSS or CSS. We prefer you not rely on third-party libraries if possible.

ℹ️
Taking User Experience in consideration is expected.

The goal of this exercise is to create a small note-taking app with a mention feature, based on some dummy data provided by a server we created for this purpose.

For the sake of convenience during your development process, some endpoints we provide follow this pattern: https://challenge.surfe.com/SESSION/endpoint where SESSION can be any string you want. This string represents your persistent work “session”, so you can GET info you POSTed in the same session. You can therefore “reset” the server’s database by changing session.

Q1) Implement a note-taking text-area following design guidelines

Let’s start with the basic text-area on a standalone page. Based on the following designs for inspiration, come up with a simple working text-area where the user can input some free plain text.

image
image

Q2) Implement a way to save and load a note

Constraints

  • The note should auto-save when the user stops typing
  • The note should load again on page refresh

We provide you with the following two API endpoints:

  • POST challenge.surfe.com/SESSION/notes
  • PUT challenge.surfe.com/SESSION/notes/{ID}
  • GET challenge.surfe.com/SESSION/notes
  • GET challenge.surfe.com/SESSION/notes/{ID}
{
	"id": 1,
	"body": "Lorem Ipsum ..."
}

Q3) Implement a user @mention feature

Let’s assume our note-taking app is collaborative, and a user can mention other users, right from the text-area, when typing the character @... a list of names should appear.

Constraints

  • The available users to mention should be updated when the user types
  • Only the 5 most relevant results should be displayed
  • The mention should have a special style

We provide you with the following API endpoint:

  • GET challenge.surfe.com/users

Q4) Implement mention via drag & drop

First, display on the side of the page the list of the most mentioned users.

Then provide a way for the user to drag and drop one of these user’s card in the text editor. A drop in the editor should add a mention tag for this user.

We provide you with the following API endpoint:

  • GET challenge.surfe.com/users/mostMentioned