Skip to content
Submitted 7 months ago

Responsive Product Cart

react, tailwind-css
Prem Kumar•370
@prem-kumart
A solution to the Product list with cart challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Implementing react hooks for state management.

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

Challenge was to changes the images based on the viewport size. To overcome had to implement a custom hook which kept track of the viewport size.

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

Better Code structuring and practices.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Csaba Hell•220
    @hellcsaba

    Hi Prem Kumart,

    Nice solution! Your code is well-structured and easy to read. I'll provide my feedback for improvements that I saw relevant.

    • Your solution includes semantic HTML which is great. I think you could have use <section> tags as well (instead of <div>)
    • Instead of the custom hook for the proper images for the viewport size you can use the <picture> tag. It can handle the different images based on the condition (e.g. max-width or min-width)
    • It's better to use rem for images instead of pixels because they're more responsive

    I hope I could help with my feedback! Happy Coding! :)

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