How to Build Auction platform with V0

1// Paste this prompt into V0's AI chat:
2// Build a real-time auction platform with Supabase. Create these tables:
3// 1. auctions: id (uuid PK), seller_id (uuid FK to auth.users), title (text), description (text), images (text[]), starting_price (numeric), reserve_price (numeric), current_price (numeric), status (text CHECK in 'draft','active','ended','sold'), starts_at (timestamptz), ends_at (timestamptz), winner_id (uuid FK)
4// 2. bids: id (uuid PK), auction_id (uuid FK), bidder_id (uuid FK to auth.users), amount (numeric), created_at (timestamptz), CONSTRAINT bid_positive CHECK (amount > 0)
5// 3. payments: id (uuid PK), auction_id (uuid FK), buyer_id (uuid FK), stripe_payment_intent_id (text), amount (numeric), status (text), created_at (timestamptz)
6// Add a database trigger: on bids INSERT, update auctions.current_price to the bid amount, and if the bid is within 5 minutes of ends_at, extend ends_at by 2 minutes (anti-sniping).
7// Enable Realtime on the bids table.
8// Add RLS policies.

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 POST(req: NextRequest) {
10  const { auctionId, bidderId, amount } = await req.json()
11
12  const { data, error } = await supabase.rpc('place_bid', {
13    p_auction_id: auctionId,
14    p_bidder_id: bidderId,
15    p_amount: amount,
16    p_min_increment: 1.0,
17  })
18
19  if (error) {
20    const message = error.message.includes('too low')
21      ? 'Your bid is below the current price plus minimum increment'
22      : error.message.includes('not active')
23        ? 'This auction is not currently active'
24        : error.message
25    return NextResponse.json({ error: message }, { status: 400 })
26  }
27
28  return NextResponse.json({ bid: data })
29}
30
31// The RPC function in Supabase SQL editor:
32// CREATE OR REPLACE FUNCTION place_bid(
33//   p_auction_id uuid, p_bidder_id uuid, p_amount numeric, p_min_increment numeric
34// ) RETURNS uuid AS $$
35// DECLARE
36//   v_auction record;
37//   v_bid_id uuid;
38// BEGIN
39//   SELECT * INTO v_auction FROM auctions WHERE id = p_auction_id FOR UPDATE;
40//   IF v_auction.status != 'active' THEN RAISE EXCEPTION 'Auction not active';
41//   END IF;
42//   IF p_amount < v_auction.current_price + p_min_increment THEN
43//     RAISE EXCEPTION 'Bid too low';
44//   END IF;
45//   INSERT INTO bids (auction_id, bidder_id, amount)
46//   VALUES (p_auction_id, p_bidder_id, p_amount) RETURNING id INTO v_bid_id;
47//   UPDATE auctions SET current_price = p_amount WHERE id = p_auction_id;
48//   RETURN v_bid_id;
49// END; $$ LANGUAGE plpgsql;

1// Paste this prompt into V0's AI chat:
2// Build a real-time auction detail page at app/auctions/[id]/page.tsx.
3// Requirements:
4// - Server Component fetches initial auction data and last 20 bids
5// - Client Component wraps the bid feed with Supabase Realtime subscription
6// - Subscribe to INSERT events on the bids table filtered by auction_id
7// - Show current price in large font with animated update on new bids
8// - Countdown timer that updates every second showing time remaining
9// - Timer extends in real-time when anti-sniping trigger fires (subscribe to auction row changes)
10// - Bid history in a ScrollArea showing bidder avatar, amount, and timestamp
11// - Bid input with shadcn/ui Input for amount and Button to submit
12// - AlertDialog for bid confirmation showing the amount before submitting
13// - Skeleton loading states while initial data loads
14// - Badge for auction status (active, ended, sold)
15// - Image carousel for auction images using shadcn/ui Carousel

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 auctionId = session.metadata?.auction_id
29
30    if (auctionId) {
31      await supabase.from('payments').insert({
32        auction_id: auctionId,
33        buyer_id: session.metadata?.buyer_id,
34        stripe_payment_intent_id: session.payment_intent as string,
35        amount: (session.amount_total ?? 0) / 100,
36        status: 'paid',
37      })
38
39      await supabase
40        .from('auctions')
41        .update({ status: 'sold' })
42        .eq('id', auctionId)
43    }
44  }
45
46  return NextResponse.json({ received: true })
47}

1// Paste this prompt into V0's AI chat:
2// Build two pages:
3// 1. Auction listing at app/auctions/page.tsx (Server Component):
4//    - Grid of auction Cards with image, title, current price, time remaining countdown, bid count
5//    - Badge for auction status (active, ending soon for < 1 hour)
6//    - Select for category filter and sort (ending soonest, highest price, newest)
7//    - Skeleton loading states
8//    - Link to detail page
9// 2. Create auction at app/auctions/new/page.tsx ('use client'):
10//    - Form with Input for title, Textarea for description
11//    - Image upload (multiple) to Supabase Storage
12//    - Input for starting_price and reserve_price
13//    - DatePicker for starts_at and ends_at
14//    - Button to submit via Server Action
15//    - Form validation with zod