This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
Please pull the environment variables from Vercel using the following command:
vc env pull --environment=production --yes
You need to have the Vercel CLI installed globally.
You are tasked with building an interactive Cat grid.
You can find a simple mock-up of the Cat grid in the figma file
Please keep in mind that the UI is not the focus of this task. Feel free to use component libraries to speed up development. We like any of the following:
Please use TailwindCSS.
Please query the cat data from the Cat API
Bonus points: display the details of a specific breed in the overlay
https://api.thecatapi.com/v1/breeds/:breed_id
Please review the Cat grid mock-up in the figma file linked above. Please choose an appropriate breakpoint when switching between mobile and desktop layouts.
On mobile, the cat grid features a headline and single row of cat cards. Clicking on a cat card triggers the overlay, displaying additional information about the selected breeed.
There are no filters on mobile
On larger screens, the cat grid offers a filter bar next to the cat cards. Checking one of the filters should update the card grid. Clicking on a cat card triggers the overlay, displaying additional information about the selected breeed.
Please distribute cards across columns as you see fit
Please submit a PR with your implementation of the Cat grid. We'd expect a working deployment that we can preview in Vercel.
Thank you so much for taking the time to complete this task 🙏 If you have any question, please do not hesitate to reach out.