📋 Description
A modern and responsive e-commerce cart application built with React JS, Redux Toolkit, React Router, and Bootstrap.
This project simulates a shopping cart system where users can browse products, add them to the cart, adjust quantities, and view detailed product information — all managed efficiently using Redux for global state management.
✅ What This Project Covers
- Dynamic product rendering from a local data file.
- Add and remove products from the shopping cart.
- Increase or decrease product quantities directly in the cart.
- Automatic calculation of total price based on quantities.
- Conditional rendering:
- Shows an empty cart message when no items are added.
- Displays a dynamic product count on the cart icon in the navbar.
- Detailed product page showing:
- Product image, title, price, rating, reviews count, and ingredients.
- Quantity controls (+ / - buttons) and total amount calculation.
- Automatically removes items from the cart when quantity reaches zero.
- Navigation between pages handled with React Router.
- Responsive layout designed with Bootstrap.
🚀 Features Implemented
- Responsive and dynamic product grid layout.
- Global state management using Redux Toolkit.
- Persistent cart functionality and real-time updates.
- Product details page with live quantity updates.
- Clear total price calculation for all items.
- Dynamic product count badge on navbar cart icon.
- Smooth navigation between Home, Cart, and Details pages.
- Empty cart message with visual feedback.
- Clean and reusable component structure.
🌟 Ideas for Future Enhancements
- Save cart data in localStorage for session persistence.
- Add user authentication and order checkout page.
- Integrate payment gateway simulation.
- Add category filters and product search.
- Add dark/light mode toggle.
🛠️ Technologies Used
- React JS (with Vite)
- Redux Toolkit
- React Router
- Bootstrap 5
- JavaScript (ES6+)
- Git & GitHub
🌐 Live Demo
👉 Redux E-Commerce Cart Live
📸 Screenshots
📦 How to Run Locally
# Clone the repository
git clone https://github.com/elfajome/Redux-Ecommerce-cart.git
# Navigate into the project directory
cd Redux-Ecommerce-cart
# Install dependencies
npm install
# Run the project
npm run dev