Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Desserts eshop using Next, React and TailwindCSS

Aleš Zima 390

@Esosek

Desktop design screenshot for the Product list with cart coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

This project encourages as an extra challenge to add automated tests. I deep dived into learning it properly and applied unit and integration tests that I'm proud of.

I also never used keyframe animations before because Tailwind makes basic animations easy. But I decided to refresh my knowledge and applied some animations to cart items adding / removing and I played a little bit with the add to cart button. Very nice project and I loved working on it. Initially I spent around 4.5hours but then I started learning testing and sinked 10+ hours into this.

I'm a little bit disappointed by using Context API for state management and it's performance on mobile devices. Will probably use a 3rd party library next time.

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

The main issue I faces was making Jest and react-testing-library work with TypeScript. There should be an easy way to do this but few things must be configured so I spent a lot of time tinkering with it and finally solved it. A lot of packages are needed for this :(

Community feedback

@OGBENI-NG

Posted

You did great work. I looked into your code to see how you implemented the animation for adding items to the cart and when deleting items from the cart. It helped me add animation to my project.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord