How to Clone Gumroad

Create a full-stack Gumroad-style creator storefront called Sellbox using Next.js (App Router), TypeScript, Tailwind CSS, Prisma and SQLite (swappable to Postgres). Take-rate model, no subscription. Optimize for getting from signup to a live product link fast.

## What to build
Creators create digital products and share a link.
Buyers pay by card and instantly download the file.
The platform takes a fee (5% + 30c) per sale and pays the rest to the creator.

## Key screens
- Creator dashboard: revenue + sales stats and a product list, with 'New product'
- Create/edit product: name, rich description, cover image, price (+ pay-what-you-want toggle and minimum), file upload
- Public product page: cover, title, description, price, Buy button - clean and trustworthy
- Checkout: email + card; success shows a download button and sends a receipt
- Buyer library: a tokenized link from the receipt to re-download purchases
- Sales table: orders with buyer email, amount, platform fee, creator payout, date
- Payout settings: connect payout account, pending/paid earnings

## Schema (Prisma)
Creator (id, name, email, payoutConnected), Product (id, creatorId, name, description, coverUrl, priceCents, payWhatYouWant, minPriceCents, fileUrl, status), Order (id, productId, buyerEmail, amountCents, platformFeeCents, creatorPayoutCents, downloadToken unique, createdAt)

## Logic that must work
- Fee math lives in one shared util used by both the UI and the order-creation server code
- platformFee = round(amount * 0.05) + 30; creatorPayout = amount - platformFee
- Secure delivery: on successful payment, mint a unique downloadToken
- The download route validates the token (and optional expiry) and redirects to a signed file URL
- Never expose fileUrl directly in HTML or responses
- Pay-what-you-want: accept any amount >= minPriceCents when enabled
- Buyers have no account; they download via the tokenized link in the receipt
- All money stored as integer cents

## Style
Bright and creator-friendly: bold pink primary (#FF90E8), chunky rounded buttons, clean white cards, big readable type.
Public product and checkout pages must look safe and premium so buyers trust handing over a card.
Fully responsive, mobile-first.

Seed with 2 creators and 4 products (ebook, Notion template, sample pack, icon set) plus a few orders. Use Stripe test mode for checkout; if no test keys are set, mock a payment step that always succeeds and still records the order + fee split. Send receipt/download emails via Resend or log them to console as a fallback.

You are building a production-quality Gumroad-style creator storefront. It's the simplest product in this set, so aim for a clean, secure, well-factored build. Work step by step and run 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 file storage
- Stripe Connect (destination charges) for checkout, the platform fee, and creator payouts
- Resend for receipts and download emails; Zod for all input validation

## Core architecture (get this right)
- lib/fees.ts: single source of truth for the fee split. Unit-test it; never recompute fees ad hoc
- platformFee = round(amount*0.05)+30; creatorPayout = amount - platformFee
- Secure file delivery: files live in private storage; buyers never see the storage URL
- On a paid order, mint a single-use-ish download token
- The /d/[token] route verifies the order is paid (and not expired) and returns a short-lived signed URL
- Trust the webhook, not the client: create/confirm the Order on the Stripe webhook (checkout.session.completed)
- The browser redirect is just UX, never the source of truth for a sale
- All amounts are integer cents; format with Intl.NumberFormat

## Data model
creators, products, orders (downloadToken unique, status), payouts. Index products(creatorId), orders(productId), orders(buyerEmail).

## Implementation order
1. Scaffold + auth + creator dashboard shell + product CRUD (with cover + file upload to Supabase storage, files kept private)
2. Public product page (server-rendered, good metadata + og:image from cover) and a clean Buy flow
3. Stripe Connect checkout with application_fee_amount; webhook creates the Order and computes the split via lib/fees.ts
4. Secure delivery: tokenized /d/[token] download route + Resend receipt with the link
5. Pay-what-you-want pricing (minimum enforced server-side) and product variants/tiers
6. Sales table + simple analytics (revenue over time, top products); refunds via Stripe
7. Payouts: Connect onboarding, payout schedule, pending/paid view
8. Optional: license-key generation + a verify endpoint; discount codes

## Quality bar
- The raw file URL is never exposed in HTML, network responses or client JS - verify this explicitly
- Orders are reconciled from Stripe webhooks and are idempotent (handle duplicate webhook deliveries)
- Fee and payout math is covered by unit tests; money is always integer cents
- generateMetadata on product pages; loading/error states; Zod on every mutation

Start with step 1. After each step, tell me exactly what to test in the browser (and which Stripe test card to use) before continuing.

Design the complete UI for a Gumroad-style creator storefront called Sellbox. React + Tailwind, shadcn/ui, lucide-react icons. The vibe is bright, fun and creator-first: a bold pink primary (#FF90E8), chunky rounded buttons, thick black-ish borders on cards (a confident, slightly playful look), clean white backgrounds and big readable type.

## Screens to generate

### 1. Creator dashboard
- Top bar: logo, a 'New product' pink button, avatar menu
- A row of big stat cards: Total revenue, Sales, This month
- Each stat card shows a number and a tiny sparkline
- A products table/list with a row per product
- Each row: cover thumbnail, product name, price, sales count, earnings, and a status badge (Published / Draft)

### 2. Create/edit product
- A two-column form layout
- Left column: name, rich description, a cover-image dropzone, and a file-upload dropzone showing the uploaded filename
- Right column: a live preview card of how the product will look
- Right column also has a pricing block: price input plus a 'Pay what you want' toggle that reveals a minimum-price field
- A sticky footer with Save draft / Publish buttons

### 3. Public product page (the shareable link - make it desirable)
- A centered product card: large cover image, product title, creator name + avatar
- A short description, a big price, and a chunky 'I want this!' buy button
- For pay-what-you-want products, show an editable price field defaulting to the minimum
- Trust touches: a small ratings line, a secure-checkout note, and an accepted-cards row

### 4. Checkout
- A clean, narrow checkout with an order summary (cover thumbnail, title, price)
- An email field and a card field (use a styled placeholder), and a pink 'Pay' button
- A success state showing a 'Download' button and 'We emailed your receipt'

### 5. Sales page
- A table of orders: buyer email, product, amount, your fee (smaller, gray), your payout (bold), date
- A summary header row totaling revenue, fees and payouts for the range
- A date-range filter and a CSV export button

Use realistic placeholder content (products: an ebook 'Ship It', a Notion template, a Lo-fi sample pack, an icon set; prices $9–$49). Make every screen fully responsive - on mobile the create-product preview stacks under the form and the buy button on the product page becomes a sticky bottom bar. Lean into the friendly, bold aesthetic; this should look like a tool makers enjoy using.

Build a creator storefront app called Sellbox, modeled on Gumroad: sell a digital product in minutes, take a fee per sale, no subscription.

## Entities
- Creator: name, email, payoutConnected (boolean)
- Product: creator (user reference), name, description (long text), coverUrl, priceCents (number), payWhatYouWant (boolean), minPriceCents (number), fileUrl, status (draft/published)
- Order: product reference, buyerEmail, amountCents (number), platformFeeCents (number), creatorPayoutCents (number), downloadToken (text, unique), createdAt

## Roles & permissions
- Any signed-in user is a creator and can create products
- Creators see and edit only their own products
- Creators see only the orders placed for their own products
- Buyers do not need an account; they buy and download via an emailed link
- Admin role: view all creators, products and a platform-fee revenue dashboard

## Pages
1. Creator dashboard: total revenue, total sales, a product list (cover, name, price, sales, earnings), 'New product' button
2. Create/edit product: name, description, cover image, price (with a pay-what-you-want toggle and minimum), file upload
3. Public product page (shareable): cover, title, description, price, Buy button
4. Checkout: buyer email + card payment; success shows a download button and emails a receipt
5. Buyer library: a tokenized link from the receipt to re-download purchases
6. Sales page: orders table (buyer email, amount, platform fee, payout, date)
7. Admin dashboard: all products/creators and total platform-fee revenue

## Rules
- Platform fee per sale = 5% of amount + 30 cents; creator payout = amount minus the fee
- Show the fee/payout split clearly on the sales page
- After a successful payment, generate a unique download token
- Deliver the file only via that token - never expose the raw file URL
- If pay-what-you-want is on, the buyer may pay any amount at or above the minimum
- All money is stored in integer cents

## Look & feel
Bright, friendly and creator-first: bold pink (#FF90E8) primary buttons, chunky rounded cards, clean white backgrounds, big readable type. The public product and checkout pages must feel safe and premium so buyers trust the purchase. Mobile responsive throughout.

Seed with 2 creators and 4 products (an ebook, a Notion template, a sample pack, an icon set) plus a few orders so the dashboard, product pages and sales table all have content.