How to Clone Fiverr

Create a full-stack Fiverr-style freelance services marketplace called GigNest using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swap to Postgres later).

## What to build
A two-sided marketplace where sellers list packaged services and buyers order them with upfront escrow payment. Platform takes a 20% seller commission and a buyer service fee.

## Key screens
- Home with search and popular category tiles
- Category/search results: filterable gig card grid (category, budget, delivery time, seller level)
- Gig detail: gallery, package tabs (Basic/Standard/Premium), seller card, reviews, order button
- Order checkout: package summary, optional extras, fee breakdown, payment
- Order page: status timeline, per-order chat with attachments, deliver/accept/revision actions
- Seller dashboard: my gigs, active orders, earnings + withdraw
- Create-gig wizard: overview → packages → description → gallery → publish
- Buyer dashboard: my orders with review modal after completion
- Auth: email credentials or magic link; one account can buy and sell

## Schema (Prisma)
User (id, name, email, image, bio, sellerLevel, balance), Gig (id, sellerId, title, category, description, gallery Json, packages Json, faq Json, status, rating, reviewCount), Order (id, gigId, buyerId, sellerId, packageTier, price, buyerFee, total, status, requirements Json, deliveryFiles Json), Review (id, orderId, buyerId, sellerId, rating, comment), Message (id, orderId, senderId, body, attachmentUrl, createdAt)

## Logic that must work
- Order status state machine: requirements → in_progress → delivered → completed (or cancelled); enforce valid transitions server-side
- Escrow logic: total computed server-side as package price + buyer fee; seller balance credited (price minus 20%) only when order reaches completed
- Price math in one shared util reused by UI and API: total = packagePrice + buyerFee; payout = packagePrice * 0.8
- Auto-complete an order 3 days after delivery if the buyer doesn't respond
- Limit revisions to the count defined by the package before the order can be force-completed
- Reviews allowed only on completed orders; only the order's buyer and seller can see its message thread
- A gig's rating and reviewCount recompute when a new review is added

## Style
Marketplace look: white canvas, green (#1DBF73) primary, rounded-lg cards, soft shadows, seller-level badges, Inter font, skeleton loaders. Fully responsive - package selector becomes a sticky bottom bar on mobile gig pages.

Seed with 12 gigs across 4 categories, 3 sellers (different levels), 2 buyers, and several completed orders with reviews. Use Stripe test mode with manual capture for escrow if available; otherwise mock payment with a fake card form that always succeeds and simulate escrow with order status.

You are building a production-quality Fiverr clone. Work iteratively: scaffold, then implement feature by feature, 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 file storage
- Stripe Connect (separate charges & transfers, or destination charges with manual capture) for escrow-style marketplace payments - 20% seller commission + buyer fee
- Typesense for gig search; Zod for all input validation; Supabase Realtime for order chat

## Architecture requirements
- The order lifecycle is a server-enforced state machine in lib/orders.ts: requirements → in_progress → delivered → completed | cancelled. Reject invalid transitions; never advance state from the client
- lib/pricing.ts is the single source of truth for total = packagePrice + buyerFee and payout = packagePrice * 0.8; unit-test it and recompute server-side on every order
- Money is held authorized at order time and captured on approval (or auto-approval). Seller balance is credited only on the completed transition; model balances and payouts explicitly
- Server components by default; client islands for search, package selector, gig editor and order chat

## Data model
users, gigs (packages jsonb, gallery jsonb), orders (status enum, requirements jsonb, delivery_files jsonb), reviews, messages, transactions (escrow ledger entries), payouts. Index gigs(category), orders(seller_id, status), reviews(gig_id).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected routes; one account can buy and sell
2. Gig CRUD: multi-step create wizard (react-hook-form + Zod), three package tiers, gallery upload to Supabase storage with compression
3. Discovery: category pages + Typesense search with facets (category, budget, delivery time, seller level), server-rendered results
4. Order flow: select package → requirements form → Stripe Checkout/PaymentIntent with manual capture (application fee = 20%) → webhook creates the order and an escrow ledger entry
5. Order workspace: status timeline, realtime chat with attachments, deliver/accept/request-revision actions enforcing the state machine; capture + credit seller balance on completion
6. Reviews: unlocked by a completed order; rating recomputes the gig's aggregate and feeds search ranking
7. Seller dashboard: orders queue, earnings, withdrawal request creating a payout via Stripe transfers
8. Disputes: cancellation/refund flow with admin mediation and ledger reversal

## Quality bar
- loading.tsx skeletons and error.tsx boundaries on every async route
- SEO: generateMetadata on gig pages (title, description, og:image from cover), JSON-LD Service schema
- Currency stored in cents as integers, formatted with Intl.NumberFormat; the escrow ledger must always balance
- Seed script: 4 sellers (varied levels), 2 buyers, 16 gigs across 5 categories, 20 orders in mixed states, 30 reviews

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

Design the complete UI for a Fiverr-style freelance services marketplace called GigNest. React + Tailwind, shadcn/ui components, lucide-react icons. Clean marketplace aesthetic: white background, vibrant green (#1DBF73) primary, rounded-lg cards, soft shadows, clear badges, Inter font.

## Screens to generate

### 1. Home page
- Sticky header: logo left, search bar center (with a category dropdown + green search button), nav (Explore, Become a Seller), avatar menu right
- Hero: headline, subhead, search field, and a row of trusted-by logos
- Popular categories: tile grid with an icon and label each (Design, Writing, Video, Programming, Marketing, Audio)
- Featured gigs carousel of gig cards

### 2. Category / search results
- Filter bar: category chips, budget popover, delivery-time dropdown, seller-level dropdown, sort control
- Responsive gig card grid (4/3/1): cover image with heart, seller row (avatar + name + level badge), title, star rating · (review count), divider, 'Starting at $X' bold
- A results count line and an empty state when filters match nothing

### 3. Gig detail
- Two-column: left = title, seller row, image gallery with thumbnails, About this gig, FAQ accordion, reviews with an overall rating block and category bars; right = sticky package card with Basic/Standard/Premium tabs, each showing price, delivery time, revision count, a feature checklist, and a 'Continue ($X)' button
- A 'Contact seller' secondary button under the package card

### 4. Order checkout
- Compact layout: package summary on the left, optional gig-extras checkboxes, and a price-breakdown card (package + buyer fee = total) with a payment form and a Pay button

### 5. Order workspace
- Header: order title, seller/buyer, status badge
- Status timeline stepper (Requirements → In progress → Delivered → Completed)
- Chat thread with message bubbles, file-attachment cards, and a composer with an attach button
- Right rail: order summary card (package, price, delivery date) and contextual action buttons (Deliver / Accept / Request revision)

### 6. Seller dashboard
- Sidebar nav (Dashboard, Gigs, Orders, Earnings, Messages)
- Stat cards (active orders, earnings this month with a mini chart, available balance with a Withdraw button)
- Orders table: buyer avatar, gig, package, due date, amount, status badge

### 7. Create-gig wizard
- Stepper header (Overview → Pricing → Description → Gallery → Publish), large friendly inputs, a three-column package editor, photo dropzone, sticky Back/Next footer

Make every screen fully responsive. On mobile: search collapses to a tappable bar, the gig package card becomes a sticky bottom bar (price + Continue), and dashboards switch the sidebar to a bottom tab bar. Use realistic placeholder data - gig titles like 'I will design a modern logo', prices $25–$500, ratings 4.6–5.0, review counts in the hundreds.

Build a freelance services marketplace app (Fiverr model) called GigNest.

## Entities
- Gig: title, category (design/writing/video/programming/marketing/audio), description, gallery (image list), packages (JSON: basic/standard/premium each with price, deliveryDays, revisions, features), faq (JSON), status (draft/published/paused), rating (number), reviewCount (number), seller (user reference)
- Order: gig (reference), buyer (user), seller (user), packageTier (basic/standard/premium), price, buyerFee, total, status (requirements/in_progress/delivered/completed/cancelled), requirements (JSON), deliveryFiles (image/file list)
- Review: order (reference), buyer (user), seller (user), rating (1–5), comment, createdAt
- Message: order (reference), sender (user), body, attachment (file), createdAt

## Roles & permissions
- Any signed-in user can buy; users who publish a gig become sellers
- Sellers can only edit their own gigs and only see orders where they are the seller
- Buyers can only see and message on their own orders
- Admin role: moderate any gig, handle disputes, view a revenue dashboard (sum of platform commission by month)

## Pages
1. Public home: search + popular categories, grid of published gigs (cover, seller, rating, starting price)
2. Gig detail: gallery, package tabs with live price, seller info, reviews, order button
3. Order workspace: status timeline, per-order chat with attachments, deliver/accept/request-revision actions
4. Buyer dashboard: my orders (active/completed), leave review after completion
5. Seller dashboard: my gigs (create/edit/pause), incoming orders, earnings and withdraw
6. Create-gig wizard: overview → packages → description & FAQ → gallery → publish
7. Admin dashboard: all gigs with approve/remove, dispute queue, monthly commission revenue chart

## Rules
- Buyer pays the package price + buyer fee upfront; funds are held until delivery is approved, then the seller is credited the price minus a 20% commission
- Auto-complete an order if the buyer doesn't respond within 3 days of delivery
- Reviews only allowed when an order is completed; one review per order
- New gigs start as draft and require admin approval to be published

## Look & feel
Fiverr-inspired: white background, green (#1DBF73) primary buttons, gig cards with rounded corners and seller-level badges, clean sans-serif typography. Mobile responsive throughout.

Seed with 12 sample gigs across 4 categories, 3 sellers with different levels, 2 buyers, and a few completed orders with reviews so every page has data.