https://github.com/supiyasingh/e-commerce-app-with-routing-and-thunk
https://github.com/supiyasingh/e-commerce-app-with-routing-and-thunk
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/supiyasingh/e-commerce-app-with-routing-and-thunk
- Owner: Supiyasingh
- Created: 2025-02-22T08:39:12.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-22T10:22:42.000Z (3 months ago)
- Last Synced: 2025-02-22T11:24:49.534Z (3 months ago)
- Language: JavaScript
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
1
Problem Statement: React Redux E-Commerce App with Routing and Thunk
Objective:
Build a simple e-commerce web application using React, Redux, Thunk, and Chakra UI. The app should allow users to:
✅ View a list of products
✅ Add products to the cart (without duplicates; only quantity should increase)
✅ View the cart with total price and update item quantities
✅ Proceed to checkout and place an order
✅ See a success message after placing the order
✅ Navigate through the app using a Navbar with a cart item count badge
Demo Link
Folder Structure
Features & Requirements:
1. Product Listing Page (/)
Fetch products from an API and display them.
Each product should have:
Image
Title
Price
“Add to Cart” button
Clicking "Add to Cart" should add the product to the cart.
If a product is already in the cart, only its quantity should increase (instead of adding a duplicate).
Users can navigate to the Cart page.
2. Cart Page (/cart)
Display all products added to the cart.
Each product in the cart should have:
Title
Price
Quantity (editable using an input field)
"Remove" button
Display total cart price at the bottom.
"Proceed to Checkout" button should navigate to the Checkout page.
If the cart is empty, display a message: "Your cart is empty".
3. Checkout Page (/checkout)
Display an Order Summary with:
Product names
Quantities
Total price
"Place Order" button should submit the order, clear the cart items, and navigate to Order Success page.
4. Order Success Page (/order-success)
Show a message: "Order Placed Successfully!"
Provide a link to go back to the Product Listing page.
5. Navbar (Persistent Across All Pages)
Shows a cart icon with the total count of items in the cart.
Links to Products and Cart pages.
🛠️ State Management Guidelines
🔹 1. Redux Store Setup
Configure a Redux store that combines multiple reducers.
Use middleware like redux-thunk to handle asynchronous actions.
🔹 2. Product Reducer
Maintain a state that stores:
A list of products.
A loading state for API calls.
An error state for failed API requests.
const initialProductState = { products: [], loading: false, error: null };
Define actions for:
Fetching products (request, success, failure).
🔹 3. Cart Reducer
Maintain a state that tracks:
const initialCartState = { items: [] };
Define actions for:
Adding a product to the cart.
Removing a product from the cart.
Updating the quantity of an item.
Clearing the cart upon placing an order.
🔹 4. Actions
Define and dispatch actions for:
Fetching products from an API.
Managing cart operations (add, remove, update quantity, place order).
🔹 5. Navbar Cart Count
Ensure the cart count in the navbar dynamically updates based on the total number of items in the cart.
🛒 Actions & Reducers:
Load product data (from API)
FETCH_PRODUCTS_SUCCESS
FETCH_PRODUCTS_FAILURE
FETCH_PRODUCTS_LOADING
ADD_TO_CART: Add a product to the cart.
REMOVE_FROM_CART: Remove a product from the cart.
UPDATE_QUANTITY: Increase/decrease product quantity.
PLACE_ORDER: Simulate order placement (clear cart).
API Endpoints:
The app should use FakeStore API for fetching products.
1. Fetch Products (GET)
URL: https://fakestoreapi.com/products
Response:
[ { "id": 1, "title": "Product 1", "price": 29.99, "image": "https://example.com/product1.jpg" }, { "id": 2, "title": "Product 2", "price": 19.99, "image": "https://example.com/product2.jpg" } ]
2. Add to Cart (Client-Side Only, No API Call Required)
Redux Action:
{ "type": "ADD_TO_CART", "payload": { "id": 1, "title": "Fjallraven Backpack", "price": 109.95, "quantity": 1 } }
3. Remove from Cart (Client-Side Only, No API Call Required)
Redux Action:
{ "type": "REMOVE_FROM_CART", "payload": { "id": 1 } }
4. Update Quantity in Cart (Client-Side Only, No API Call Required)
Redux Action:
{ "type": "UPDATE_QUANTITY", "payload": { "id": 1, "quantity": 2 } }
5. Place Order
{ "type": "PLACE_ORDER" }