Project 3 : E-commerce

[yogeshtakeo]

Project: E-commerce Store with Cart Functionality

Objective:

Build a simple e-commerce store with a fully functional cart feature. This project will help students practice using React, Context API (or Redux) for state management, React Query for server data fetching, and CSS-in-JS with Styled Components.

Project Overview:

Students will create an e-commerce website with a list of products that users can add to their cart, view cart details, and proceed to checkout.

Requirements:

1. Setup and Initialization:

• React Project with Vite:
  • Create a new React project using Vite: npm create vite@latest
• Install Dependencies:
  • React Query for data fetching: npm install @tanstack/react-query
  • Context API or Redux for state management (depending on choice):
  • For Context API: no extra installation needed.
  • For Redux: npm install redux react-redux @reduxjs/toolkit
  • Styled Components for CSS-in-JS styling: npm install styled-components

2. UI Design and Components:

• Main Components:

  • Product List Page: Displays a list of products with an "Add to Cart" button for each.
  • Cart Page: Shows the items in the cart, allows users to update quantity or remove items.
  • Checkout Page: Provides a summary of the cart and an option to "Place Order."

• Additional Components:

  • Navbar: Displays links to the Product List and Cart pages.
  • Product Card: Each product card should show the product image, name, price, and add-to-cart functionality.

3. Data Fetching with React Query:

• Mock API:
  • Use https://fakestoreapi.com/products or create a mock JSON file for products if preferred.
• React Query Setup:
  • Configure a React Query client to fetch product data and manage loading and error states.

4. State Management:

• Context API or Redux:
  • For Context API:
  • Create a CartContext to handle cart operations like adding, updating, and removing items.
  • For Redux:
  • Set up Redux slices to handle cart state and actions.
  • Implement reducers for adding, updating, and removing items in the cart.

5. CSS Styling with Styled Components:

• Styled Components for Component-Based Styling:
  • Create styled components for each major component (e.g., ProductCard, CartItem, Button).
  • Use them to style the product list, cart items, buttons, and any layout elements.

6. Functionality Requirements:

• Product List Page:

  • Fetch and display products from the API or mock data.
  • Implement an "Add to Cart" button to add selected items to the cart.

• Cart Page:

  • Show all items added to the cart with product name, quantity, price, and total price.
  • Allow users to update quantities or remove items from the cart.

• Checkout Page:

  • Display a summary of all cart items, total cost, and a "Place Order" button.

7. Bonus Features:

• Product Filters (Optional):

  • Add filtering or sorting options on the product list (e.g., by price, category).

• Persist Cart (Optional):

  • Use Local Storage or Session Storage to persist cart items across page refreshes.

---

Project Structure:

• App.js: Main application file with routing for Product List, Cart, and Checkout pages.
• components/: Folder for reusable components like Navbar, ProductCard, and CartItem.
• context/: For Context API setup if using Context for cart state.
• redux/: For Redux store setup, slices, and reducers if using Redux.
• styles/: Folder for Styled Components if not inline.

[Oshinacharya1]

https://github.com/Oshinacharya1/Ecommerce-Store/tree/master