DemoBuy

Getting Started with Full-Stack E-commerce Kit

Last updated on 2026-08-30

The Full-Stack E-commerce Kit is a production-ready Next.js e-commerce application wired to a real Supabase backend with Stripe payments. It includes 53 routes covering a complete storefront, Stripe Checkout, customer accounts, and an admin dashboard — all reading from and writing to a Supabase database.

What's Included

  • 53 routes — storefront, checkout, auth, account, and admin pages
  • 18 database tables — with migrations, row-level security, and triggers
  • Supabase Auth — email/password, Google OAuth, and GitHub OAuth
  • Stripe Checkout — redirect-based payments with webhook-driven order creation
  • Hybrid cart — localStorage for guests, Supabase for authenticated users, auto-merge on login
  • Server Actions — secure mutations for all CRUD operations
  • Light & dark mode — oklch design tokens with automatic theme switching
  • WCAG AA — accessible across every screen

How It's Different from the Frontend-Only Kit

Aspect Frontend-Only Kit Full-Stack Kit (this)
Routes 40 53
Data source data/seed.ts (hardcoded) Supabase database
Auth Mock login forms Supabase Auth with OAuth
Payments Stripe Elements markup Stripe Checkout Sessions
Cart Client-side only Hybrid (guest + DB)
Admin UI-only forms Real CRUD via Server Actions
Orders Mock data Webhook-created from Stripe
Images Static URLs Supabase Storage upload

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm
  • Supabase account — free at supabase.com
  • Stripe account — free at stripe.com
  • A code editor — VS Code recommended

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> ecommerce-supabase
cd ecommerce-supabase

# 2. Install dependencies
pnpm install

# 3. Copy environment variables
cp .env.example .env.local

# 4. Fill in your Supabase and Stripe keys in .env.local

# 5. Run the Supabase migrations (see Installation guide)

# 6. Start the dev server
pnpm dev

Open http://localhost:3000 to browse the storefront.

Kit Overview

Area Routes Key Features
Storefront 22 Product listing, categories, collections, search, wishlist, compare
Checkout 4 Cart, shipping, Stripe Checkout redirect, order confirmation
Auth 5 Login, register, forgot password, OAuth callback, email confirm
Account 12 Profile, orders, addresses, payment methods, reviews, returns, rewards
Admin 15 Dashboard, products, orders, customers, analytics, discounts, reviews

Tech Stack

Technology Purpose
Next.js 16 React framework with App Router
React 19 UI library
Tailwind CSS v4 Utility-first styling with oklch tokens
shadcn/ui Component primitives
Supabase Database, auth, storage, and real-time
Stripe Payment processing
@supabase/ssr Server-side Supabase client with cookies
Recharts Admin dashboard charts
Embla Carousel Product galleries and featured carousel

Next Steps

Next

Installation