How to Build Marketplace with V0

1// Paste this prompt into V0's AI chat:
2// Build a two-sided marketplace. Create a Supabase schema:
3// 1. profiles: id (uuid PK FK to auth.users), role (text CHECK IN 'buyer','seller','both'), display_name (text), avatar_url (text), stripe_account_id (text), onboarding_complete (boolean DEFAULT false)
4// 2. listings: id (uuid PK), seller_id (uuid FK to profiles), title (text), description (text), price_cents (int), category (text), images (text[]), status (text DEFAULT 'active'), created_at (timestamptz)
5// 3. orders: id (uuid PK), listing_id (uuid FK to listings), buyer_id (uuid FK to profiles), seller_id (uuid FK to profiles), amount_cents (int), platform_fee_cents (int), status (text DEFAULT 'pending'), stripe_payment_intent (text), created_at (timestamptz)
6// 4. reviews: id (uuid PK), order_id (uuid FK to orders), reviewer_id (uuid FK to profiles), rating (int CHECK 1-5), comment (text), created_at (timestamptz)
7// 5. messages: id (uuid PK), order_id (uuid FK to orders), sender_id (uuid FK to profiles), body (text), created_at (timestamptz)
8// Add RLS policies: buyers see their orders, sellers see their listings and orders.

1// Paste this prompt into V0's AI chat:
2// Create marketplace pages:
3// 1. app/page.tsx — listing feed with shadcn/ui Card grid: listing image, title, price, seller Avatar + name, category Badge. Add Tabs for categories, search Input, and sort Select (newest, price low-high, price high-low).
4// 2. app/listings/[id]/page.tsx — listing detail: image gallery, full description, price in large text, seller Card with Avatar + rating stars + listing count. Add 'Buy Now' Button that creates a Stripe Checkout session. Add 'Message Seller' Button. Show reviews from completed orders below.
5// Use Server Components for both pages. The 'Buy Now' button calls a Server Action.

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const { user_id, email } = await req.json()
13
14  const account = await stripe.accounts.create({
15    type: 'express',
16    email,
17    metadata: { user_id },
18  })
19
20  await supabase
21    .from('profiles')
22    .update({ stripe_account_id: account.id })
23    .eq('id', user_id)
24
25  const accountLink = await stripe.accountLinks.create({
26    account: account.id,
27    refresh_url: `${process.env.NEXT_PUBLIC_APP_URL}/seller/onboarding?refresh=true`,
28    return_url: `${process.env.NEXT_PUBLIC_APP_URL}/seller/dashboard`,
29    type: 'account_onboarding',
30  })
31
32  return NextResponse.json({ url: accountLink.url })
33}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const { listing_id, buyer_id } = await req.json()
13
14  const { data: listing } = await supabase
15    .from('listings')
16    .select('*, seller:profiles!seller_id(stripe_account_id)')
17    .eq('id', listing_id)
18    .single()
19
20  if (!listing?.seller?.stripe_account_id) {
21    return NextResponse.json({ error: 'Seller not onboarded' }, { status: 400 })
22  }
23
24  const platformFee = Math.round(listing.price_cents * 0.1)
25
26  const session = await stripe.checkout.sessions.create({
27    mode: 'payment',
28    line_items: [{
29      price_data: {
30        currency: 'usd',
31        product_data: { name: listing.title },
32        unit_amount: listing.price_cents,
33      },
34      quantity: 1,
35    }],
36    payment_intent_data: {
37      application_fee_amount: platformFee,
38      transfer_data: { destination: listing.seller.stripe_account_id },
39    },
40    metadata: { listing_id, buyer_id, seller_id: listing.seller_id },
41    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/orders?success=true`,
42    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/listings/${listing_id}`,
43  })
44
45  return NextResponse.json({ url: session.url })
46}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const rawBody = await req.text()
13  const sig = req.headers.get('stripe-signature')!
14
15  let event: Stripe.Event
16  try {
17    event = stripe.webhooks.constructEvent(rawBody, sig, process.env.STRIPE_WEBHOOK_SECRET!)
18  } catch {
19    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
20  }
21
22  switch (event.type) {
23    case 'checkout.session.completed': {
24      const session = event.data.object as Stripe.Checkout.Session
25      const { listing_id, buyer_id, seller_id } = session.metadata || {}
26      if (listing_id && buyer_id) {
27        const fee = Math.round((session.amount_total || 0) * 0.1)
28        await supabase.from('orders').insert({
29          listing_id, buyer_id, seller_id,
30          amount_cents: session.amount_total,
31          platform_fee_cents: fee,
32          status: 'paid',
33          stripe_payment_intent: session.payment_intent,
34        })
35      }
36      break
37    }
38    case 'account.updated': {
39      const account = event.data.object as Stripe.Account
40      if (account.charges_enabled) {
41        await supabase.from('profiles')
42          .update({ onboarding_complete: true })
43          .eq('stripe_account_id', account.id)
44      }
45      break
46    }
47  }
48
49  return NextResponse.json({ received: true })
50}

1// Paste this prompt into V0's AI chat:
2// Create a seller dashboard at app/seller/dashboard/page.tsx.
3// Requirements:
4// - Summary Cards: Total Earnings, Active Listings, Pending Orders, Average Rating
5// - Tabs: Listings, Orders, Earnings
6// - Listings tab: Table with title, price, status Badge, views count, edit/delete actions. Add 'New Listing' Button with Dialog form.
7// - Orders tab: Table with order ID, buyer name, listing title, amount, status Badge (pending/paid/shipped/completed), date. Status Select to update order status.
8// - Earnings tab: summary of total paid, platform fees, net earnings. Table of completed orders.
9// - If seller not onboarded with Stripe Connect, show an onboarding Card with 'Complete Setup' Button.
10// Use Server Components with Supabase queries filtered by seller_id = current user.