- Reflect the Design
- Render two lists (coffee and tea) with the Backend data
| Node.js 18.*
pnpm i
ornpm i
pnpm dev
ornpm run dev
The task is implemented with Next.js, MongoDB and Tailwind CSS, meaning it is a Headless architecture without a classic Backend setup.
The repo was kickstarted using pnpm create next-app
.
This is the data structure for coffee
. It is the same for tea
, but without tags
:
- Test, that we receive data and that it is in a proper format using Vitest and c8 for coverage
- e2e test, if required, to make sure the app behaves as intended
- Implement Loading state just in case and Error states/messages to show to a user, if something goes wrong
- Divide fetch logic into utility-first approach. You can find a comprehensive example of how I did it in another project by going through this link
- Moving all text and static data into
.json
files in a separate folder to be able to translate it and change with ease. Potentially, move it to a Headless CMS