How to Build a Recruitment Platform with Lovable

1-- Run in Supabase SQL Editor
2create table jobs (
3  id uuid primary key default gen_random_uuid(),
4  title text not null,
5  department text,
6  location text,
7  status text default 'open' check (status in ('open','closed','draft')),
8  headcount int default 1,
9  created_by uuid references auth.users(id),
10  created_at timestamptz default now()
11);
12
13create table pipeline_stages (
14  id uuid primary key default gen_random_uuid(),
15  job_id uuid references jobs(id) on delete cascade,
16  name text not null,
17  position int not null
18);
19
20create table candidates (
21  id uuid primary key default gen_random_uuid(),
22  job_id uuid references jobs(id) on delete cascade,
23  stage_id uuid references pipeline_stages(id),
24  full_name text not null,
25  email text not null,
26  resume_path text,
27  composite_score numeric(3,1),
28  applied_at timestamptz default now()
29);
30
31create table evaluations (
32  id uuid primary key default gen_random_uuid(),
33  candidate_id uuid references candidates(id) on delete cascade,
34  reviewer_id uuid references auth.users(id),
35  technical_score int check (technical_score between 1 and 5),
36  communication_score int check (communication_score between 1 and 5),
37  culture_score int check (culture_score between 1 and 5),
38  notes text,
39  created_at timestamptz default now()
40);
41
42-- RLS
43alter table jobs enable row level security;
44alter table candidates enable row level security;
45alter table evaluations enable row level security;
46alter table pipeline_stages enable row level security;
47
48create policy "Auth users read jobs" on jobs for select using (auth.role() = 'authenticated');
49create policy "Auth users manage candidates" on candidates for all using (auth.role() = 'authenticated');
50create policy "Auth users manage evaluations" on evaluations for all using (auth.role() = 'authenticated');
51create policy "Auth users read stages" on pipeline_stages for select using (auth.role() = 'authenticated');

1Build a jobs management page at /jobs.
2
3Use a shadcn DataTable with columns:
4- title (text link to /jobs/:id)
5- department (text)
6- location (text)
7- status (Badge: green=open, yellow=draft, gray=closed)
8- headcount (number)
9- applicants (count from candidates table, same job_id)
10- created_at (formatted date)
11
12Add a "New Job" Button top-right that opens a Sheet.
13The Sheet has a Form with: title (Input), department (Select with HR/Engineering/Sales/Marketing/Design), location (Input), headcount (Input type number), status (Select).
14On submit, insert to the jobs table via Supabase. Show a Sonner toast on success.
15Fetch jobs from Supabase with applicant count using a join.
16All data is typed with TypeScript interfaces.

1Build a Kanban pipeline page at /jobs/:id/pipeline.
2
3Fetch pipeline_stages for the job ordered by position.
4Fetch candidates for the job grouped by stage_id.
5
6Render each stage as a vertical column (min-w-[280px]) with:
7- Stage name header with candidate count Badge
8- Candidate cards using shadcn Card component
9  Each card shows: full_name, email, composite_score (if set), applied_at
10  A colored Badge for composite_score: red < 2.5, yellow 2.5-3.5, green > 3.5
11
12Each card is draggable. On drop to a different column, update candidates.stage_id in Supabase.
13Clicking a card opens a Dialog (see next step).
14Use horizontal scroll for many stages.
15Use TypeScript interfaces for Candidate and PipelineStage.

1import { useState } from 'react'
2import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
3import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
4import { Avatar, AvatarFallback } from '@/components/ui/avatar'
5import { Badge } from '@/components/ui/badge'
6import { supabase } from '@/lib/supabase'
7
8interface Evaluation {
9  id: string
10  reviewer_id: string
11  technical_score: number
12  communication_score: number
13  culture_score: number
14  notes: string
15  created_at: string
16  reviewer_email?: string
17}
18
19interface CandidateDialogProps {
20  candidateId: string | null
21  candidateName: string
22  resumePath: string | null
23  onClose: () => void
24}
25
26export function CandidateDialog({ candidateId, candidateName, resumePath, onClose }: CandidateDialogProps) {
27  const [resumeUrl, setResumeUrl] = useState<string | null>(null)
28  const [evaluations, setEvaluations] = useState<Evaluation[]>([])
29
30  const loadResume = async () => {
31    if (!resumePath) return
32    const { data } = await supabase.storage
33      .from('resumes')
34      .createSignedUrl(resumePath, 3600)
35    if (data) setResumeUrl(data.signedUrl)
36  }
37
38  const loadEvaluations = async () => {
39    if (!candidateId) return
40    const { data } = await supabase
41      .from('evaluations')
42      .select('*')
43      .eq('candidate_id', candidateId)
44      .order('created_at', { ascending: false })
45    if (data) setEvaluations(data)
46  }
47
48  const scoreColor = (s: number) =>
49    s >= 4 ? 'text-green-600' : s >= 3 ? 'text-yellow-600' : 'text-red-600'
50
51  return (
52    <Dialog open={!!candidateId} onOpenChange={onClose}>
53      <DialogContent className="max-w-2xl">
54        <DialogHeader>
55          <DialogTitle>{candidateName}</DialogTitle>
56        </DialogHeader>
57        <Tabs defaultValue="resume" onValueChange={(v) => { if (v === 'resume') loadResume(); if (v === 'evaluations') loadEvaluations(); }}>
58          <TabsList>
59            <TabsTrigger value="resume">Resume</TabsTrigger>
60            <TabsTrigger value="evaluations">Evaluations</TabsTrigger>
61            <TabsTrigger value="timeline">Timeline</TabsTrigger>
62          </TabsList>
63          <TabsContent value="resume" className="mt-4">
64            {resumeUrl ? (
65              <iframe src={resumeUrl} className="w-full h-[500px] rounded border" />
66            ) : (
67              <p className="text-muted-foreground text-sm">No resume uploaded.</p>
68            )}
69          </TabsContent>
70          <TabsContent value="evaluations" className="mt-4 space-y-3">
71            {evaluations.map((e) => (
72              <div key={e.id} className="border rounded-lg p-4 space-y-2">
73                <div className="flex items-center gap-2">
74                  <Avatar className="h-7 w-7"><AvatarFallback>R</AvatarFallback></Avatar>
75                  <span className="text-sm font-medium">{e.reviewer_email ?? 'Reviewer'}</span>
76                </div>
77                <div className="flex gap-4 text-sm">
78                  <span>Tech: <span className={scoreColor(e.technical_score)}>{e.technical_score}/5</span></span>
79                  <span>Comm: <span className={scoreColor(e.communication_score)}>{e.communication_score}/5</span></span>
80                  <span>Culture: <span className={scoreColor(e.culture_score)}>{e.culture_score}/5</span></span>
81                </div>
82                {e.notes && <p className="text-sm text-muted-foreground">{e.notes}</p>}
83              </div>
84            ))}
85          </TabsContent>
86          <TabsContent value="timeline" className="mt-4">
87            <p className="text-sm text-muted-foreground">Timeline coming in next step.</p>
88          </TabsContent>
89        </Tabs>
90      </DialogContent>
91    </Dialog>
92  )
93}

1-- Add to Supabase SQL Editor
2create or replace function recalculate_composite_score(p_candidate_id uuid)
3returns void language plpgsql as $$
4declare
5  avg_score numeric(3,1);
6begin
7  select round(avg((technical_score + communication_score + culture_score)::numeric / 3), 1)
8  into avg_score
9  from evaluations
10  where candidate_id = p_candidate_id;
11
12  update candidates
13  set composite_score = avg_score
14  where id = p_candidate_id;
15end;
16$$;
17
18-- Trigger on evaluation insert/update
19create or replace function trigger_composite_score()
20returns trigger language plpgsql as $$
21begin
22  perform recalculate_composite_score(NEW.candidate_id);
23  return NEW;
24end;
25$$;
26
27create trigger eval_score_trigger
28after insert or update on evaluations
29for each row execute function trigger_composite_score();

1Add resume upload to the candidate application form.
2
3When creating a new candidate:
41. Show a file Input (accept .pdf,.doc,.docx) labeled "Resume"
52. On form submit, upload the file to Supabase Storage bucket 'resumes' using path: `${jobId}/${candidateId}/${file.name}`
63. Store the returned path in candidates.resume_path
74. Show upload progress with a Progress bar from shadcn
85. Show a Sonner toast: "Resume uploaded" on success
9
10Also build a /dashboard page with four Card components:
11- Total open jobs (count from jobs where status='open')
12- Total candidates this month
13- Average composite score across all evaluated candidates
14- Candidates added today
15
16Below the cards, show a recent activity list: last 10 candidates ordered by applied_at with their name, job title, and stage Badge.