Shopping Cart app with react and redux.
Gist...
- - Bootstrap react app.
- - Install Dependencies.
- - Create redux store and root reducer.
- - Create ShoppingCartApp container component and connect to redux store.
- - Create app layout
- - Add global styles.
- - Split view into 2 columns.
- - Create Header component.
- - List all products.
- - Create ProductItem component and pass product as prop.
- - Add product to cart.
- - Create action, action creator and modify state to add product to cart.
- - On button click, dispatch add to cart action.
- - Display all cart items
- Create CartItem component and pass product as prop.
- Display total price.
- - Increase/Decrease quantity.
- - Add
+
and-
buttons in CartItem component - - Create action, action creator and modify state to increase/decrease quantity.
- - On
+
/-
buttons click, dispatch action to increase/decrease quantity of a product.
- - Add
- - Remove product from cart.
- - Add remove button on CartItem component.
- - Create action, action creator and modify state to remove product to cart.
- - On button click, dispatch remove from cart action.
Connect to backend.
- - Install redux-thunk and add thunk middleware to store.
- - Fetch products from backend.
- - Get cart details from backend.
- - Add item to cart and save in database.
- - Increase/decrease item quantity.
- - Remove item from cart.
The project is licensed under the MIT license. Read license for more information.