Learn the Good Patterns
Real-world engineering guide on how top e-commerce websites achieve sub-1.0s LCP, zero layout shifts, impenetrable checkout security, and effortless scale.
Capstone: Build a Scalable 12-Page Shopping Website (JS or Python)
The comprehensive master blueprint for a scalable, production-ready 12-page e-commerce store with an interactive tech stack chooser (Full JS vs Hybrid React+FastAPI vs Pure Python).
Production Architecture: 12 Core Pages, Relational Schema & Scaling
A resilient e-commerce business requires 12 coordinated pages, a clean relational database schema, stateless authentication, and edge caching. You can build this architecture using your choice of stack: Full JavaScript (Next.js + Prisma), Hybrid (React + Python FastAPI), or Pure Python (FastAPI/Django + HTMX). Below is the complete roadmap and interactive stack selector.
// 12-Page Production E-Commerce Sitemap:
// 1. / -> Homepage (Hero, Bestsellers, Value Props) - SSG
// 2. /products -> Catalog (Filters, Sort, Pagination) - ISR
// 3. /products/[slug] -> Product Detail (Gallery, Sizes, Stock, Schema) - ISR
// 4. /cart -> Shopping Cart (Subtotal, Tax, Shipping) - Client State
// 5. /checkout -> Secure Payment (Stripe Elements, Validation) - SSR
// 6. /orders/[id] -> Order Confirmation & Invoice Receipt - SSR
// 7. /login & /register -> Auth Portal (Rate-Limited, HttpOnly Cookie) - SSR
// 8. /account -> Customer Dashboard (Order History, Addresses) - SSR
// 9. /contact -> Customer Support & Live Chat - Static
// 10. /about -> Brand Story & Warehouse Locations - Static
// 11. /privacy & /terms -> Legal Compliance (GDPR/DPDP) - Static
// 12. /returns -> 30-Day Money-Back Policy - StaticKey Engineering & Business Benefits:
- Complete end-to-end blueprint covering all customer touchpoints from discovery to checkout.
- Scales effortlessly to 100,000+ daily shoppers through edge caching and connection pooling.
- Compatible with both JavaScript/TypeScript and Python full-stack ecosystems.
Choose Your Preferred Tech Stack
The modern full-stack TypeScript stack. Next.js 15 App Router handles React Server Components for instant HTML rendering, Server Actions process checkout logic with zero client exposure, and Prisma ORM provides type-safe queries.
// Stack A: Next.js 15 App Router + Server Actions + Prisma
// app/actions/checkout.ts
'use server';
import { prisma } from '@/lib/prisma';
import { stripe } from '@/lib/stripe';
import { cookies } from 'next/headers';
export async function createCheckoutSession(cartItems: { productId: string; qty: number }[]) {
// 1. Fetch live product prices from DB (Never trust prices sent by client!)
const productIds = cartItems.map((i) => i.productId);
const dbProducts = await prisma.product.findMany({
where: { id: { in: productIds }, is_active: true },
});
const lineItems = dbProducts.map((p) => {
const item = cartItems.find((i) => i.productId === p.id);
return {
price_data: {
currency: 'usd',
product_data: { name: p.title },
unit_amount: p.price_cents,
},
quantity: item?.qty || 1,
};
});
// 2. Initialize encrypted Stripe Checkout Session
const session = await stripe.checkout.sessions.create({
mode: 'payment',
payment_method_types: ['card'],
line_items: lineItems,
success_url: `https://store.aura.dev/orders/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `https://store.aura.dev/cart`,
});
return { checkoutUrl: session.url };
}The 12 Essential E-Commerce Pages
Homepage / Hero
Value proposition, bestsellers, social proof, and categories
Product Catalog
Faceted filters (size, color, price), sorting, and search
Product Detail (PDP)
WebP photo gallery, size picker, stock badge, Schema.org
Shopping Cart
Slide-over bag drawer, item quantities, promo code discount
Secure Checkout
Shipping address validation, Stripe iframe, anti-double submit
Order Receipt
Order confirmation, payment receipt, tracking link, invoice
Auth Portal
Rate-limited authentication, HttpOnly cookies, password strength
Customer Dashboard
Past order history, saved addresses, profile management
Contact & Support
Support ticket form, customer hotline, registered business address
About Us
Brand story, ethical manufacturing, corporate registration info
Privacy & Terms
GDPR/DPDP compliance, cookie disclosures, user agreement
Return & Refund Policy
30-day money-back guarantee, return steps for Stripe approval
Production PostgreSQL Database Schema
-- Production Relational Database Schema (PostgreSQL)
-- 1. Customers Table (Irreversible password hashes & role)
CREATE TABLE customers (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
email VARCHAR(255) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
full_name VARCHAR(120),
phone VARCHAR(20),
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- 2. Products Table (SKU, price in integer cents, active status)
CREATE TABLE products (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
slug VARCHAR(120) UNIQUE NOT NULL,
title VARCHAR(200) NOT NULL,
description TEXT NOT NULL,
price_cents INTEGER NOT NULL CHECK (price_cents >= 0),
stock_count INTEGER NOT NULL DEFAULT 0 CHECK (stock_count >= 0),
images_json JSONB NOT NULL DEFAULT '[]'::jsonb,
is_active BOOLEAN NOT NULL DEFAULT true,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- 3. Orders Table (Strict status lifecycle & payment intent)
CREATE TABLE orders (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
customer_id UUID REFERENCES customers(id) ON DELETE SET NULL,
status VARCHAR(30) NOT NULL DEFAULT 'pending', -- pending, paid, shipped, cancelled
total_cents INTEGER NOT NULL,
stripe_session_id VARCHAR(120) UNIQUE,
shipping_address JSONB NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- 4. Order Items (Snapshot unit price at time of purchase)
CREATE TABLE order_items (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
order_id UUID NOT NULL REFERENCES orders(id) ON DELETE CASCADE,
product_id UUID NOT NULL REFERENCES products(id),
quantity INTEGER NOT NULL CHECK (quantity > 0),
unit_price_cents INTEGER NOT NULL
);How This Architecture Scales to 100,000+ Shoppers:
- Edge CDN Caching: 90% of page requests (images, CSS, JS, SSG legal pages, and ISR product pages) are served directly from Cloudflare edge caches in under 40ms without touching your origin server.
- Database Connection Pooling: Using PgBouncer allows 5,000 concurrent shopper checkout queries to share a pool of 20 database connections, preventing PostgreSQL "too many clients" crashes.
- Stateless Session Cookies: Customer JWT sessions in HttpOnly cookies eliminate the need to query a session database on every single page navigation.
The Horror Site: Single Monolithic PHP File & Server Meltdown
The bad site stuffed all logic into a single 4,000-line index.php script with no separation of concerns, no checkout confirmation page, no order receipts, and un-pooled database connections that crashed the server at 60 concurrent users.
// The Bad Site: 4000 lines of messy spaghetti code in a single file
<?php
// Database queries, HTML generation, payment processing all mixed together
include("config.php");
// No connection pool, no caching, crashes at 60 users!
?>How to Implement / Fix in 3 Practical Steps
Structure the application into the 12 core pages with clean separation between static marketing and dynamic checkout.
Deploy database connection pooling (PgBouncer) and stateless JWT sessions in HttpOnly cookies.
Select a modern tech stack (Full JS, Hybrid React+FastAPI, or Pure Python) and leverage edge caching.
Review system architecture for connection pooling, edge caching, and independent page separation across the 12 core shopping routes.
Finished reading this lesson?
Mark it as mastered below, or click Next Lesson to auto-complete.