Shopping Cart

Description

A shopping cart functionality with the ability to add and remove items from the cart. To build a React app with multiple pages and a more or less complex state management.

Problems Faced

This is the first React project where I used react-router-dom. The main problem was to manage state between the pages. When a user clicks on 'Add to cart' button, the flower goes into the cart, where he could see the subtotal for that particular flower (if there's more than one of the same kind), to add more or remove flowers of the same kind, and to see the total for all flowers in the cart.

What I did

To solve that problem, I put all of the flowers and their prices into a 'global' state. When the user clicks on the 'Add to cart' button, the function fetches that flower from the state and passes it into the cart component. The cart component keeps the state of passed flowers, checks whether the flower with this ID is already present. Based on that, it does either of two thigns: if the flower is indeed present, it finds that flower in its state and adds its price to itself; if it doesn't exist, then it simply adds it to the state and displays it in the cart. When the user clicks '+' and '-' buttons, the functions determined what flower in the state user wants to add or remove and simply adds the price or removes it. If the price after removal equals to 0, the cart component removes the flower from the state.