About ecommerce-template

An ecommerce template built with NextJS 16, TypeScript and TailwindCSS

m

Published by

README.md

Next.js Ecommerce Template

Modern ecommerce starter built with Next.js 16, React 19, App Router, Drizzle ORM, Supabase, Better Auth, Stripe, TanStack Query, Tailwind CSS, and Zod.

Stack

Next.js 16 with App Router and Cache Components
React 19
TypeScript strict mode
Tailwind CSS
TanStack Query
Drizzle ORM
Supabase PostgreSQL
Better Auth
Stripe Checkout
Zod
Nodemailer

Features

Product catalog with categories and variants
Shopping cart and wishlist
Stripe checkout
Order history
Admin product management
Email notifications
Type-safe validation and data access

Getting Started

Install dependencies:

npm install

Create .env.local from .env.example.
Run the database setup:

npm run db:migrate
npm run db:push

Start the development server:

npm run dev

Open http://localhost:3000.

Environment Variables

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Database
DATABASE_URL=your_supabase_database_url

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Better Auth
BETTER_AUTH_SECRET=your_better_auth_secret

# Stripe
STRIPE_SECRET_KEY=your_stripe_secret_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

# Email
EMAIL_SERVER_HOST=your_email_host
EMAIL_SERVER_PORT=your_email_port
EMAIL_SERVER_USER=your_email_user
EMAIL_SERVER_PASSWORD=your_email_password
EMAIL_FROM=your_email_from
EMAIL_CONTACT_TO=your_email_inbox

Scripts

# App
npm run dev
npm run build
npm run start
npm run lint
npm run typecheck

# Database
npm run db:generate
npm run db:migrate
npm run db:push
npm run db:studio
npm run db:pull

Project Structure

src/
  app/         App Router routes, layouts, pages, route handlers
  components/  UI and feature components
  hooks/       Client hooks and React Query hooks
  lib/         Infra code: auth, db, email, Stripe, shared helpers
  schemas/     Zod schemas
  services/    Business logic
  styles/      Global CSS
  types/       Shared TypeScript types
  utils/       Stateless helpers and formatters

Deployment Notes

Configure all environment variables in production.
Use a public webhook URL for Stripe.
Run npm run db:migrate before npm run db:push on new environments.
Set NEXT_PUBLIC_APP_URL to the production domain.

License

MIT. See LICENSE.

ecommerce-template