How to Build Directory service with V0

1// Paste this prompt into V0's AI chat:
2// Build a directory service. Create a Supabase schema with these tables:
3// 1. categories: id (uuid PK default gen_random_uuid()), name (text), slug (text unique), icon (text)
4// 2. listings: id (uuid PK), category_id (uuid FK to categories), title (text), slug (text unique), description (text), website_url (text), logo_url (text), location (text), tags (text[]), featured (boolean default false), status (text default 'pending'), submitted_by (uuid FK to auth.users), created_at (timestamptz default now())
5// 3. reviews: id (uuid PK), listing_id (uuid FK to listings), user_id (uuid FK to auth.users), rating (int check between 1 and 5), comment (text), created_at (timestamptz default now())
6// Add a generated tsvector column on listings for full-text search across title, description, and tags.
7// Add RLS policies so anyone can read approved listings, but only authenticated users can submit.

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3import { Badge } from '@/components/ui/badge'
4import { Input } from '@/components/ui/input'
5import Link from 'next/link'
6
7export default async function HomePage() {
8  const supabase = await createClient()
9
10  const { data: categories } = await supabase
11    .from('categories')
12    .select('*')
13    .order('name')
14
15  const { data: featured } = await supabase
16    .from('listings')
17    .select('*, categories(name, slug)')
18    .eq('status', 'approved')
19    .eq('featured', true)
20    .limit(6)
21
22  return (
23    <div className="container mx-auto py-8">
24      <h1 className="text-4xl font-bold mb-4">Find the best tools and services</h1>
25      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
26        {categories?.map((cat) => (
27          <Link key={cat.id} href={`/category/${cat.slug}`}>
28            <Card className="hover:border-primary transition-colors">
29              <CardContent className="p-4 text-center">
30                <span className="text-2xl">{cat.icon}</span>
31                <p className="mt-2 font-medium">{cat.name}</p>
32              </CardContent>
33            </Card>
34          </Link>
35        ))}
36      </div>
37      <h2 className="text-2xl font-semibold mb-4">Featured listings</h2>
38      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
39        {featured?.map((listing) => (
40          <Link key={listing.id} href={`/listing/${listing.slug}`}>
41            <Card>
42              <CardHeader>
43                <CardTitle>{listing.title}</CardTitle>
44              </CardHeader>
45              <CardContent>
46                <p className="text-muted-foreground line-clamp-2">{listing.description}</p>
47                <div className="flex gap-2 mt-3">
48                  {listing.tags?.map((tag: string) => (
49                    <Badge key={tag} variant="secondary">{tag}</Badge>
50                  ))}
51                </div>
52              </CardContent>
53            </Card>
54          </Link>
55        ))}
56      </div>
57    </div>
58  )
59}

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3import { Badge } from '@/components/ui/badge'
4import { Input } from '@/components/ui/input'
5import Link from 'next/link'
6
7export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
8  const { slug } = await params
9  return {
10    title: `${slug.replace(/-/g, ' ')} Directory | Find Top Providers`,
11    description: `Browse and compare the best ${slug.replace(/-/g, ' ')} options. Searchable directory with ratings and reviews.`,
12  }
13}
14
15export default async function CategoryPage({
16  params,
17  searchParams,
18}: {
19  params: Promise<{ slug: string }>
20  searchParams: Promise<{ q?: string }>
21}) {
22  const { slug } = await params
23  const { q } = await searchParams
24  const supabase = await createClient()
25
26  let query = supabase
27    .from('listings')
28    .select('*, categories!inner(name, slug)')
29    .eq('categories.slug', slug)
30    .eq('status', 'approved')
31
32  if (q) {
33    query = query.textSearch('search_vector', q, { type: 'websearch' })
34  }
35
36  const { data: listings } = await query.order('featured', { ascending: false })
37
38  return (
39    <div className="container mx-auto py-8">
40      <h1 className="text-3xl font-bold mb-6 capitalize">{slug.replace(/-/g, ' ')}</h1>
41      <form className="mb-6">
42        <Input name="q" placeholder="Search listings..." defaultValue={q} className="max-w-md" />
43      </form>
44      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
45        {listings?.map((listing) => (
46          <Link key={listing.id} href={`/listing/${listing.slug}`}>
47            <Card>
48              <CardHeader>
49                <CardTitle className="flex items-center gap-2">
50                  {listing.title}
51                  {listing.featured && <Badge>Featured</Badge>}
52                </CardTitle>
53              </CardHeader>
54              <CardContent>
55                <p className="text-muted-foreground line-clamp-2">{listing.description}</p>
56              </CardContent>
57            </Card>
58          </Link>
59        ))}
60      </div>
61    </div>
62  )
63}

1// Paste this prompt into V0's AI chat:
2// Build a listing detail page at app/listing/[slug]/page.tsx.
3// Requirements:
4// - Server Component that fetches the listing by slug with its reviews and average rating
5// - Use generateMetadata to set title and description from the listing data
6// - Display: listing title as h1, description, website link (Button with external link), location with map pin icon, tags as Badge components
7// - Show average rating with filled/empty stars and total review count
8// - List all reviews in Card components with Avatar, star rating, comment text, and date
9// - Add a 'use client' ReviewForm component below with RadioGroup for star rating (1-5), Textarea for comment, and Button to submit
10// - The form submits via a Server Action that validates with Zod (rating 1-5 required, comment 10+ chars) and inserts into the reviews table
11// - Show a "Submit a listing" link to /submit in the sidebar

1// Paste this prompt into V0's AI chat:
2// Build two pages:
3// 1. app/submit/page.tsx — a 'use client' listing submission form with:
4//    - Input for title, website URL, location
5//    - Textarea for description
6//    - Select dropdown for category (fetched from categories table)
7//    - Input for comma-separated tags
8//    - Button to submit via Server Action with Zod validation (title required, valid URL, description 20+ chars)
9//    - Show success message after submission: "Your listing is pending review"
10// 2. app/admin/page.tsx — admin panel showing pending listings in a shadcn/ui Table with:
11//    - Columns: title, category, submitted date, actions
12//    - Two Button actions per row: Approve (green) and Reject (red) using Server Actions
13//    - Approve sets status to 'approved', Reject sets to 'rejected'
14//    - Badge for status column
15//    - Protect with a simple auth check (require authenticated user with admin role)