Building TeraStore: A Full-Stack E-Commerce App with React and DRF

Why Build Your Own E-Commerce Platform?

While Shopify and WooCommerce are great for most businesses, building your own e-commerce platform from scratch teaches you things no tutorial can: session management, cart persistence, payment flow design, and the complexity of order state management.

TeraStore is my attempt at a production-grade, modern e-commerce platform.

Architecture Overview

Frontend (React + Vercel)
    ↕ REST API calls
Backend (Django REST Framework)
    ↕ Database queries
SQLite / PostgreSQL

The frontend and backend are completely decoupled — the React app doesn't know or care how the backend is implemented, it just consumes a REST API.

The Product Catalogue

class Product(models.Model):
    name = models.CharField(max_length=200)
    description = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)
    stock = models.IntegerField(default=0)
    image = models.ImageField(upload_to='products/')
    category = models.ForeignKey(Category, on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)

Shopping Cart: The Hardest Part

Shopping cart state is surprisingly complex. You need to handle:

• Guest carts: Stored in localStorage before login
• Authenticated carts: Stored in the database
• Cart merging: When a guest logs in, merge their local cart with their server-side cart

I solved this with a React Context that syncs with the backend on login and falls back to localStorage for guests.

Clerk Authentication

Clerk's pre-built UI components handle the entire auth flow — sign-in, sign-up, forgot password, email verification. The user experience is polished out of the box.

import { ClerkProvider, SignedIn, SignedOut } from '@clerk/clerk-react';

function App() {
  return (
    <ClerkProvider publishableKey={process.env.REACT_APP_CLERK_KEY}>
      <SignedIn><ShoppingApp /></SignedIn>
      <SignedOut><LandingPage /></SignedOut>
    </ClerkProvider>
  );
}

Order Management

Orders go through a clear state machine: pending → confirmed → shipped → delivered. Each state transition triggers appropriate UI updates and (in a production system) would send email notifications.

Check out TeraStore live and the source code.