How to Build Event registration system with V0

1// Paste this prompt into V0's AI chat:
2// Build an event registration system. Create a Supabase schema with:
3// 1. events: id (uuid PK), title (text), description (text), venue (text), start_date (timestamptz), end_date (timestamptz), banner_image_url (text), organizer_id (uuid FK to auth.users), status (text default 'draft'), max_capacity (int), created_at (timestamptz)
4// 2. ticket_tiers: id (uuid PK), event_id (uuid FK to events), name (text), price_cents (int), quantity (int), sold_count (int default 0), description (text)
5// 3. registrations: id (uuid PK), event_id (uuid FK to events), ticket_tier_id (uuid FK to ticket_tiers), user_id (uuid FK to auth.users), attendee_name (text), attendee_email (text), qr_code (text unique), checked_in (boolean default false), checked_in_at (timestamptz), stripe_payment_intent_id (text), created_at (timestamptz)
6// 4. waitlist: id (uuid PK), event_id (uuid FK to events), email (text), created_at (timestamptz)
7// Create a PostgreSQL function reserve_ticket(tier_id uuid) that does: UPDATE ticket_tiers SET sold_count = sold_count + 1 WHERE id = tier_id AND sold_count < quantity RETURNING id
8// Add RLS: anyone can read events, authenticated users can register.

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3import { Badge } from '@/components/ui/badge'
4import { Progress } from '@/components/ui/progress'
5import Link from 'next/link'
6
7export default async function EventsPage() {
8  const supabase = await createClient()
9
10  const { data: events } = await supabase
11    .from('events')
12    .select('*, ticket_tiers(id, name, price_cents, quantity, sold_count)')
13    .eq('status', 'published')
14    .gte('end_date', new Date().toISOString())
15    .order('start_date')
16
17  return (
18    <div className="container mx-auto py-8">
19      <h1 className="text-4xl font-bold mb-8">Upcoming Events</h1>
20      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
21        {events?.map((event) => {
22          const totalCapacity = event.ticket_tiers.reduce((s: number, t: any) => s + t.quantity, 0)
23          const totalSold = event.ticket_tiers.reduce((s: number, t: any) => s + t.sold_count, 0)
24          const lowestPrice = Math.min(...event.ticket_tiers.map((t: any) => t.price_cents))
25
26          return (
27            <Link key={event.id} href={`/events/${event.id}`}>
28              <Card className="overflow-hidden hover:shadow-md transition-shadow">
29                {event.banner_image_url && (
30                  <img src={event.banner_image_url} alt={event.title} className="w-full h-48 object-cover" />
31                )}
32                <CardHeader>
33                  <CardTitle>{event.title}</CardTitle>
34                  <p className="text-sm text-muted-foreground">
35                    {new Date(event.start_date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
36                  </p>
37                </CardHeader>
38                <CardContent>
39                  <div className="flex items-center justify-between">
40                    <Badge variant="secondary">From ${(lowestPrice / 100).toFixed(2)}</Badge>
41                    <span className="text-sm text-muted-foreground">{totalSold}/{totalCapacity} registered</span>
42                  </div>
43                  <Progress value={(totalSold / totalCapacity) * 100} className="mt-2" />
44                </CardContent>
45              </Card>
46            </Link>
47          )
48        })}
49      </div>
50    </div>
51  )
52}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4import { randomBytes } from 'crypto'
5
6const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
7const supabase = createClient(
8  process.env.SUPABASE_URL!,
9  process.env.SUPABASE_SERVICE_ROLE_KEY!
10)
11
12export async function POST(req: NextRequest) {
13  const { eventId, tierId, attendeeName, attendeeEmail } = await req.json()
14
15  const { data: reserved } = await supabase.rpc('reserve_ticket', {
16    tier_id: tierId,
17  })
18
19  if (!reserved) {
20    return NextResponse.json({ error: 'Tickets sold out' }, { status: 409 })
21  }
22
23  const { data: tier } = await supabase
24    .from('ticket_tiers')
25    .select('name, price_cents, event_id')
26    .eq('id', tierId)
27    .single()
28
29  const qrCode = randomBytes(16).toString('hex')
30
31  const session = await stripe.checkout.sessions.create({
32    payment_method_types: ['card'],
33    customer_email: attendeeEmail,
34    mode: 'payment',
35    line_items: [{
36      price_data: {
37        currency: 'usd',
38        unit_amount: tier!.price_cents,
39        product_data: { name: `${tier!.name} ticket` },
40      },
41      quantity: 1,
42    }],
43    metadata: { eventId, tierId, attendeeName, attendeeEmail, qrCode },
44    success_url: `${req.nextUrl.origin}/registration/${qrCode}`,
45    cancel_url: `${req.nextUrl.origin}/events/${eventId}`,
46  })
47
48  return NextResponse.json({ url: session.url })
49}

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, sig, process.env.STRIPE_WEBHOOK_SECRET!
19    )
20  } catch {
21    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
22  }
23
24  if (event.type === 'checkout.session.completed') {
25    const session = event.data.object as Stripe.Checkout.Session
26    const { eventId, tierId, attendeeName, attendeeEmail, qrCode } = session.metadata ?? {}
27
28    await supabase.from('registrations').insert({
29      event_id: eventId,
30      ticket_tier_id: tierId,
31      attendee_name: attendeeName,
32      attendee_email: attendeeEmail,
33      qr_code: qrCode,
34      stripe_payment_intent_id: session.payment_intent as string,
35    })
36  }
37
38  return NextResponse.json({ received: true })
39}

1// Paste this prompt into V0's AI chat:
2// Build an organizer dashboard at app/events/[id]/manage/page.tsx.
3// Requirements:
4// - Server Component that fetches event with all registrations and ticket tier stats
5// - Show event summary Card: title, date, total registrations, total revenue, check-in rate
6// - Attendee Table with columns: name, email, ticket tier Badge, registration date, checked-in status Badge (green checkmark or gray pending)
7// - A "Check In" Button on each row that calls a Server Action to mark checked_in = true and set checked_in_at
8// - A "Scan QR" Button that opens a Dialog with the browser camera (using getUserMedia API) to scan QR codes
9// - The scan route at app/api/checkin/route.ts validates the qr_code, marks the registration as checked in, and returns attendee name
10// - Show ticket tier breakdown: Card for each tier with name, sold/total count, revenue, and Progress bar
11// - Add a "Download CSV" Button that exports the attendee list
12// - Use Tabs to switch between Attendees, Analytics, and Settings views