Frontend test interview

Summary

The goal of this test is to create SPA application by displaying data from an external API.

Your deliverable is expected to:

• Display on the homepage a data list of 10-15 items
• Have the possibility to search in this data list via a search field (a simple/exact search will be enough)
• On this homepage display 2 items (random) that change every 10 seconds
• Create a detail page on another URL to display the details of this item

For the API to use we suggest https://punkapi.com/ but as long as the subject is respected you can use any other API.

Here is an example of the result https://frontend-tech-interview.dev.regate.io/

You will NOT be tested on the design part, so keep it simple and pleasant for you.

Your code doesn't have to be perfect. We are not excepting from you to spend 10h on the project. Just focus on doing a solid foundation. For example, if you add tests, you can do 1 really good test and during the interview, you'll elaborate on how you would have done the missing ones.

Requirements

• Node.js v18.x (https://nodejs.org/en/)
• React v18.x (https://reactjs.org/)
• Typescript v5.x (https://typescriptlang.org/)

Bonus

• Add animations
• Do tests via React Testing Library
• Have a Lighthouse performance score of 80+ in mobile, and 90+ in desktop

For libraries:

• Client side routing (Next.js, React Router, TanStack Router, etc...)
• CSS-in-JS library (Styled Components, Emotion, Panda, etc...)
• React Hooks library for data fetching (React Query, SWR, etc...)
• Spring physics animation library (Framer Motion, React Spring, etc...)

If you want to add more libraries because it makes sense for you, of course feel free to do it.

Submission

For the submission of this test you can either send us a link to a git repository or an archive of your project.

If you think it could be usefull, feel free to include any documentations or a README about your implementation choices.

There is no time limit for this test but we would like to know how much time you spend on it, so please tell us when sending your test.

Contact

If you have any issues or questions send us an email at: vgosse@regate.io (Victor)

Good luck !