Responsive shop app with database and animations

What are you most proud of, and what would you do differently next time?

Proud of

With my solution I went a bit further and created a

• Next.js site deployed on Vercel that is
• dinamically adjusts to the browser's default font size and is
• reponsive but still
• stick to the Frontend Mentor's design when the default font size is 16px.

I improved the user experience by adding

• animation to the modal and the add to cart button plus
• smooth transitions upon hover.

I want to make this project a bit more closer to a real world scenario by

• fetching the product list from a database and the product pictures from a blob store so products can be added or removed without needing to rebuild the application while
• preserving server-side rendering as a step towards SEO so the shop's products can be find easier while browsing the internet so
• my application connects to MongoDb Atlas and Vercel Blob Store by an async react server component
• as well as applies incremental static regeneration on the page with invalidation timeout of 60s.

While implementing unit and integration tests, I successfully tackled several challenges

• particularly in handling asynchronous server components in both test types, and
• in effectively mocking the React Context API.

Would do differently next time:

• Think ahead of animations at the beginning of the project.
• I would like to dive into the testing best practices to be more effective.

What challenges did you encounter, and how did you overcome them?

Testing async react server components is challenging because the React Testing Library does not yet support them. I read several articles and discussions about workarounds and finally came up with my solution that worked well for me this time.

I am not sure that I found the best way to animate the app.

I found it surprisingly hard to implement the increment and decrement buttons with an animated hover state. The normal and the hover states are complements of each other in the sense that where one of them white, the other is transparent. After all, I solved the problem by replacing an SVG image with its complementary one on hover. I am wondering if there is a better way to achieve the same effect.

What specific areas of your project would you like help with?

I found it surprisingly hard to implement the increment and decrement buttons with an animated hover state. The normal and the hover states are complements of each other in the sense that where one of them is white, the other is transparent. After all, I solved the problem by replacing an SVG image with its complementary one on hover. I am wondering if there is a better way to achieve the same effect.