A comprehensive, production-ready ecommerce boilerplate built with React, Next.js, NestJS, Prisma, and GraphQL. Designed as a Turborepo monorepo for easy code sharing between web, mobile, and admin applications.
- 🎨 Design System - PandaCSS-based component library with theming
- 🔄 GraphQL API - Type-safe API with React Query hooks
- 🛒 Full Ecommerce - Products, cart, checkout, orders, reviews
- 🔐 Authentication - JWT + OAuth (Google, GitHub)
- 📱 Mobile Ready - Architecture supports React Native
- 🎯 Admin Dashboard - Product, order, and user management
- 🚀 Modern Stack - Next.js 14, NestJS, Prisma, TypeScript
- Node.js 18+
- pnpm 8+
- PostgreSQL 14+
# Clone and install
git clone <repository-url>
cd react-ecommerce
pnpm install
# Setup database
cd apps/server
cp .env.example .env
# Edit .env with your database credentials
# Run migrations
pnpm prisma migrate dev
# Generate types
pnpm prisma generate
cd ../../packages/services
pnpm codegen
# Start development
cd ../..
pnpm devThe backend API will be available at http://localhost:3001/graphql
/apps
/web → Customer-facing Next.js app
/admin → Admin dashboard Next.js app
/server → NestJS GraphQL API
/packages
/design-system → PandaCSS component library
/services → React Query + GraphQL hooks
/eslint-config-custom → Shared ESLint config
/tsconfig → Shared TypeScript config
Frontend:
- Next.js 14 (App Router)
- PandaCSS (Styling)
- React Query (Data fetching)
- GraphQL (API layer)
- TypeScript
Backend:
- NestJS (Framework)
- Prisma (ORM)
- PostgreSQL (Database)
- GraphQL (API)
- JWT + OAuth (Auth)
- Features & Implementation Guide - Comprehensive feature documentation
- API Documentation - GraphQL Playground (when server is running)
- Design System - Component library documentation
# Development
pnpm dev # Start all apps in development mode
pnpm dev:server # Start only the backend
pnpm dev:web # Start only the web app
# Building
pnpm build # Build all apps
pnpm lint # Lint all packages
# Database
pnpm prisma:migrate # Run database migrations
pnpm prisma:studio # Open Prisma Studio
pnpm prisma:generate # Generate Prisma Client
# Code Generation
pnpm codegen # Generate GraphQL types- Token-based theming (light/dark mode)
- Responsive components
- Ecommerce-specific components (ProductCard, PriceDisplay, Rating)
- Zero-runtime CSS with PandaCSS
- Full CRUD for products, categories, orders, reviews
- Cart management with database persistence
- Order tracking and management
- Review system with moderation
- Role-based access control
- OAuth integration (Google, GitHub)
- Type-safe GraphQL hooks
- Automatic type generation
- React Query integration
- Optimistic updates
- Error handling
// packages/design-system/src/components/MyComponent/MyComponent.tsx
import { styled } from '../../../styled-system/jsx';
export const MyComponent = styled('div', {
base: {
padding: '4',
borderRadius: 'md',
},
});# packages/services/src/graphql/custom.graphql
query GetCustomData {
customData {
id
name
}
}Then run pnpm codegen to generate TypeScript types.
// apps/server/prisma/schema.prisma
model NewModel {
id String @id @default(uuid())
name String
}Then run pnpm prisma migrate dev --name add_new_model.
The architecture is designed for React Native integration:
- Create a mobile app
- Install
@react-shop/services - Use the same GraphQL hooks
- Adapt UI components to React Native
docker-compose up -dRequired for production:
DATABASE_URLJWT_SECRET&JWT_REFRESH_SECRETGOOGLE_CLIENT_ID&GOOGLE_CLIENT_SECRETGITHUB_CLIENT_ID&GITHUB_CLIENT_SECRET- SMTP configuration for emails
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
MIT