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 and linked to the project with vercel link
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.
Bonus: 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.
Please distribute cards across columns as you see fit.
Bonus: When filtering results, we’d like to see an animation applied to the changes in the grid or the individual grid items. Decide on your own which aspects to animate and how to implement it. Ideally implemented using motion. For example, a card can have its opacity and y position animated when appearing and/or disappearing.
Bonus 2: Clicking on a cat card triggers the overlay, displaying additional information about the selected breed.
Please submit a PR with your implementation of the Cat grid. We'd expect a working deployment that we can preview in Vercel.
Since we don't want to steal too much of your time, please don't spend more than 4h on the task and try to complete as much as possible. It's not necessarily expected that everything is completed, you can also chose on your own which aspects you want to focus on.
Thank you so much for taking the time to complete this task 🙏 If you have any question, please do not hesitate to reach out.