Submitted over 1 year ago

E-commerce product page - Tailwind CSS, React, Framer Motion & Vite

darryncodes•6,370

@darryncodes

Preview site View code

This is a solution for...E-commerce product page

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hi everyone 👋

I had a lot of fun with this challenge!

The shopping cart functionality is the perfect use case to learn React's useContext hook. I also really appreciated Tailwind CSS helping to speed up the development process to focus on learning React.

A nice little addition was playing around with framer-motion & react-toastify.

Any feedback that could help me to improve would be very welcome.

Happy coding 🤙

Community feedback

Karol Binkowski•1,640
@GrzywNPosted over 1 year ago
Great job @darryncodes!

I think you should consider changing '+' and '-' buttons, since they are really hard to click, especially on mobile. Try to focus them with the 'tab' key and you'll see.

Helpful materials for you:

https://nerdcave.com/tailwind-cheat-sheet

https://atomicdesign.bradfrost.com/chapter-2/

https://blog.logrocket.com/using-prettier-eslint-automate-formatting-fixing-javascript/

https://www.npmjs.com/package/prettier-plugin-organize-imports

Have a nice day and keep coding!
Marked as helpful
0
darryncodes•6,370
@darryncodesPosted over 1 year ago
Hi @GrzywN, thanks a lot!

And for taking the time to look over the solution. Great shout increasing the clickable area of the buttons. I've done that now.

Thanks for sharing the links, All the best!
1

Please log in to post a comment

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