Live Demo 👉 Fake Shopper
Project: Shopping Cart has been set as part of The Odin Project Full stack Javascript-React curriculum. This has been set to practice React router state and effects, React testing and React styling.
- Create a new React project.
- You should have at least two pages (a home page and a shop page, which includes your shopping cart). Let the user navigate between the pages with a navigation bar, which will be shown on both pages.
- To your homepage, you can add whatever you’d like! A few images or information will be totally fine; it doesn’t have to be something fancy - it’s to test the concepts taught thus far.
- On the shopping cart page, you should have the same navigation bar that displays the number of items currently in the cart. You should also have a button next to it where you can go to the cart to checkout and pay (however we are not going to implement this logic here).
- Build individual card elements for each of your products. Display an input field on it, which lets a user manually type in how many items they want to buy. Also, add an increment and decrement button next to it for fine-tuning. You can also display a title for each product as well as an “Add To Cart” button.
- Fetch your shop items from FakeStore API or something similar.
- Once a user has submitted their order, the amount on the cart itself should adjust accordingly.
- Make sure to test your app thoroughly using the React Testing Library.
- As usual, style your application and deploy it!
Rozla-Dev 01-02-2024
Back to top 👆