Stop 22 · Build Portfolio ProjectsProjects · 8/15

E-commerce Store

In short

Product listing, cart, checkout. An e-commerce project touches almost every frontend skill at once, and it's the project interviewers find easiest to quiz you on.

A more complete storefront — product catalog, cart, checkout and possibly payments — one of the most portfolio-relevant, résumé-ready project types.

The jaadu browses clothing racks at a street market, holding a shirt and a bag.

Think of it like this

A Sarojini Nagar shop, but online

Customers browse racks, keep items aside, change their mind and finally pay at the counter. The shopkeeper, not the customer, says the final price. Your store needs the same flow and the same rule.

Watch it happen

From 'Add to cart' to paid

Shopper

Cart

Server

Gateway (test)

add id: 12

1/6The shopper adds product 12. The reducer stores only the id and qty: 1.

The big ideas

What you need to know

Catalogue with filters

Search, category, price range and sort, kept in the URL so links can be shared.

A cart that survives

Add, change quantity, remove, and keep it after refresh. Proves solid state management.

Checkout in test mode

Use a payment gateway's test mode. Shows you can wire up a real third-party flow.

Server decides the price

The client sends product ids and quantities. The server looks up prices and totals.

How it works

Build plan

1
Product data
A small JSON file or a free fake store API to start.
2
Listing and details
Grid page, product page, filters in the URL.
3
Cart
useReducer or a store like Zustand, saved to localStorage.
4
Checkout
Address form with validation, then a test-mode payment.
5
Orders and polish
Order confirmation page, SEO meta tags, deploy.

See it in code

Walk through the code

1function cartReducer(cart, action) {2  switch (action.type) {3    case "add": {4      const found = cart.find((i) => i.id === action.id);5      if (found) {6        return cart.map((i) => i.id === action.id ? { ...i, qty: i.qty + 1 } : i);7      }8      return [...cart, { id: action.id, qty: 1 }];9    }10    case "remove":11      return cart.filter((i) => i.id !== action.id);12    default:13      return cart;14  }15}

1/4On add, first check if the product is already in the cart.

The cart stores only ids and quantities, not prices. Prices come from the product data when showing the cart, and from the server at checkout.

Save yourself the pain

Common mistakes

Oops

Sending the cart total from the browser to the payment step.

Do this instead

Let the server recalculate the total from product ids. Anyone can edit browser data.

Oops

Building 20 pages before the cart even works.

Do this instead

Get listing, cart and checkout working end to end first, then add extras.

Your mission

Milestone 1: add to cart works

~45 min

Quick check

Where should the final amount charged to the customer be calculated?

Go deeper

1Implement filtering, sorting and search across the product catalog.
2Build a full cart-to-checkout flow with form validation.
3Consider integrating a test-mode payment provider (like Stripe) for extra credibility.

More projects at this stop