How to Build Affiliate tracking app with V0

1// Paste this prompt into V0's AI chat:
2// Build an affiliate tracking system with Supabase. Create these tables:
3// 1. affiliates: id (uuid PK), user_id (uuid FK to auth.users), code (text unique), commission_rate (numeric default 0.10), status (text default 'active'), created_at (timestamptz)
4// 2. clicks: id (uuid PK), affiliate_id (uuid FK), ip_address (inet), user_agent (text), referrer_url (text), landing_page (text), created_at (timestamptz)
5// 3. conversions: id (uuid PK), click_id (uuid FK), affiliate_id (uuid FK), order_id (text unique), amount (numeric), commission (numeric), status (text default 'pending'), created_at (timestamptz)
6// 4. payouts: id (uuid PK), affiliate_id (uuid FK), amount (numeric), period_start (date), period_end (date), status (text default 'pending'), paid_at (timestamptz)
7// Add RLS policies so affiliates can only see their own data.
8// Generate the SQL migration.

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function GET(req: NextRequest) {
10  const { searchParams } = new URL(req.url)
11  const refCode = searchParams.get('ref')
12  const landingPage = searchParams.get('url') || '/'
13
14  if (!refCode) {
15    return NextResponse.redirect(new URL(landingPage, req.url))
16  }
17
18  const { data: affiliate } = await supabase
19    .from('affiliates')
20    .select('id')
21    .eq('code', refCode)
22    .eq('status', 'active')
23    .single()
24
25  if (affiliate) {
26    await supabase.from('clicks').insert({
27      affiliate_id: affiliate.id,
28      ip_address: req.headers.get('x-forwarded-for') || 'unknown',
29      user_agent: req.headers.get('user-agent') || '',
30      referrer_url: req.headers.get('referer') || '',
31      landing_page: landingPage,
32    })
33  }
34
35  const response = NextResponse.redirect(new URL(landingPage, req.url))
36  response.cookies.set('affiliate_ref', refCode, {
37    httpOnly: true,
38    secure: true,
39    sameSite: 'lax',
40    maxAge: 30 * 24 * 60 * 60,
41    path: '/',
42  })
43
44  return response
45}

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 body = await req.text()
13  const sig = req.headers.get('stripe-signature')!
14
15  let event: Stripe.Event
16  try {
17    event = stripe.webhooks.constructEvent(
18      body,
19      sig,
20      process.env.STRIPE_WEBHOOK_SECRET!
21    )
22  } catch {
23    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
24  }
25
26  if (event.type === 'checkout.session.completed') {
27    const session = event.data.object as Stripe.Checkout.Session
28    const refCode = session.metadata?.affiliate_ref
29
30    if (refCode) {
31      const { data: affiliate } = await supabase
32        .from('affiliates')
33        .select('id, commission_rate')
34        .eq('code', refCode)
35        .single()
36
37      if (affiliate && session.amount_total) {
38        const amount = session.amount_total / 100
39        await supabase.from('conversions').upsert({
40          affiliate_id: affiliate.id,
41          order_id: session.id,
42          amount,
43          commission: amount * affiliate.commission_rate,
44          status: 'confirmed',
45        }, { onConflict: 'order_id' })
46      }
47    }
48  }
49
50  return NextResponse.json({ received: true })
51}

1// Paste this prompt into V0's AI chat:
2// Build an affiliate dashboard at app/dashboard/page.tsx.
3// Requirements:
4// - Show the affiliate's referral link in a shadcn/ui Input with a copy-to-clipboard Button
5// - Display summary Cards: Total Clicks, Total Conversions, Conversion Rate, Total Earnings, Pending Payout
6// - Add an AreaChart (Recharts) showing clicks and conversions per day for the last 30 days
7// - Show a Table of recent conversions with columns: Date, Order ID, Amount, Commission, Status Badge
8// - Add Tabs to switch between Overview, Conversions, and Payouts views
9// - Payouts tab shows a Table of payout history with status Badge (pending/paid)
10// - Use Server Components for data fetching from Supabase
11// - The referral link format should be: {origin}/api/track?ref={code}

1'use server'
2
3import { createClient } from '@supabase/supabase-js'
4import { auth } from '@clerk/nextjs/server'
5import { revalidatePath } from 'next/cache'
6
7const supabase = createClient(
8  process.env.SUPABASE_URL!,
9  process.env.SUPABASE_SERVICE_ROLE_KEY!
10)
11
12export async function approvePayout(payoutId: string) {
13  const { userId } = await auth()
14  if (!userId) throw new Error('Unauthorized')
15
16  const { error } = await supabase
17    .from('payouts')
18    .update({
19      status: 'paid',
20      paid_at: new Date().toISOString(),
21    })
22    .eq('id', payoutId)
23    .eq('status', 'pending')
24
25  if (error) throw new Error(error.message)
26  revalidatePath('/admin/affiliates')
27}
28
29export async function generatePayout(affiliateId: string, periodStart: string, periodEnd: string) {
30  const { data: conversions } = await supabase
31    .from('conversions')
32    .select('commission')
33    .eq('affiliate_id', affiliateId)
34    .eq('status', 'confirmed')
35    .gte('created_at', periodStart)
36    .lte('created_at', periodEnd)
37
38  const totalCommission = conversions?.reduce((sum, c) => sum + c.commission, 0) ?? 0
39
40  if (totalCommission > 0) {
41    await supabase.from('payouts').insert({
42      affiliate_id: affiliateId,
43      amount: totalCommission,
44      period_start: periodStart,
45      period_end: periodEnd,
46      status: 'pending',
47    })
48  }
49
50  revalidatePath('/admin/affiliates')
51}