Skip to main content

Exercise: Shopping Cart with useReducer

Objective​

Build a complete shopping cart using useReducer for state management.

Requirements​

State Structure​

interface CartState {
  items: CartItem[];
  total: number;
  discount: number;
  tax: number;
}

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  image?: string;
}

Actions​

  • ADD_ITEM
  • REMOVE_ITEM
  • UPDATE_QUANTITY
  • APPLY_DISCOUNT
  • CLEAR_CART

Features​

  1. Add products to cart
  2. Update quantities (+ / -)
  3. Remove items
  4. Calculate subtotal, tax, and total
  5. Apply discount codes
  6. Persist to localStorage
  7. Empty cart state

Bonus​

  • Multiple discount codes
  • Free shipping threshold
  • Product recommendations
  • Checkout validation

Time Estimate​

3-4 hours