Product cart using React.js
Solution retrospective
This is the first React-based website I built, and I'm really proud of how much I learned through the process. I designed it to mimic a simple e-commerce shopping experience, with core features like a dynamic product listing and a functional cart system that lets users add, remove, and view selected items.
One of the things I’m most proud of is that I didn’t just make a static site. I actually got to handle real React concepts like state management, props, conditional rendering, and component structure. It also taught me how to manage routing, user interactions, and organize files in a clean and scalable way.
Beyond the development part, I went through the full process of building, optimizing, and deploying the site using Vercel, which gave me a good sense of how real-world React apps go from local code to a live website.
What challenges did you encounter, and how did you overcome them?Challenges I Encountered While building this project, I faced quite a few challenges that really helped me grow as a React developer:
Understanding State Management One of the biggest hurdles was figuring out how to manage state between different components, especially for the cart system. Making sure the cart updated in real-time whenever a product was added or removed took a lot of trial and error before I fully understood how useState and props worked together.
Component Reusability and Structure At the beginning, I wrote a lot of repeated code, and I struggled to separate layout from logic. It wasn’t until I refactored that I started thinking in terms of reusable components, which made the code cleaner and easier to maintain.
Dynamic Routing and Conditional Rendering Setting up routes and making sure the correct component loaded based on the URL was confusing at first, especially handling things like the cart display or error pages. Learning react-router-dom and how to conditionally render content based on state was a key challenge.
Deployment Issues When I deployed the site to Vercel for the first time, the images and some assets didn’t load because I was referencing paths the same way I did locally. Understanding the difference between src/assets and public/ paths in production took some research to solve.
These challenges really helped me understand how React handles data flow, component reusability, and deployment — and they pushed me to write better code and structure my projects more professionally.
What specific areas of your project would you like help with?Clearing the image border, when items are removed directly from the cart and also whn order is confirmed.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@markuslewin
Should the border be displayed only when the item is in the cart? Could you remove
activeItems, and instead reuse the check you wrote to toggle buttons?const Cart = () => { return ( <img style={{ border: cartItems.some((cartItem) => cartItem.id === item.id) ? "3px solid hsl(14, 86%, 42%)" : "none", }} /> ); };
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