How to Build a Job Board with Lovable

1Create a two-role job board with Supabase. Set up these tables:
2
3- user_profiles: id (uuid pk references auth.users), role (text check in ('employer', 'seeker')), full_name (text), headline (text), resume_url (text), company_id (uuid), created_at
4- companies: id (uuid pk), owner_id (uuid references auth.users), name (text not null), logo_url (text), website (text), description (text), location (text), employee_count (text), created_at
5- job_listings: id (uuid pk), company_id (uuid references companies), title (text not null), description (text), location (text), is_remote (bool default false), job_type (text check in ('full-time','part-time','contract','internship')), salary_min (int), salary_max (int), status (text check in ('draft','published','closed'), default 'draft'), search_vector (tsvector), application_count (int default 0), published_at (timestamptz), created_at, updated_at
6- applications: id (uuid pk), listing_id (uuid references job_listings), applicant_id (uuid references auth.users), cover_letter (text), resume_url (text), status (text check in ('applied','reviewing','interview','rejected','offered'), default 'applied'), employer_notes (text), created_at, updated_at, UNIQUE(listing_id, applicant_id)
7- saved_jobs: applicant_id (uuid references auth.users), listing_id (uuid references job_listings), saved_at, PRIMARY KEY (applicant_id, listing_id)
8
9RLS:
10- job_listings: anon/authenticated SELECT where status='published', employer SELECT/UPDATE/DELETE where company_id in their companies
11- applications: seeker SELECT/INSERT/UPDATE(cover_letter only) where applicant_id=auth.uid(), employer SELECT/UPDATE(status, employer_notes) where listing belongs to their company
12- saved_jobs: users manage their own rows
13- user_profiles: users manage their own row
14- companies: owner manages their company
15
16Create a trigger to update job_listings.search_vector: to_tsvector('english', title || ' ' || coalesce(description,'') || ' ' || coalesce(location,'')). Create GIN index on search_vector.
17Create a trigger to increment/decrement job_listings.application_count on applications INSERT/DELETE.

1Build a job search page at src/pages/Jobs.tsx.
2
3Layout:
4- Search bar using shadcn/ui Command (not a plain Input) — searches job title and description via Supabase textSearch on search_vector
5- Filter row below the search bar:
6  - Job Type: multi-select Toggle group (All / Full-time / Part-time / Contract / Internship)
7  - Remote only: Switch
8  - Salary range: two Inputs (min/max) with a range Slider below them
9  - Location: Input with debounce
10- Job listings as Cards in a grid (not a table):
11  - Company logo (Avatar), company name, job title (h3)
12  - Badges: job_type, is_remote ('Remote'), salary range (formatted)
13  - Location text, published_at relative time
14  - 'Apply' Button and a bookmark icon Button (toggles saved_jobs)
15- Show application_count as a small '12 applicants' note on each card
16- Pagination: 'Load more' Button that appends to the current list
17
18Query logic:
19- Start with: supabase.from('job_listings').select('*, companies(name, logo_url)').eq('status','published')
20- Apply textSearch if keyword entered
21- Apply .eq('job_type', type) if type selected
22- Apply .eq('is_remote', true) if remote toggle on
23- Apply .gte('salary_min', minSalary).lte('salary_max', maxSalary) if salary set
24- Apply .ilike('location', '%' + location + '%') if location entered

1Build an ApplyDialog component at src/components/ApplyDialog.tsx. Props: listing (JobListing), onClose.
2
3Form fields (react-hook-form + zod):
4- Cover Letter (Textarea, required, min 100 chars, show char count)
5- Resume: show the seeker's current resume from user_profiles.resume_url as a link if it exists, with a 'Use existing resume' Checkbox (default checked). If unchecked, show a file input for uploading a new resume.
6
7Resume upload logic:
8- Accept only PDF and DOCX (application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document)
9- Upload to 'resumes' storage bucket at path: {userId}/{listingId}/{filename}
10- After upload, do NOT use the public URL (bucket is private)
11- Store the storage path (not a URL) in the applications.resume_url column
12- Optionally update user_profiles.resume_url with the same path for future reuse
13
14On submit:
15- Insert into applications: { listing_id, applicant_id: currentUser.id, cover_letter, resume_url: storagePath, status: 'applied' }
16- Handle the UNIQUE constraint: if error code is '23505', show 'You have already applied to this job'
17- Show a success toast: 'Application submitted!'
18- Close the Dialog

1Build two employer pages:
2
31. src/pages/employer/Listings.tsx — manage job listings:
4- DataTable with columns: Title, Status Badge (draft/published/closed), application_count, Published At, Actions (Edit, Close, Delete)
5- 'Post Job' Button opens a Sheet with a job creation form:
6  - Title, Description (Textarea, rich with 400px min height), Location, Remote Switch
7  - Job Type Select, Salary Min/Max Inputs
8  - Status Select (Save as Draft / Publish now)
9  - Company auto-selected from the employer's company
10
112. src/pages/employer/Applications.tsx — review applications:
12- A listing Select at the top filters to one job
13- DataTable with columns: Applicant Name, Applied At, Status Badge (color per status), Cover Letter preview (truncated), Resume (Button to view — calls Edge Function to get signed URL), Actions
14- Status update: clicking the Status Badge shows a Select with all status options. On change, update applications.status
15- Employer Notes: an expandable row showing employer_notes Textarea, auto-saved on blur
16- Add a 'Send to Interview' Button shortcut that sets status to 'interview'
17
18Fetch applications with applicant info: supabase.from('applications').select('*, user_profiles(full_name, headline)')

1// supabase/functions/resume-url/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4
5const cors = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8  'Content-Type': 'application/json',
9}
10
11serve(async (req: Request) => {
12  if (req.method === 'OPTIONS') return new Response('ok', { headers: cors })
13
14  const authHeader = req.headers.get('Authorization')
15  if (!authHeader) return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: cors })
16
17  const { applicationId } = await req.json()
18
19  const supabase = createClient(
20    Deno.env.get('SUPABASE_URL') ?? '',
21    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
22  )
23
24  // Verify the caller is an employer who owns the listing
25  const userSupabase = createClient(
26    Deno.env.get('SUPABASE_URL') ?? '',
27    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
28    { global: { headers: { Authorization: authHeader } } }
29  )
30  const { data: { user } } = await userSupabase.auth.getUser()
31  if (!user) return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: cors })
32
33  const { data: app } = await supabase
34    .from('applications')
35    .select('resume_url, job_listings(company_id, companies(owner_id))')
36    .eq('id', applicationId)
37    .single()
38
39  if (!app) return new Response(JSON.stringify({ error: 'Not found' }), { status: 404, headers: cors })
40
41  const ownerCheck = (app as any).job_listings?.companies?.owner_id
42  if (ownerCheck !== user.id) return new Response(JSON.stringify({ error: 'Forbidden' }), { status: 403, headers: cors })
43
44  const { data: signedData, error } = await supabase.storage
45    .from('resumes')
46    .createSignedUrl(app.resume_url, 60)
47
48  if (error || !signedData) return new Response(JSON.stringify({ error: 'Could not generate URL' }), { status: 500, headers: cors })
49
50  return new Response(JSON.stringify({ url: signedData.signedUrl }), { headers: cors })
51})