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

Responsive E-commerce Product Page using Tailwind and React JS

faizal789 370

@faizal789

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

Community feedback

maicond 230

@maicondguerian

Posted

"Hey Faizal, before I provide my feedback, are you Brazilian? By the way, you did a pretty good job on this project with Tailwind and React. The final outcome was quite close to the challenge's requirements. However, from my understanding, React is about creating small, reusable components by breaking down the responsibilities into smaller, more organized components., that when togheter, make your application.

To make it even better, here are a few things you can improve:

  • Create a context to pass props through it. Prop drilling isn't always recommended, and using context will certainly make your code easier to maintain and understand.

  • Create more components for various parts of your application, such as Header, Cart, ProductGallery, Description, or BuytSide.

  • I noticed you used an alert to display a success message when a product is added to the cart. There's a library called React-toastify designed for this purpose; it would be cooler to use it instead of an alert.

  • When you add a product to the cart, the counter should reset to zero, creating a more immersive experience.

  • Currently, you are replacing the quantity of the product with the new quantity, rather than adding the old quantity to the new one.

  • The last thing is that you are reusing the modal component for mobile resolution. While this is a nice solution, you can make it a modal with a display:block instead and remove the overlay to make it blend in with the rest of the content. But once again, I liked your solution!"

Marked as helpful

0

faizal789 370

@faizal789

Posted

hello @maicondguerian Thank you nice feedback I'm from Indonesia

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