How to Build a Directory Service with Lovable

1Create a business directory with Supabase. Set up these tables:
2
3- categories: id (uuid pk), name (text unique not null), slug (text unique not null), icon (text, emoji or icon name), listing_count (int default 0), created_at
4- listings: id (uuid pk), name (text not null), slug (text unique), description (text), website (text), phone (text), email (text), address (text), city (text), state (text), country (text default 'US'), category_id (uuid references categories), status (text check in ('pending','active','rejected'), default 'pending'), rejection_reason (text), submitted_by_email (text), average_rating (numeric(3,2) default 0), review_count (int default 0), featured (bool default false), search_vector (tsvector), created_at, updated_at
5- reviews: id (uuid pk), listing_id (uuid references listings on delete cascade), reviewer_name (text not null), reviewer_email (text), rating (int check between 1 and 5, not null), body (text), is_approved (bool default true), created_at
6
7RLS:
8- listings: anon/authenticated SELECT where status='active', anon INSERT (new submissions with status='pending'), authenticated UPDATE/DELETE for admins only
9- categories: anon/authenticated SELECT, authenticated INSERT/UPDATE/DELETE for admins
10- reviews: anon/authenticated SELECT where is_approved=true, anon INSERT, authenticated UPDATE/DELETE for admins
11
12Create a trigger on listings BEFORE INSERT/UPDATE to update search_vector:
13NEW.search_vector := to_tsvector('english', coalesce(NEW.name,'') || ' ' || coalesce(NEW.description,'') || ' ' || coalesce(NEW.city,'') || ' ' || coalesce(NEW.state,''))
14
15Create GIN index: CREATE INDEX ON listings USING GIN(search_vector)
16Create index: CREATE INDEX ON listings(status, category_id)
17
18Create a trigger on reviews AFTER INSERT/UPDATE/DELETE to recalculate listings.average_rating and listings.review_count.

1Build the main directory page at src/pages/Directory.tsx.
2
3Layout:
4- Large heading 'Find Local Businesses'
5- Command component (shadcn/ui) for search:
6  - CommandInput with placeholder 'Search businesses...'
7  - On input change (debounced 300ms): query supabase.from('listings').textSearch('search_vector', searchTerm).eq('status','active')
8  - If searchTerm empty: show all listings
9  - CommandEmpty: show 'No businesses found. Be the first to add one!' with a link to /submit
10- Left sidebar (desktop) / top row (mobile): category filter
11  - Show all categories with listing_count Badge
12  - Clicking a category adds .eq('category_id', id) to the query
13  - 'All' option to clear category filter
14- Listing Cards in a grid (2 columns desktop, 1 mobile):
15  - Business name (h3 link to /listing/:slug)
16  - Category Badge
17  - City, State text
18  - Star rating display (filled/empty stars based on average_rating) + review_count
19  - Description excerpt (max 120 chars)
20  - Website Button (external link)
21  - Featured listings get a 'Featured' Badge and slightly elevated Card style
22- Sort options: relevance (default for search), newest, highest rated, most reviewed

1Build a listing submission page at src/pages/SubmitListing.tsx.
2
3Form fields (react-hook-form + zod):
4- Business Name (Input, required)
5- Category (Select, populated from categories table)
6- Description (Textarea, min 50 chars, max 500 chars, show char count)
7- Website (Input type url, optional)
8- Phone (Input, optional)
9- Email (Input type email, optional)
10- Address (Input, optional)
11- City (Input, required)
12- State (Input, required)
13- Your Email (Input type email, required, stored in submitted_by_email — for moderation contact)
14
15On submit:
16- Insert to listings with status='pending'
17- Show a success Card: 'Thank you! Your listing has been submitted for review. We typically review within 24-48 hours.'
18- Reset the form
19
20Add a note below the form: 'All submissions are reviewed before appearing in the directory. We do not publish personal contact information without your permission.'

1Build an admin moderation page at src/pages/admin/Moderation.tsx. Protect this route to require authentication.
2
3Layout:
4- Tabs: Pending (default), Active, Rejected — each fetches listings filtered by status
5- Pending tab DataTable columns: Business Name, Category, City/State, Submitted By Email, Submitted At, Actions
6- Actions per row:
7  - 'Preview' Button: opens a Sheet showing the full listing details (all fields, formatted as the public listing page would look)
8  - 'Approve' Button (green): calls supabase.from('listings').update({ status: 'active' }).eq('id', id). Updates the listing_count on the category.
9  - 'Reject' Button (destructive): opens a Dialog with a rejection_reason Textarea. On confirm, sets status='rejected' and stores the reason.
10- Active tab: shows all active listings with an 'Archive' action that sets status back to 'pending'
11- Rejected tab: shows rejected listings with the rejection_reason column visible and a 'Reconsider' action to move back to 'pending'
12
13Add a badge count in the tab trigger showing pending item count, updating in real time via Supabase Realtime.