Skip to content
Submitted 6 months ago

product list with cart react javascript css html

react
Luis•270
@luisv79
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?

In this project, I was able to apply concepts such as the use of reusable components, Props for passing information, States with useState, Effects with useEffect, Events in React, and Bootstrap for the design.

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

The correct use of React properties gave me a lot of problems with connecting the components, but with persistence and searching the documentation I was able to resolve it.

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

Always good advice and guidance to improve and learn is always welcome.

Code

Please log in to post a comment

Log in

Community feedback

  • Jay Khatri•4,230
    @khatri2002

    Hi @luisv79!

    The developed solution looks great! However, it's very clear that the images are not getting loaded.

    Issue: Incorrect Image Path in data.json

    You're using relative paths like:

    {
  "image": "./src/assets/images/image-waffle-thumbnail.jpg"
}

    This might work in the development environment, but it will break in production because of how React handles static assets when building the application.

    Solution: Move Images to the public Folder

    If you want to keep the images accessible via direct URLs, you should move them to the public folder.

    1. Move the images to the public folder:
    /public
    /images
        image-waffle-thumbnail.jpg
    1. Update data.json with the correct URL:
    {
  "image": "/images/image-waffle-thumbnail.jpg"
}

    Why This Works

    • React does not process the public folder during build, meaning files stay available as-is.
    • Files in public are directly accessible via / paths like: 
      https://your-app.com/images/image-waffle-thumbnail.jpg

    Hope that helps! Let me know if you need any additional help! Keep up the great work! 🚀

  • Masseh•260
    @Masseh2025

    Congratulations for attempting this challenge. Some things I would say would be to start off small and make mini projects that emphasize some of the aspects in this projects such as implementing a counter. I would advise you to look at react context, and redux for state management. Anyways congratulations for attempting something hard.

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