A minimalist e-commerce platform built for architectural objects and essential goods. Monochrome aesthetic, precision engineering.
MonoCommerce is a full-stack storefront built with Next.js 15 and Supabase. It features a complete shopping experience — product browsing, cart, checkout, order management, wishlists, and an admin dashboard — wrapped in a strict monochrome design language.
- Storefront — editorial homepage, product catalog with category filtering, product detail pages
- Cart & Checkout — persistent cart drawer, multi-step checkout with promo/gift card support
- User Accounts — registration, login, profile management, order history
- Social Auth — Google and Apple Sign-in via Supabase OAuth
- Wishlist / Favorites — save products across sessions
- Admin Dashboard — product management, order overview, analytics, review moderation
- Support Pages — contact form, returns policy, shipping info, size guide
- Dark / Light Mode — system-aware theme with manual toggle
- AI Integration — Genkit + Google Gemini for intelligent features
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router, Turbopack) |
| Language | TypeScript |
| Styling | Tailwind CSS + shadcn/ui (Radix UI) |
| Backend / Auth | Supabase (Postgres, Auth, Realtime) |
| State | Zustand |
| Forms | React Hook Form + Zod |
| AI | Genkit + @genkit-ai/google-genai |
| Charts | Recharts |
git clone https://github.com/SawSimonLinn/MonoCommerce.git
cd MonoCommerce
npm installcp .env.example .envNEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-anon-public-key
NEXT_PUBLIC_SITE_URL=http://localhost:9002
NEXT_PUBLIC_ADMIN_EMAIL=you@example.comnpm run dev # http://localhost:9002For the full setup — Supabase schema, Google OAuth (Google Cloud Console), Apple Sign-in, first admin user, and catalog seeding — see docs/setup.md.
npm run dev # Dev server on http://localhost:9002 (Turbopack)
npm run build # Production build
npm run start # Start production server
npm run typecheck # TypeScript checks
npm run lint # ESLint
npm run genkit:dev # Genkit AI developer UI
npm run genkit:watch # Genkit with watch modesrc/
├── app/
│ ├── admin/ # Admin dashboard (products, orders, analytics, reviews)
│ ├── api/ # API routes (contact form, etc.)
│ ├── checkout/ # Checkout flow
│ ├── orders/ # Order history & detail
│ ├── products/ # Product catalog & detail pages
│ ├── support/ # Contact, returns, shipping, size guide
│ ├── favorites/ # Wishlist page
│ ├── login/ # Sign-in page + server actions
│ ├── register/ # Registration page + server actions
│ └── profile/ # Account management
├── components/ # Shared UI components
├── hooks/ # Supabase-backed client data hooks
├── lib/ # Store (Zustand), product data, utilities
└── supabase/ # Supabase clients, mapping helpers, types
| Document | Description |
|---|---|
| docs/setup.md | Full setup: Supabase, Google Console, Apple, env vars, first admin |
| docs/blueprint.md | Architecture and feature blueprint |
| supabase/schema.sql | Database schema (run once in Supabase SQL Editor) |
If Supabase is not configured, the app falls back to the built-in static catalog and mock auth flows. You can browse the storefront without a backend — a warning banner appears on the auth pages.
"We believe that color is a distraction. MonoCommerce focuses on form, function, and texture. By removing the noise of the spectrum, we celebrate the purity of design."
Products are organized into five collections: Accessories, Home, Technology, Furniture, and Archives.