How to Build a Auction Platform with Lovable

1Create an auction platform app with Supabase. Set up these tables:
2
3- auctions: id, seller_id (references auth.users), title, description, start_price (numeric), reserve_price (numeric nullable), current_price (numeric), buy_now_price (numeric nullable), image_urls (text[]), category (text), status (draft|active|ended|cancelled), starts_at (timestamptz), ends_at (timestamptz), created_at
4- bids: id, auction_id (references auctions), bidder_id (references auth.users), amount (numeric), is_winning (bool default false), created_at
5- auction_winners: id, auction_id (unique, references auctions), winner_id (references auth.users), winning_bid_id (references bids), final_price (numeric), status (pending_payment|paid|cancelled), created_at
6- watchlists: id, user_id (references auth.users), auction_id (references auctions), created_at — unique(user_id, auction_id)
7
8RLS:
9- auctions: anyone can read active auctions; sellers can CRUD their own auctions
10- bids: anyone can read bids; authenticated users can insert bids on active auctions
11- auction_winners: readable by winner and seller only
12- watchlists: users manage their own watchlist rows
13
14Create a PostgreSQL trigger function validate_bid() that runs BEFORE INSERT on bids:
15- Fetch the auction where id = NEW.auction_id
16- If auction.status != 'active', raise exception 'Auction is not active'
17- If NOW() > auction.ends_at, raise exception 'Auction has ended'
18- If NEW.amount <= auction.current_price, raise exception 'Bid must be higher than current price of ' || auction.current_price
19- Update auctions SET current_price = NEW.amount WHERE id = NEW.auction_id
20- If (auction.ends_at - NOW()) < INTERVAL '2 minutes', update auctions SET ends_at = NOW() + INTERVAL '2 minutes' WHERE id = NEW.auction_id (sniping protection)
21- Set NEW.is_winning = true
22- Update bids SET is_winning = false WHERE auction_id = NEW.auction_id AND id != NEW.id
23- Return NEW
24
25Attach trigger: CREATE TRIGGER bid_validation BEFORE INSERT ON bids FOR EACH ROW EXECUTE FUNCTION validate_bid();

1import { useEffect, useState } from 'react'
2import { supabase } from '@/integrations/supabase/client'
3import { Badge } from '@/components/ui/badge'
4import { Separator } from '@/components/ui/separator'
5import { ScrollArea } from '@/components/ui/scroll-area'
6import { AuctionCountdown } from '@/components/auction/AuctionCountdown'
7import { BidForm } from '@/components/auction/BidForm'
8
9type Bid = { id: string; amount: number; bidder_id: string; created_at: string; is_winning: boolean }
10type Auction = { id: string; title: string; current_price: number; ends_at: string; status: string; start_price: number }
11
12export function AuctionDetail({ auctionId }: { auctionId: string }) {
13  const [auction, setAuction] = useState<Auction | null>(null)
14  const [bids, setBids] = useState<Bid[]>([])
15
16  useEffect(() => {
17    supabase.from('auctions').select('*').eq('id', auctionId).single()
18      .then(({ data }) => setAuction(data))
19    supabase.from('bids').select('*').eq('auction_id', auctionId).order('created_at', { ascending: false }).limit(50)
20      .then(({ data }) => setBids(data ?? []))
21
22    const channel = supabase
23      .channel(`auction-${auctionId}`)
24      .on('postgres_changes', {
25        event: 'INSERT',
26        schema: 'public',
27        table: 'bids',
28        filter: `auction_id=eq.${auctionId}`,
29      }, (payload) => {
30        const newBid = payload.new as Bid
31        setBids((prev) => [newBid, ...prev])
32        setAuction((prev) => prev ? { ...prev, current_price: newBid.amount } : prev)
33      })
34      .on('postgres_changes', {
35        event: 'UPDATE',
36        schema: 'public',
37        table: 'auctions',
38        filter: `id=eq.${auctionId}`,
39      }, (payload) => {
40        setAuction((prev) => prev ? { ...prev, ...payload.new } : prev)
41      })
42      .subscribe()
43
44    return () => { supabase.removeChannel(channel) }
45  }, [auctionId])
46
47  if (!auction) return null
48
49  const fmt = (n: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n)
50
51  return (
52    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
53      <div className="lg:col-span-2 space-y-6">
54        <div>
55          <h1 className="text-2xl font-bold">{auction.title}</h1>
56          <div className="flex items-center gap-3 mt-2">
57            <Badge variant={auction.status === 'active' ? 'default' : 'secondary'}>{auction.status}</Badge>
58            <AuctionCountdown endsAt={auction.ends_at} onEnd={() => setAuction((a) => a ? { ...a, status: 'ended' } : a)} />
59          </div>
60        </div>
61        <div className="bg-muted rounded-xl p-6">
62          <p className="text-sm text-muted-foreground">Current bid</p>
63          <p className="text-4xl font-bold">{fmt(auction.current_price)}</p>
64          <p className="text-sm text-muted-foreground mt-1">{bids.length} bid{bids.length !== 1 ? 's' : ''}</p>
65        </div>
66        {auction.status === 'active' && <BidForm auctionId={auctionId} currentPrice={auction.current_price} />}
67      </div>
68      <div className="space-y-4">
69        <h2 className="font-semibold">Bid History</h2>
70        <Separator />
71        <ScrollArea className="h-[400px]">
72          <div className="space-y-2">
73            {bids.map((bid) => (
74              <div key={bid.id} className="flex justify-between items-center py-2">
75                <div>
76                  <p className="text-sm font-medium">{fmt(bid.amount)}</p>
77                  <p className="text-xs text-muted-foreground">{new Date(bid.created_at).toLocaleTimeString()}</p>
78                </div>
79                {bid.is_winning && <Badge variant="outline" className="text-green-600">Winning</Badge>}
80              </div>
81            ))}
82          </div>
83        </ScrollArea>
84      </div>
85    </div>
86  )
87}

1Build an AuctionCountdown component at src/components/auction/AuctionCountdown.tsx.
2
3Props: endsAt (string ISO timestamp), onEnd (callback called when timer hits zero).
4
5Logic:
6- Use a useEffect with setInterval(fn, 1000) to calculate remaining seconds every second.
7- Remaining = Math.max(0, Math.floor((new Date(endsAt).getTime() - Date.now()) / 1000))
8- Format as HH:MM:SS for >1 hour, MM:SS for <1 hour.
9- When remaining reaches 0, call onEnd() and clear the interval.
10- Clear and restart the interval whenever endsAt prop changes (sniping extension arrives).
11
12Display:
13- remaining > 300 seconds (5 min): muted text, normal weight
14- remaining 60-300 seconds: amber text, semibold, add a Clock icon
15- remaining < 60 seconds: red text, bold, add a pulsing red dot using Tailwind animate-pulse
16- remaining = 0: show 'Auction Ended' Badge
17
18Also show a 'Sniping protection active — time extended' toast notification using shadcn/ui useToast when endsAt changes to a time in the future after it was previously within 2 minutes of ending.

1Build a BidForm component at src/components/auction/BidForm.tsx.
2
3Props: auctionId (string), currentPrice (number).
4
5Logic:
6- Use react-hook-form with zod schema: amount must be a number > currentPrice.
7- Minimum increment: $1 for items under $100, $5 for $100-$999, $10 for $1000+.
8- On submit: insert into bids table { auction_id: auctionId, bidder_id: auth.uid(), amount }.
9- If Supabase returns an error (trigger rejection), parse the error message and show it using shadcn/ui useToast with variant='destructive'.
10- On success: show a success toast 'You are the highest bidder!' and reset the form.
11- Show the minimum bid amount as placeholder text in the Input: 'Min: $X.XX'.
12- Disable the submit Button while submitting and show a loading spinner.
13- If the user is not logged in, show a 'Sign in to bid' Button instead of the form.
14
15UI layout:
16- A single Input for bid amount on the left, a 'Place Bid' Button on the right, in a flex row.
17- Below: muted text showing 'Current bid: $X.XX' and 'Minimum bid: $Y.YY'.

1Create a Supabase Edge Function at supabase/functions/close-auctions/index.ts.
2
3This function runs on a Supabase cron schedule: every minute ('* * * * *').
4
5Logic:
61. Query auctions WHERE status = 'active' AND ends_at < NOW().
72. For each ended auction:
8   a. Find the winning bid: SELECT * FROM bids WHERE auction_id = auction.id AND is_winning = true ORDER BY created_at DESC LIMIT 1.
9   b. If no bids exist OR winning bid amount < reserve_price:
10      - Update auction status to 'ended', set no_winner = true.
11      - Email the seller: 'Your auction for {title} ended with no winner.'
12   c. If winning bid exists and meets reserve:
13      - Insert into auction_winners: { auction_id, winner_id: bid.bidder_id, winning_bid_id: bid.id, final_price: bid.amount, status: 'pending_payment' }.
14      - Update auction status to 'ended'.
15      - Email the winner: 'Congratulations! You won {title} for {final_price}. Complete your payment at [link].'
16      - Email the seller: 'Your auction for {title} sold for {final_price}.'
173. Return { closed: count }
18
19Use Resend for emails. Store RESEND_API_KEY in Cloud tab → Secrets.