A production-ready, white-label e-commerce boilerplate built on a Turborepo monorepo. Clone it, configure your brand in one file, and deploy. Ships with a full storefront, admin panel, REST API, design system, and Storybook.

Frontend

• Next.js 14 — App Router, TypeScript, server components
• React 19
• Tailwind CSS v4 — CSS-first config, @theme design tokens, CSS variables
• Syne · DM Sans · Space Mono
• React Hook Form + Zod
• TanStack Query v5

Backend

• NestJS — modular REST API
• Prisma 7 — ORM with full relation support
• PostgreSQL
• JWT auth — access token + refresh token flow

Tooling

• Turborepo — monorepo task orchestration
• pnpm — fast, disk-efficient package manager
• ESLint 9 — flat config
• Storybook 8
• Docker Compose — one-command PostgreSQL

react-ecommerce/
├── apps/
│   ├── web/                    # Next.js storefront + admin panel  (port 3500)
│   │   ├── app/
│   │   │   ├── (main)/         # Public routes — /, /products, /cart, /checkout …
│   │   │   ├── (admin)/        # Admin routes — /admin, /admin/products …
│   │   │   ├── (auth)/         # Auth routes — /login, /register
│   │   │   ├── modules/        # Feature modules
│   │   │   │   ├── products/   # Product list, detail, filters, image gallery
│   │   │   │   ├── cart/       # Cart (guest + server)
│   │   │   │   ├── checkout/   # Multi-step checkout flow
│   │   │   │   ├── account/    # Profile + order history
│   │   │   │   ├── admin/      # Admin screens + components
│   │   │   │   ├── layout/     # Header, footer, theme toggle
│   │   │   │   └── static/     # Policy pages
│   │   │   └── providers/      # ThemeProvider, GuestCartProvider
│   │   └── config/
│   │       └── branding.ts     # ← single source of truth for branding
│   ├── server/                 # NestJS REST API  (port 5001)
│   │   └── prisma/
│   │       ├── schema.prisma
│   │       └── seed.ts
│   └── storybook/              # Component docs  (port 6006)
├── packages/
│   ├── design-system/          # @react-shop/design-system
│   ├── sdk/                    # @react-shop/sdk
│   ├── eslint-config-custom/
│   └── tsconfig/
├── scripts/
│   └── setup-client.ts         # Interactive white-label wizard
└── docker-compose.yml

• Node.js 18+
• pnpm 8+ — npm i -g pnpm
• Docker — for the PostgreSQL container

git clone https://github.com/your-username/react-ecommerce.git
cd react-ecommerce
pnpm install

docker compose up -d

The defaults work out of the box with Docker Compose:

cp apps/server/.env.example apps/server/.env

# apps/server/.env
PORT=5001
NODE_ENV=development
SECRET=dev-secret-change-in-production
DATABASE_URL=postgresql://postgres:postgres@localhost:5432/react_ecommerce

pnpm --filter @react-shop/api prisma:migrate   # apply schema
pnpm --filter @react-shop/api prisma:seed      # create admin + sample data

pnpm dev:app

Base URL: http://localhost:5001/api

pnpm setup:client

Prompts for store name, primary color, logo, and support email. Writes config/branding.ts, app/brand.css, and .env.local.

apps/web/config/branding.ts

export const branding: BrandingConfig = {
  store: {
    name: "Acme Store",
    tagline: "Quality goods, fair prices.",
    logoText: "Acme Store",
    logoAbbrev: "AC",
  },
  contact: { email: "hello@acme.com" },
  social: { instagram: "https://instagram.com/acme" },
  features: { darkMode: true, newsletter: true, reviews: true },
  theme: { primaryColor: "#7c3aed", primaryColorDark: "#a78bfa" },
};

apps/web/app/brand.css

:root {
  --color-primary-600: #7c3aed; /* your brand color */
  /* full primary-50 → primary-900 scale */
}
.dark {
  --color-primary-600: #a78bfa;
}

Every bg-primary-*, text-primary-*, and border-primary-* utility resolves through these variables — no component edits needed.

import { SdkProvider, useProducts, useAddToCart } from "@react-shop/sdk";

// Wrap once at the root
<SdkProvider apiConfig={{ baseURL: "http://localhost:5001" }}>
  <App />
</SdkProvider>

// Use anywhere
function ProductCard({ id }: { id: string }) {
  const { data: product } = useProduct(id);
  const { mutate: addToCart } = useAddToCart();

  return (
    <button onClick={() => addToCart({ productId: id, quantity: 1 })}>
      Add to cart — {product?.title}
    </button>
  );
}

Available hooks: useProducts, useProduct, useCategories, useCart, useAddToCart, useUpdateCartItem, useRemoveFromCart, useClearCart, useOrders, useOrder, useCreateOrder, useCancelOrder, useProductReviews, useAllReviews, useCreateReview, useModerateReview, useMe, useLogin, useRegister, useLogout, useAddresses, useCreateAddress, useAllUsers.

# Development
pnpm dev:app          # API (5001) + storefront/admin (3500)
pnpm dev              # Everything including Storybook

# Build & lint
pnpm build            # Build all packages
pnpm lint             # Lint all packages

# Database (run from repo root)
pnpm --filter @react-shop/api prisma:migrate   # Apply migrations
pnpm --filter @react-shop/api prisma:seed      # Seed database
pnpm --filter @react-shop/api prisma:studio    # Prisma Studio GUI
pnpm --filter @react-shop/api prisma:reset     # Reset and re-seed

# Docker
docker compose up -d   # Start PostgreSQL
docker compose down    # Stop PostgreSQL

# White-label
pnpm setup:client      # Interactive brand setup wizard

Dark mode is class-based (.dark on <html>). The header includes a sun/moon toggle that persists to localStorage. A blocking inline script applies the class before first paint — no flash of light theme on dark-preference browsers.

To change the default, edit apps/web/app/providers/ThemeProvider.tsx.

1. Fork the repo and create a feature branch
2. pnpm install + docker compose up -d
3. Run pnpm dev:app and make your changes
4. pnpm lint must pass before submitting a PR
5. Follow conventional commits: feat:, fix:, docs:, chore:

MIT — free to use, modify, and distribute for personal and commercial projects.

Built as a white-label e-commerce boilerplate · MIT License