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.
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.
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