This is built using Nextjs. With Tailwind css for fast prototyping. I have included TypeScript, Storybook and some simple unit tests using Jest. Used Motion for page load animations and css for hovers. I added a data.json file to use as content so component works accoringly. Component is accessible and responsive.

A couple of things I would've liked to do is to do it add a fallback image/container to the image and possibly spend more time on the animations.

You can view the component here: https://card-list-rosy.vercel.app/

And run the project by following these steps:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

To run storybook:

npm run storybook

To run test:

npm run test

To generate components:

npm run generate

To run test:

npm run test