How to Clone Shopify

Create a full-stack Shopify-style store builder called ShopSprout using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swappable to Postgres). Multi-tenant: many merchants, each with their own storefront.

## What to build
Merchants create a store, add products and manage orders; customers browse a public storefront and check out. Revenue = monthly plan + a small per-order platform fee.

## Key screens
- Marketing home with pricing and a 'Start store' CTA
- Merchant dashboard: sales overview, sidebar to Products / Orders / Customers / Discounts / Settings
- Product editor: title, description, image upload, price, inventory, variants, digital toggle
- Public storefront at /store/[handle]: themed header, product grid, product detail with variant picker and add-to-cart
- Cart + checkout: line items, shipping form, Stripe payment, confirmation
- Orders: table with status, detail with fulfill/refund
- Billing: Starter / Growth / Pro tiers

## Schema (Prisma)
- User (id, name, email, image)
- Store (id, ownerId, handle unique, name, logoUrl, themeColor, currency, plan)
- Product (id, storeId, title, desc, images Json, priceCents, inventory, isDigital, status)
- Variant (id, productId, name, options Json, priceCents, inventory)
- Order (id, storeId, customerEmail, lineItems Json, subtotalCents, totalCents, status, createdAt)
- Discount (id, storeId, code, type, value, active)

## Logic that must work
- Multi-tenant routing: /store/[handle] resolves the right store; merchant admin is scoped to the signed-in owner
- Cart total computed server-side from stored product prices - never trust client prices; apply valid discount codes
- Put the price/fee math in one shared util (lib/pricing.ts) used by both the cart UI and the API so they can't drift
- Successful payment creates an Order and decrements inventory in a transaction; block out-of-stock adds
- Platform fee = 2% of order total, recorded for an admin revenue view; digital products skip shipping
- Store handles are unique and reserved at creation; a taken handle is rejected at onboarding

## Style
Shopify-like admin: #008060 primary, white canvas, left-sidebar dashboard, rounded cards, Inter font, status badges. Storefronts adopt each store's theme color. Fully responsive; checkout is mobile-first.

## Seed & payments
Seed 2 stores with ~8 products each (digital + physical, some variants) and a few orders, plus 2 merchant users. Use Stripe test mode for checkout if keys exist; otherwise mock the payment step with a fake card form that always succeeds and still creates the order.

You are building a production-quality multi-tenant store builder (a focused Shopify clone). Work iteratively: scaffold, build the admin, then the storefront and checkout, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui
- PostgreSQL via Prisma; Supabase for auth (email + Google) and image storage
- Stripe for checkout (Stripe Connect destination charges so the platform can take a fee and pay merchants)
- Zod for all validation; money stored as integer cents everywhere

## Architecture requirements
- Multi-tenancy: a tenant = a store. Resolve the store from the URL handle (storefront) or the authenticated owner (admin). Scope every query by store_id; never leak cross-tenant data
- Route groups: (marketing), (admin) for merchants, (store)/[handle] for public storefronts
- Server actions for all mutations with Zod schemas; recompute cart totals and fees server-side from stored prices
- lib/pricing.ts: single source of truth for line totals, discounts, platform fee, and merchant payout amount; unit-test it
- Inventory decrement and order creation happen in one DB transaction to avoid overselling

## Data model
users, stores(handle unique), products, variants, orders, order_items, discounts, customers. Index products(store_id), orders(store_id, created_at), variants(product_id). Add a uniqueness constraint on stores.handle.

## Implementation order
1. Scaffold + Prisma schema + Supabase auth; create-store onboarding that reserves a handle
2. Product CRUD: editor with image upload (Supabase storage), variants, inventory, digital toggle
3. Storefront: server-rendered /[handle] product grid + product detail with variant selection; themed by store.themeColor
4. Cart + checkout: server-validated cart, Stripe Checkout session with application_fee_amount, webhook creates the Order and decrements inventory transactionally
5. Orders admin: list with status filters, order detail, fulfill and refund actions (Stripe refund)
6. Discounts: code creation, server-side validation and application at checkout
7. Analytics: sales over time, top products, AOV and conversion for the merchant dashboard
8. Admin/platform view: all stores, MRR from plans + summed transaction fees

## Quality bar
- generateMetadata on storefront and product pages (title, description, og:image from first product image); JSON-LD Product schema
- Idempotent Stripe webhook handling; never double-create orders
- Loading.tsx skeletons and error.tsx boundaries on async routes
- Seed script: 2 merchants, 2 stores, ~16 products with variants, 10 orders, 3 discount codes

Start with step 1. After each step, tell me exactly what to verify in the browser before moving on.

Design the complete UI for a Shopify-style store builder called ShopSprout. React + Tailwind, shadcn/ui components, lucide-react icons. Two visual modes: a clean commerce admin (green #008060 primary, white canvas, left sidebar) and a customer-friendly storefront. Inter font, rounded cards, soft shadows.

## Screens to generate

### 1. Merchant dashboard
- Left sidebar nav: Home, Products, Orders, Customers, Discounts, Analytics, Settings - with a store switcher at the top
- Main: stat cards (today's sales, orders, visitors, conversion) with mini sparklines, a sales-over-time area chart, and a recent-orders table with status badges (paid green / fulfilled blue / refunded gray)

### 2. Product editor
- Two-column: left = title, rich description, image dropzone with thumbnail reordering, variants table (option name + price + stock rows, add-variant button); right = status card, pricing, inventory, digital-product toggle, organization (type, tags)

### 3. Orders list + order detail
- List: searchable/filterable table (order #, customer, date, total, payment status, fulfillment status)
- Detail: line items with thumbnails and quantities, customer + shipping panel, a totals summary, and Fulfill / Refund buttons

### 4. Public storefront
- Themed header with store logo and a cart icon with a count badge
- Hero banner, responsive product grid (image, title, price), and a product detail page with an image gallery, variant pills (size/color), quantity stepper and a prominent Add to cart button

### 5. Checkout
- Two-column: left = contact + shipping address form, then a card payment form; right = order summary with line items, discount-code input, subtotal/shipping/total breakdown and a Pay button
- A trust row under the Pay button (secure-checkout lock, accepted-cards icons)

### 6. Store theme settings
- A live-preview panel beside controls for store name, logo upload, theme color swatch and font choice; changes update the preview instantly

## Components to include
- A cart drawer that slides in from the right with line items, quantity steppers and a Checkout button
- Empty states for 'No products yet' and 'No orders yet' with a helpful CTA
- A reusable status badge (paid/fulfilled/refunded, draft/active) used across admin tables

## Responsive behavior
Make every screen fully responsive. On mobile, the admin sidebar collapses to a bottom tab bar, and checkout stacks to a single column with the order summary in a collapsible drawer.

Use realistic placeholder data - product names, prices $9–$249, order numbers like #1042, and customer names.

Build a multi-tenant online store builder app (Shopify model, scoped to a niche) called ShopSprout.

## Entities
- Store: handle (unique), name, logoUrl, themeColor, currency, plan (starter/growth/pro), owner (user reference)
- Product: store reference, title, description, images (image list), priceCents (number), inventory (number), isDigital (boolean), status (draft/active)
- Variant: product reference, name, options (json: size/color), priceCents, inventory
- Order: store reference, customerEmail, lineItems (json), subtotalCents, totalCents, status (paid/fulfilled/refunded), createdAt
- Discount: store reference, code, type (percent/fixed), value (number), active (boolean)

## Roles & permissions
- Merchant: owns one or more stores; can only manage their own stores' products and orders
- Customer: public visitor; can browse storefronts and check out without an account
- Admin: can view all stores and a platform revenue dashboard (subscriptions + transaction fees)

## Pages
1. Marketing home: pitch + pricing + 'Start your store'
2. Merchant dashboard: sales overview, navigation to Products, Orders, Customers, Discounts, Settings
3. Product editor: title, description, images, price, inventory, variants, digital toggle
4. Public storefront (per store by handle): product grid + product detail with variant picker and add-to-cart
5. Cart & checkout: line items, shipping, payment, confirmation
6. Orders: list with status and a detail view with fulfill/refund
7. Admin dashboard: all stores + monthly platform-fee revenue chart

## Rules
- Each store has a unique handle and its own storefront; data is strictly scoped per store
- Cart and order totals computed from stored product prices; valid discount codes reduce the total
- Purchasing decrements inventory; out-of-stock items can't be ordered
- Platform fee = 2% of each order total, recorded for the admin revenue view
- Digital products skip shipping and are delivered immediately on payment

## Look & feel
Commerce admin: white background, green (#008060) primary buttons, left-sidebar dashboard, rounded cards, clean sans-serif. Storefronts use each store's theme color and a lighter, shopper-friendly layout. Mobile responsive throughout, especially checkout.

Seed with 2 sample stores, ~8 products each (mix of digital and physical, some with variants), a couple of discount codes, and a few orders so every page has data.