Build a Marketplace

Scaffold the Next.js app with Clerk

Create a Next.js project and integrate Clerk for authentication.

1. Create a new Next.js project: npx create-next-app@latest marketplace --typescript --tailwind --app
2. Install Clerk: npm install @clerk/nextjs
3. Create a Clerk application at clerk.com and get your API keys
4. Add Clerk keys to .env.local
5. Wrap your app with in the root layout
6. Add Clerk middleware to protect routes

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

npx create-next-app@latest marketplace --typescript --tailwind --app
cd marketplace
npm install @clerk/nextjs

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Set up the Supabase database schema

Create the database tables for listings, orders, and seller profiles.

1. Create a Supabase project and install @supabase/supabase-js
2. Create a sellers table (user_id, stripe_account_id, store_name, approved)
3. Create a listings table (seller_id, title, description, price, images, status)
4. Create an orders table (buyer_id, listing_id, amount, stripe_payment_id, status)
5. Enable Row Level Security on all tables
6. Write RLS policies: sellers can CRUD their own listings, buyers can read all active listings

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

CREATE TABLE sellers (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id TEXT UNIQUE NOT NULL,
  stripe_account_id TEXT,
  store_name TEXT NOT NULL,
  approved BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT now()
);

CREATE TABLE listings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  seller_id UUID REFERENCES sellers(id),
  title TEXT NOT NULL,
  description TEXT,
  price INTEGER NOT NULL,
  images TEXT[],
  status TEXT DEFAULT 'active',
  created_at TIMESTAMPTZ DEFAULT now()
);

CREATE TABLE orders (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  buyer_id TEXT NOT NULL,
  listing_id UUID REFERENCES listings(id),
  amount INTEGER NOT NULL,
  stripe_payment_id TEXT,
  status TEXT DEFAULT 'pending',
  created_at TIMESTAMPTZ DEFAULT now()
);

Set up Stripe Connect for split payments

Enable Stripe Connect so sellers can receive payments with your platform taking a fee.

1. Enable Connect in your Stripe Dashboard under Connect → Settings
2. Choose "Express" onboarding (Stripe handles seller KYC)
3. Install Stripe: npm install stripe
4. Create an API route to generate seller onboarding links
5. Create a webhook handler for account.updated events to track seller verification
6. Set your platform fee percentage (e.g. 10%)

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

import Stripe from 'stripe'
import { NextResponse } from 'next/server'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(req: Request) {
  const { sellerId } = await req.json()
  const account = await stripe.accounts.create({ type: 'express' })
  const link = await stripe.accountLinks.create({
    account: account.id,
    refresh_url: `${process.env.NEXT_PUBLIC_URL}/seller/onboard`,
    return_url: `${process.env.NEXT_PUBLIC_URL}/seller/dashboard`,
    type: 'account_onboarding'
  })
  // Save account.id to the seller's record in Supabase
  return NextResponse.json({ url: link.url })
}

Build the marketplace checkout

Create a checkout flow that splits payments between your platform and the seller.

1. Create a checkout API route that creates a Stripe Checkout Session with payment_intent_data.transfer_data
2. Set the application_fee_amount to your platform fee (e.g. 10% of the listing price)
3. Set transfer_data.destination to the seller's Stripe Connect account ID
4. Build a product detail page with a "Buy Now" button that calls your checkout API
5. Create success and cancel pages for post-checkout redirects

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

const session = await stripe.checkout.sessions.create({
  mode: 'payment',
  line_items: [{
    price_data: {
      currency: 'usd',
      product_data: { name: listing.title },
      unit_amount: listing.price
    },
    quantity: 1
  }],
  payment_intent_data: {
    application_fee_amount: Math.round(listing.price * 0.10),
    transfer_data: { destination: seller.stripe_account_id }
  },
  success_url: `${process.env.NEXT_PUBLIC_URL}/orders/{CHECKOUT_SESSION_ID}`,
  cancel_url: `${process.env.NEXT_PUBLIC_URL}/listings/${listing.id}`
})

Deploy to Vercel

Deploy your marketplace with all environment variables configured.

1. Push to GitHub and import into Vercel
2. Add all environment variables (Clerk, Supabase, Stripe keys)
3. Configure your Stripe webhook endpoint for production
4. Test a full buyer flow: browse → buy → seller gets paid
5. Test a full seller flow: onboard → list product → receive payment