Hello there, you are a new recruit in our frontend team at Les Echos, and your first task is to implement our newsletter page.
You can find the design on our figma
Our evaluation focuses on your problem-solving approach and mindset, observing how you tackle challenges and prioritize tasks.
During the interview, explain your decisions and how you'd approach unfinished tasks with you had more time.
It's your thought process and strategy, rather than completion, that we're interested in.
Please do code as you were already a part of our frontend team, it is essential to us.
You have to use NextJS, wether it is the latest version (app router), or if you don't feel comfortable with it, use the pages router.
Regardless of point 1 and 2, the page should be responsive.
- Implement the styling using what you like to use (chakra-ui, material-ui or something else)
- Implement the styling yourself, using the library of your choice (we are using styled-components and pandaCSS for instance)
The current user will be representated by 3 different mock (USER_WITH_ONE_SUBSCRIPTION
, USER_WITH_MULTIPLE_SUBSCRIPTION
, USER_WITHOUT_SUBSCRIPTION
), you can find these at src/mocks/user.ts
.
What you need to look at is the subscriptions
key, it represent the subscriptions that the user currently have active.
You can find mocks of the items in src/mocks/newsletters.ts
, you have to display the list of all the newsletters, but grouped by the site
key.
In every newsletter object, you have a key subscriptions
, which is an array of strings, it represents the right needed to access this newsletter.
If the field is an empty array, it means the newsletter can be accessed by everyone, otherwise, the user should have at least of the right listed in the array.
The label of the CTA (call to action) will be S'inscrire
if the user has access to it, otherwise S'abonner
Everything has to be typed with typescript, show us what you can do !
Even if we don't provide an API to call, you have to simulate the fetching. Also, the app should work in SSR.
Take around 4 hours to do this test, we really respect your time and don't want you to spend days on this.
Good luck and again, please do this as you were already an developer in our team.
If you have any question feel free to contact us and we will quickly respond