Ecommerce Boilerplate Documentation

A modular, production-ready ecommerce starter built with Next.js 14 (App Router), TypeScript, Tailwind CSS, shadcn/ui, and Firebase. It ships a complete quote-based storefront — browse products, build a cart as a guest or signed-in user, and submit quote requests — that you can rebrand and extend in an afternoon.

What you get

Everything a small catalog needs to go live, plus the seams to grow into a self-hostable commerce platform:

• Storefront — landing page (hero, category grid, featured products, testimonials, newsletter, contact), a product catalog with category filtering and pagination, and product detail pages with related products.
• Cart & quotes — guest carts in localStorage, signed-in carts synced live to Firestore, automatic cart merging on login, and a quote-request checkout flow (no payment processor required — ideal for B2B/wholesale).
• Payments (optional) — env-gated, variant-aware Stripe Checkout with server-side re-pricing, promotion codes, and a webhook that records paid orders into the fulfillment pipeline.
• Products — categories, name search, inventory tracking with out-of-stock states, variants with per-variant pricing/stock/images, and image uploads to Firebase Storage.
• Orders — accepted quotes convert to orders; fulfillment pipeline (Processing → Shipped → Delivered/Cancelled) with customer order history.
• Auth — Google sign-in and passwordless email-link sign-in via Firebase Authentication, with customer records created on first login.
• Account area — profile, addresses, quote and order history at /account.
• Admin dashboard at /admin — product CRUD, featured curation, quote pipeline, order fulfillment, customer list, media library, discounts, and an activity audit trail — gated by an admins role collection and enforced by the shipped firestore.rules.
• Emails (optional) — Resend-powered notifications on quote submission and status changes, entirely env-gated.
• Public Store API — read-only /api/store/* catalog endpoints with cursor pagination and cache headers.
• Backend-agnostic architecture — a commerce service layer (src/lib/commerce) with typed lifecycle event hooks; swap Firebase for Supabase or Postgres/Prisma by writing one adapter.
• Storefront preferences — shoppers switch language, currency, and brand theme from the header; each choice is cookie-backed and resolved server-side (no flash).

Rebrandable in an afternoon

Names, contact details, navigation, product categories, currencies, and locales all live in one file — src/config/site.ts. Brand colors are four CSS variables. Six product categories ship by default (audio, wearables, smart-home, cameras, computing, accessories), and demo data seeds an 18-product catalog with one idempotent command.

export const siteConfig = {
  name: "Acme Store",
  tagline: "Everything you need to launch your online store",
  url: "https://example.com",
  currency: { code: "USD", locale: "en-US" },
  // contact, mainNav, locales, currencies, theme presets…
} as const;

Who these docs are for

If you are building on the boilerplate — cloning, configuring, theming, swapping backends, or calling the API — start with Quick start and Site config. If you are running a store — adding products, working the quote pipeline, fulfilling orders, managing discounts and media — head to the Admin overview.

How the docs are organized

First steps

Full walkthrough in the Quick start guide.

Tech stack

Next.js 14 (App Router) · TypeScript · Tailwind CSS · shadcn/ui (Radix primitives) · Firebase (Auth, Firestore, Storage) · framer-motion · lucide icons · Zod · Vitest. Optional: Stripe (payments), Resend (email), Supabase or Postgres/Prisma (SQL backends).