How to Build Classifieds with V0

1// Paste this prompt into V0's AI chat:
2// Build a classifieds site with Supabase. Create these tables:
3// 1. categories: id (uuid PK), name (text), slug (text unique), icon (text), parent_id (uuid FK self-reference)
4// 2. listings: id (uuid PK), seller_id (uuid FK to auth.users), title (text), description (text), price (numeric), category (text), condition (text CHECK in 'new','like_new','good','fair','poor'), images (text[]), location_city (text), location_state (text), status (text CHECK in 'active','sold','expired','flagged'), expires_at (timestamptz), created_at (timestamptz)
5// 3. messages: id (uuid PK), listing_id (uuid FK), sender_id (uuid FK), receiver_id (uuid FK), content (text), is_read (boolean default false), created_at (timestamptz)
6// 4. flags: id (uuid PK), listing_id (uuid FK), reporter_id (uuid FK), reason (text), created_at (timestamptz)
7// Add a full-text search column on listings: search_vector tsvector GENERATED ALWAYS AS (to_tsvector('english', title || ' ' || description)) STORED
8// Add a GIN index on search_vector.
9// Add RLS policies.

1// Paste this prompt into V0's AI chat:
2// Build a classifieds browse page at app/listings/page.tsx.
3// Requirements:
4// - Search Input at top with Search icon that uses full-text search via Supabase to_tsquery
5// - Filter sidebar (collapsible Sheet on mobile) with:
6//   - Select for category
7//   - RadioGroup for condition (new, like new, good, fair, poor)
8//   - Price range with two Input fields (min, max)
9//   - Input for location (city or state)
10// - Responsive Card grid (2 cols mobile, 3 desktop) with:
11//   - Listing image (first from images array) using next/image
12//   - Title, price (formatted as currency), condition Badge, location text
13//   - Relative timestamp (e.g. "2 hours ago")
14// - Sort Select: newest, price low-high, price high-low
15// - Pagination at bottom
16// - Use Server Components for initial data fetch with searchParams for filters
17// - Skeleton loading states

1import { createClient } from '@supabase/supabase-js'
2import { notFound } from 'next/navigation'
3import type { Metadata } from 'next'
4import { ListingDetail } from '@/components/listing-detail'
5
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
12  const { id } = await params
13  const { data: listing } = await supabase.from('listings').select('title, description, price').eq('id', id).single()
14  if (!listing) return {}
15  return {
16    title: `${listing.title} - $${listing.price}`,
17    description: listing.description?.substring(0, 155),
18  }
19}
20
21export default async function ListingPage({ params }: { params: Promise<{ id: string }> }) {
22  const { id } = await params
23  const { data: listing } = await supabase
24    .from('listings')
25    .select('*, profiles:seller_id(full_name, avatar_url)')
26    .eq('id', id)
27    .eq('status', 'active')
28    .single()
29
30  if (!listing) notFound()
31  return <ListingDetail listing={listing} />
32}

1// Paste this prompt into V0's AI chat:
2// Build a listing submission form at app/listings/new/page.tsx ('use client').
3// Requirements:
4// - Input for title
5// - Textarea for description
6// - Input for price with currency formatting
7// - Select for category (fetched from categories table)
8// - RadioGroup for condition: new, like new, good, fair, poor
9// - Image upload area: drag-and-drop multiple images to Supabase Storage 'listings' public bucket
10//   - Show image previews, allow reordering, max 8 images, max 5MB each
11//   - Accept jpg, png, webp
12// - Input for location city and Select for state
13// - Submit Button that calls a Server Action with all fields including image URLs
14// - Form validation with zod: title required, price > 0, at least one image
15// - Use shadcn/ui Card for form container, Input, Textarea, Select, RadioGroup, Button

1'use server'
2
3import { createClient } from '@supabase/supabase-js'
4import { revalidatePath } from 'next/cache'
5
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function sendMessage(listingId: string, senderId: string, receiverId: string, content: string) {
12  const { error } = await supabase.from('messages').insert({
13    listing_id: listingId,
14    sender_id: senderId,
15    receiver_id: receiverId,
16    content,
17  })
18  if (error) throw new Error(error.message)
19  revalidatePath('/messages')
20}
21
22export async function flagListing(listingId: string, reporterId: string, reason: string) {
23  await supabase.from('flags').insert({ listing_id: listingId, reporter_id: reporterId, reason })
24  const { count } = await supabase.from('flags').select('*', { count: 'exact', head: true }).eq('listing_id', listingId)
25  if ((count ?? 0) >= 3) {
26    await supabase.from('listings').update({ status: 'flagged' }).eq('id', listingId)
27  }
28  revalidatePath(`/listings/${listingId}`)
29}
30
31export async function moderateListing(listingId: string, action: 'approve' | 'remove') {
32  const status = action === 'approve' ? 'active' : 'expired'
33  await supabase.from('listings').update({ status }).eq('id', listingId)
34  if (action === 'approve') {
35    await supabase.from('flags').delete().eq('listing_id', listingId)
36  }
37  revalidatePath('/admin')
38}