Project 6~90 minutesInterview Simulation

E-Commerce Mini

Interview Scenario: "You have 2 hours. Build a minimal e-commerce site. Users should be able to browse products, add items to a cart, and see a checkout summary. Don't worry about actual payments, but show me how you'd structure it."

This is an Interview Simulation

Set a timer for 2 hours. Work as if this were a real interview. No looking at previous solutions — apply what you've learned.

What You'll Learn

Building product catalog endpoints
Session-based cart management
In-memory data structures for quick prototyping
CRUD operations on nested resources

Interview Mode: Simplified in-memory storage. Perfect for live coding.

Requirements

Must Have

Product listing page (fetch from API)
Add to cart functionality
Cart page with items and quantities
Update quantity / remove items
Checkout page showing total

Nice to Have

Product detail page
Search/filter products
Stock validation
Persist cart across refreshes
Loading and error states

Step 1: Backend with In-Memory Storage

For interviews, skip the database setup. Use Python dictionaries and lists to store products and carts. This lets you focus on the API design and frontend logic.

backend/main.py

1from fastapi import FastAPI, HTTPException
2from fastapi.middleware.cors import CORSMiddleware
3from pydantic import BaseModel
4
5app = FastAPI()
6
7app.add_middleware(
8    CORSMiddleware,
9    allow_origins=["http://localhost:3000"],
10    allow_credentials=True,
11    allow_methods=["*"],
12    allow_headers=["*"],
13)
14
15# In-memory storage
16products = [
17    {"id": 1, "name": "Laptop", "price": 999.99, "stock": 10},
18    {"id": 2, "name": "Headphones", "price": 199.99, "stock": 25},
19    {"id": 3, "name": "Mouse", "price": 49.99, "stock": 50},
20]
21carts = {}  # session_id -> list of {product_id, quantity}
22
23class CartItem(BaseModel):
24    product_id: int
25    quantity: int
26
27@app.get("/api/products")
28def get_products():
29    return products
30
31@app.get("/api/cart/{session_id}")
32def get_cart(session_id: str):
33    cart_items = carts.get(session_id, [])
34    result = []
35    for item in cart_items:
36        product = next((p for p in products if p["id"] == item["product_id"]), None)
37        if product:
38            result.append({**item, "product": product})
39    return result
40
41@app.post("/api/cart/{session_id}")
42def add_to_cart(session_id: str, item: CartItem):
43    if session_id not in carts:
44        carts[session_id] = []
45    # Check if product already in cart
46    for cart_item in carts[session_id]:
47        if cart_item["product_id"] == item.product_id:
48            cart_item["quantity"] += item.quantity
49            return {"message": "Cart updated"}
50    carts[session_id].append({"product_id": item.product_id, "quantity": item.quantity})
51    return {"message": "Added to cart"}
52
53@app.patch("/api/cart/{session_id}/{product_id}")
54def update_cart_item(session_id: str, product_id: int, item: CartItem):
55    if session_id not in carts:
56        raise HTTPException(status_code=404, detail="Cart not found")
57    for cart_item in carts[session_id]:
58        if cart_item["product_id"] == product_id:
59            cart_item["quantity"] = item.quantity
60            return {"message": "Updated"}
61    raise HTTPException(status_code=404, detail="Item not in cart")
62
63@app.delete("/api/cart/{session_id}/{product_id}")
64def remove_from_cart(session_id: str, product_id: int):
65    if session_id not in carts:
66        raise HTTPException(status_code=404, detail="Cart not found")
67    carts[session_id] = [i for i in carts[session_id] if i["product_id"] != product_id]
68    return {"message": "Removed"}

Why no database in interview mode?

In a 2-hour interview, setting up SQLAlchemy with relationships can eat 30+ minutes. Using dicts demonstrates the same concepts without the boilerplate. Mention: "In production, I'd use PostgreSQL with proper foreign keys."

The trade-off

This in-memory approach resets when the server restarts. That's fine for interviews! Switch to Production Mode above to see the full database setup.

Step 2: API Endpoints Overview

API endpoints

1GET  /api/products              # List all products
2GET  /api/products/{id}         # Single product detail
3GET  /api/cart/{session_id}     # Get cart contents
4POST /api/cart/{session_id}     # Add item to cart
5PATCH /api/cart/{session_id}/{item_id}  # Update quantity
6DELETE /api/cart/{session_id}/{item_id} # Remove from cart

Step 3: Frontend Pages to Build

/Product grid (cards with name, price, image, 'Add to Cart' button)
/product/[id]Product detail page
/cartShopping cart with quantity controls
/checkoutOrder summary (no actual payment)

Session ID Pattern

Without authentication, use a simple session ID stored in localStorage:

const getSessionId = () => {
  let id = localStorage.getItem('session_id')
  if (!id) {
    id = crypto.randomUUID()
    localStorage.setItem('session_id', id)
  }
  return id
}

Success Criteria

If You're Running Out of Time

Verbally explain what you'd add: "Given more time, I'd add input validation, error boundaries, and optimistic updates." This shows you know what's missing even if you can't implement it.

What You Learned

FastAPI Basics

In-memory data storage with dicts
Nested resource endpoints
Session-based cart management
CRUD operations without a database

E-Commerce Patterns

Product catalog design
Shopping cart state management
Session-based user tracking
Order summary calculation

Congratulations!

You've completed all 6 projects. You now have hands-on experience with the full Next.js + FastAPI stack. Check out the reference section for quick lookup during your interview.

View Cheatsheets