Welcome to the Redux E-Commerce Store project! This project demonstrates a simple e-commerce store application built using React and Redux. Users can browse through a list of products, add items to their cart, and manage the number of items in the cart.
To get started with this project, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/your-repo.git cd your-repo -
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open your web browser and navigate to
http://localhost:3000to see the application in action.
- Browse a list of products with images, names, and prices.
- Add products to the shopping cart.
- Adjust the quantity of products in the cart.
- Remove products from the cart.
-
Product List Page: Upon visiting the application, you will see a list of products available for purchase. Each product displays an image, name, and price. Click the "Add to Cart" button to add a product to your cart.
-
Cart Page: Click the shopping cart icon in the navigation bar to view your cart. Here, you can see a list of items you've added to the cart, along with their quantities. You can increase or decrease the quantity of an item using the "+" and "-" buttons, respectively. You can also remove items from the cart entirely by clicking the "Remove" button.
The project is organized into several components, actions, and reducers, following a Redux architecture.
actions.js: Defines action types and action creators for adding, removing, and updating cart items.reducer.js: Implements the cart reducer, handling various actions to update the cart state.products.js: Contains an array of sample product data.ProductList.js: Component for displaying the list of products and adding items to the cart.Cart.js: Component for managing the cart, including adjusting quantities and removing items.Navbar.js: Navigation bar component with a link to the cart page and a cart icon.App.js: Main application component that sets up the Redux store and routes.