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

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

#accessibility#framer-motion#react#tailwind-css#vite
darryncodes 6,430

@darryncodes

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

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

@GrzywN

Posted

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,430

@darryncodes

Posted

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

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