DemoBuy

Installation

Last updated on 2026-08-30

This guide walks you through setting up the Full-Stack E-commerce Kit from scratch, including Supabase database configuration and Stripe integration.

System Requirements

  • Node.js 18.17 or later
  • pnpm (recommended), npm, or yarn
  • Git for cloning the repository

Step 1 — Clone the Repository

Use the private repository URL from your purchase confirmation email:

git clone <your-repo-url> ecommerce-supabase
cd ecommerce-supabase

Step 2 — Install Dependencies

pnpm install

Key Dependencies

Package Purpose
next 16.x React framework
react 19.x UI library
tailwindcss 4.x CSS framework with oklch tokens
@supabase/supabase-js Supabase client
@supabase/ssr Server-side Supabase with cookies
stripe Stripe server SDK
recharts Admin dashboard charts
embla-carousel-react Product carousels

Step 3 — Create a Supabase Project

  1. Go to supabase.com and create a new project
  2. Wait for the project to finish provisioning
  3. Go to Settings > API and copy:
    • Project URL (e.g., https://xxxxxxxxxxx.supabase.co)
    • anon public key (safe for client-side)
    • service_role key (server-side only, never expose to client)

Step 4 — Configure Environment Variables

Copy the example file:

cp .env.example .env.local

Fill in your keys:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Stripe
STRIPE_SECRET_KEY=sk_test_your-stripe-secret-key
STRIPE_WEBHOOK_SECRET=whsec_your-webhook-secret

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000

Step 5 — Run Database Migrations

Go to your Supabase project's SQL Editor and run these migration files in order:

  1. supabase/migrations/001_schema.sql — Creates all 18 tables
  2. supabase/migrations/002_rls.sql — Sets up row-level security policies
  3. supabase/migrations/003_triggers.sql — Adds triggers for profile creation and review aggregation
  4. supabase/migrations/004_storage.sql — Creates the product-images storage bucket

Then run the seed data:

  1. supabase/seed.sql — Inserts 40 products, 4 categories, 12 reviews, 5 orders, and 8 customers

Tip: You can also use the Supabase CLI: supabase db push if you have it set up locally.

Step 6 — Configure Stripe Webhook

For the Stripe webhook to create orders after payment:

Local Development

Use the Stripe CLI to forward webhooks:

stripe listen --forward-to localhost:3000/api/webhooks/stripe

Copy the webhook signing secret it displays and add it to your .env.local as STRIPE_WEBHOOK_SECRET.

Production

  1. Go to Stripe Dashboard > Webhooks
  2. Add endpoint: https://your-domain.com/api/webhooks/stripe
  3. Select event: checkout.session.completed
  4. Copy the signing secret to your production environment variables

Step 7 — Configure OAuth Providers (Optional)

For Google and GitHub social login:

Google OAuth

  1. Go to Google Cloud Console
  2. Create OAuth 2.0 credentials
  3. Set redirect URI: https://your-project.supabase.co/auth/v1/callback
  4. Add client ID and secret in Supabase Dashboard > Auth > Providers > Google

GitHub OAuth

  1. Go to GitHub Developer Settings
  2. Create a new OAuth App
  3. Set callback URL: https://your-project.supabase.co/auth/v1/callback
  4. Add client ID and secret in Supabase Dashboard > Auth > Providers > GitHub

Step 8 — Start the Dev Server

pnpm dev

Visit http://localhost:3000 to see the storefront.

Step 9 — Verify the Setup

Navigate through key pages:

  • / — Homepage with featured products from Supabase
  • /products — Product listing with server-side filtering
  • /login — Sign in with email or OAuth
  • /cart — Add products and check the hybrid cart
  • /checkout/payment — Stripe Checkout redirect
  • /admin — Admin dashboard (login as admin@example.com / password123)

Available Scripts

Command Description
pnpm dev Start dev server
pnpm build Create production build
pnpm start Run production server
pnpm lint Run ESLint checks

Troubleshooting

Supabase connection errors:

Verify your .env.local has the correct NEXT_PUBLIC_SUPABASE_URL and keys. The anon key is safe for client-side use.

Stripe webhook not firing locally:

Make sure stripe listen --forward-to localhost:3000/api/webhooks/stripe is running in a separate terminal.

OAuth redirect errors:

Check that your OAuth callback URL in the provider settings matches your Supabase project URL exactly.

TypeScript errors after installation:

npx tsc --noEmit

Check that tsconfig.json path aliases match your project structure.

Previous

Getting Started

Next

Project Structure