Coding Challange

This is a T3 Stack project bootstrapped with create-t3-app.

Our stack

• Next.js
• Tailwind CSS

Task:

• go to src/pages/index.tsx
• start the dev server

1. Fix the error on the API call
2. Move the API call into getServerSideProps
3. Build the Figma component using the data from the API
4. Make everything type save
5. Add Header to Page with Page title, meta description and favicon
6. Make the design mobile-friendly (responsive)
7. Add the ability to select and filter using the keyboard (tab into it and then search, arrows to navigate up and down and enter to confirm)

Bonus:

1. Add custom drop shadow from Figma design to tailwind

Comments:

Design:

https://www.figma.com/file/koV9oHrg4ZZD0Rqj1H6CtO/Frontend-Challange-Design?type=design&node-id=0%3A1&mode=design&t=2C2MuF5TSXRWWVWA-1