How to Build Real estate listing with V0

1// Paste this prompt into V0's AI chat:
2// Build a real estate listing app. Create a Supabase schema with PostGIS enabled:
3// 1. listings: id (uuid PK), agent_id (uuid FK), title (text), description (text), address (text), city (text), state (text), zip (text), latitude (numeric), longitude (numeric), price (integer), bedrooms (integer), bathrooms (numeric), sqft (integer), property_type (text check house/condo/townhouse/land), status (text check active/pending/sold), features (text[]), created_at (timestamptz), updated_at (timestamptz)
4// 2. listing_images: id (uuid PK), listing_id (uuid FK), image_url (text), position (integer), created_at (timestamptz)
5// 3. saved_listings: id (uuid PK), user_id (uuid FK), listing_id (uuid FK), created_at (timestamptz) with unique constraint on (user_id, listing_id)
6// 4. inquiries: id (uuid PK), listing_id (uuid FK), user_id (uuid FK nullable), name (text), email (text), message (text), created_at (timestamptz)
7// Enable PostGIS extension. Create a spatial index on listings (latitude, longitude).
8// RLS: anyone can SELECT active listings, only agents can INSERT/UPDATE their own.
9// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a real estate search page at app/page.tsx.
3// Requirements:
4// - Two-column layout: filter sidebar (left, 280px) and listing grid (right)
5// - Filter sidebar with:
6//   - Input for location/city search
7//   - Slider for price range (min/max)
8//   - Select for bedrooms (Any, 1+, 2+, 3+, 4+)
9//   - Select for bathrooms (Any, 1+, 2+, 3+)
10//   - Select for property type (All, House, Condo, Townhouse, Land)
11//   - Badge chips showing active filters with X to remove
12//   - On mobile: filters collapse into a Sheet triggered by a filter Button
13// - Listing grid: shadcn/ui Card for each listing showing:
14//   - Image (first listing_image), Skeleton while loading
15//   - Price formatted as currency, bedrooms/bathrooms/sqft
16//   - Badge for status (active=green, pending=yellow, sold=red)
17//   - Heart icon Button for save/unsave
18//   - Card is clickable → navigates to /listings/[id]
19// - Filters update URL searchParams for shareable filtered URLs
20// - Server Components for initial data, 'use client' for filter interactions
21// - Use Supabase .textSearch() for location search

1// Paste this prompt into V0's AI chat:
2// Build a listing detail page at app/listings/[id]/page.tsx.
3// Requirements:
4// - Fetch listing with images and agent info from Supabase
5// - Top section: shadcn/ui Carousel for image gallery with thumbnails below
6// - Use Skeleton for image loading states
7// - Detail section with two columns:
8//   - Left: price (large), address, bedrooms/bathrooms/sqft row, description paragraph
9//   - Right: Agent Card with Avatar and name, inquiry form with Input for name/email, Textarea for message, Button to submit
10// - Features section: list of features as Badge components in a flex wrap
11// - Status Badge at top (active/pending/sold)
12// - Heart Button to save/unsave listing (Server Action toggleFavorite)
13// - Server Action submitInquiry() for the contact form
14// - Use Server Components for SEO-optimized data fetching
15// - Generate proper metadata for the listing title and description

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 lat = parseFloat(searchParams.get('lat') ?? '0')
12  const lng = parseFloat(searchParams.get('lng') ?? '0')
13  const radiusMiles = parseFloat(searchParams.get('radius') ?? '10')
14  const radiusMeters = radiusMiles * 1609.34
15  const minPrice = parseInt(searchParams.get('min_price') ?? '0')
16  const maxPrice = parseInt(searchParams.get('max_price') ?? '999999999')
17  const bedrooms = parseInt(searchParams.get('bedrooms') ?? '0')
18
19  const { data, error } = await supabase.rpc('search_listings_nearby', {
20    search_lat: lat,
21    search_lng: lng,
22    radius_meters: radiusMeters,
23    min_price: minPrice,
24    max_price: maxPrice,
25    min_bedrooms: bedrooms,
26  })
27
28  if (error) {
29    return NextResponse.json({ error: error.message }, { status: 500 })
30  }
31
32  return NextResponse.json({ listings: data })
33}

1// Paste this prompt into V0's AI chat:
2// Build a listing creation page at app/listings/new/page.tsx.
3// Requirements:
4// - Protected by auth (only agents can access)
5// - Form sections using shadcn/ui Card:
6//   - Basic Info: Input for title, Textarea for description, Select for property_type
7//   - Location: Input for address, city, state, zip (auto-geocode to lat/lng)
8//   - Details: Input for price, bedrooms, bathrooms, sqft
9//   - Features: ToggleGroup for common features (pool, garage, fireplace, etc) plus custom Input
10//   - Images: drag-and-drop upload zone for multiple images, preview thumbnails, reorder by dragging
11// - Images upload to Supabase Storage public bucket 'listing-images'
12// - On submit: Server Action creates listing, uploads images, creates listing_images records
13// - Show Progress during upload
14// - After creation, redirect to the new listing page
15// - 'use client' for the interactive form with file uploads