Stop 08 · ReactProjects · 1/6

Ecommerce

In short

An online store is the classic React project because it uses almost everything: lists, routing, shared cart state and forms. Build a small one properly and most React apps will feel familiar.

A product listing, cart and checkout flow — one of the most common real-world React apps, combining state management, routing and forms.

The jaadu mascot pushes a full trolley down a supermarket aisle toward the billing counter.

Think of it like this

A supermarket trip

You walk the aisles (product list), pick something up to read the label (product page), drop it in the trolley (cart) and pay at the counter (checkout). Your app needs each of these stations, and the trolley has to follow you everywhere.

Watch it happen

Add to cart, everywhere at once

ProductCard

Cart reducer

Header badge

Cart page

{type: "add", item}

1/4The cart has one ₹20 pen and one ₹60 notebook. You click Add on the pen again.

The big ideas

What you need to know

Product list and filters

Show products from a JSON file or a free API, with a search box and a category filter.

A cart that's everywhere

Keep cart state in Context (or Zustand later) so the header badge and the cart page always agree.

Real routes

/, /product/:id, /cart and /checkout, linked with Link so the cart survives every page change.

Derived totals

Work out item count and total from the cart array. Don't store them separately.

How it works

Build plan

1
Static product grid
Render products from a local JSON file with a ProductCard component.
2
Add routing
Create the product detail page and read the id with useParams.
3
Cart state
Add, remove and change quantities from one shared cart.
4
Checkout form
Collect address details and show an order summary.
5
Save the cart
Store it in localStorage so a refresh doesn't empty it.

See it in code

Walk through the code

1type Item = { id: number; name: string; price: number; qty: number };2type Action = { type: "add"; item: Omit<Item, "qty"> } | { type: "remove"; id: number };3 4export function cartReducer(cart: Item[], action: Action): Item[] {5  switch (action.type) {6    case "add": {7      const found = cart.find((i) => i.id === action.item.id);8      if (found) return cart.map((i) => (i.id === found.id ? { ...i, qty: i.qty + 1 } : i));9      return [...cart, { ...action.item, qty: 1 }];10    }11    case "remove":12      return cart.filter((i) => i.id !== action.id);13  }14}15 16// const total = cart.reduce((sum, i) => sum + i.price * i.qty, 0);