How to Build a Resume Parser with Lovable

1Create a resume parser schema in Supabase.
2
3Tables:
4- candidates: id, created_by (references auth.users), first_name (text, extracted), last_name (text, extracted), email (text, extracted), phone (text), location (text), linkedin_url (text), resume_path (text, Supabase Storage path), resume_file_name (text), parsed_data (jsonb), parse_status ('pending' | 'processing' | 'completed' | 'failed'), parse_error (text, nullable), parsed_at (timestamptz), manually_reviewed (bool default false), notes (text), created_at
5
6The parsed_data JSONB should follow this structure:
7{
8  contact: { name, email, phone, location, linkedin, github },
9  summary: string,
10  experience: [{ company, title, location, start_date, end_date, is_current, bullets: string[] }],
11  education: [{ institution, degree, field, graduation_year, gpa }],
12  skills: string[],
13  certifications: [{ name, issuer, year }],
14  languages: string[]
15}
16
17Create a GIN index on candidates.parsed_data for fast JSONB queries.
18Create a full-text search index: CREATE INDEX idx_candidates_fts ON candidates USING gin(to_tsvector('english', coalesce(first_name,'') || ' ' || coalesce(last_name,'') || ' ' || coalesce(parsed_data::text,''))).
19
20Storage: create a private bucket 'resumes'. RLS: users can upload and view their own files.
21
22RLS on candidates: authenticated users SELECT/INSERT/UPDATE their own rows (created_by = auth.uid()).

1Build a resume upload page at src/pages/UploadResume.tsx.
2
3Requirements:
4- A drag-and-drop upload zone (DnD). Accept only application/pdf. Show file name and size after selection.
5- Single file upload flow:
6  1. User selects or drops a PDF
7  2. Show a progress bar while uploading to supabase.storage.from('resumes').upload()
8  3. File path: resumes/{userId}/{Date.now()}-{sanitizedFilename}
9  4. After upload, INSERT into candidates: resume_path, resume_file_name, parse_status='processing', created_by=auth.uid()
10  5. Call the parse-resume Edge Function with the candidate id and storage path
11  6. Show a Spinner with 'Analyzing resume...' while the Edge Function runs (typically 5-15 seconds)
12  7. On success: navigate to /candidates/{id} to see the side-by-side view
13  8. On failure: show an Alert with the error, set parse_status='failed'
14- Bulk upload mode (toggle at top):
15  - Allow multiple file selection
16  - Show each file as a Card in a queue with individual status badges
17  - Process files sequentially (not in parallel) to avoid rate limits
18  - After all files are processed, show a summary: X parsed, Y failed

1// supabase/functions/parse-resume/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'
4import Anthropic from 'https://esm.sh/@anthropic-ai/sdk'
5
6const corsHeaders = {
7  'Access-Control-Allow-Origin': '*',
8  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
9  'Content-Type': 'application/json',
10}
11
12serve(async (req: Request) => {
13  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
14
15  const supabase = createClient(
16    Deno.env.get('SUPABASE_URL') ?? '',
17    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
18  )
19  const anthropic = new Anthropic({ apiKey: Deno.env.get('ANTHROPIC_API_KEY') })
20
21  try {
22    const { candidate_id, storage_path } = await req.json()
23
24    // Download the PDF from Storage
25    const { data: fileData, error: fileError } = await supabase.storage
26      .from('resumes')
27      .download(storage_path)
28    if (fileError) throw new Error(`Storage download failed: ${fileError.message}`)
29
30    const arrayBuffer = await fileData.arrayBuffer()
31    const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)))
32
33    // Use Claude's document vision to parse the PDF directly
34    const response = await anthropic.messages.create({
35      model: 'claude-opus-4-5',
36      max_tokens: 4096,
37      messages: [{
38        role: 'user',
39        content: [
40          {
41            type: 'document',
42            source: { type: 'base64', media_type: 'application/pdf', data: base64 },
43          },
44          {
45            type: 'text',
46            text: `Extract all resume information and return ONLY valid JSON matching this exact schema (use null for missing fields):
47{
48  "contact": { "name": string, "email": string, "phone": string, "location": string, "linkedin": string|null, "github": string|null },
49  "summary": string|null,
50  "experience": [{"company": string, "title": string, "location": string|null, "start_date": string, "end_date": string|null, "is_current": boolean, "bullets": string[]}],
51  "education": [{"institution": string, "degree": string, "field": string|null, "graduation_year": number|null, "gpa": string|null}],
52  "skills": string[],
53  "certifications": [{"name": string, "issuer": string|null, "year": number|null}],
54  "languages": string[]
55}
56Return ONLY the JSON object, no explanation or markdown.`,
57          },
58        ],
59      }],
60    })
61
62    const rawJson = response.content[0].type === 'text' ? response.content[0].text.trim() : '{}'
63    const parsed = JSON.parse(rawJson)
64
65    const contactName = parsed.contact?.name ?? ''
66    const [first_name, ...rest] = contactName.split(' ')
67    const last_name = rest.join(' ')
68
69    await supabase.from('candidates').update({
70      parsed_data: parsed,
71      first_name: first_name || null,
72      last_name: last_name || null,
73      email: parsed.contact?.email || null,
74      phone: parsed.contact?.phone || null,
75      location: parsed.contact?.location || null,
76      linkedin_url: parsed.contact?.linkedin || null,
77      parse_status: 'completed',
78      parsed_at: new Date().toISOString(),
79    }).eq('id', candidate_id)
80
81    return new Response(JSON.stringify({ success: true }), { headers: corsHeaders })
82  } catch (err) {
83    const message = err instanceof Error ? err.message : 'Parse failed'
84    await supabase.from('candidates').update({
85      parse_status: 'failed',
86      parse_error: message,
87    }).eq('id', (await req.json().catch(() => ({}))).candidate_id)
88    return new Response(JSON.stringify({ error: message }), { status: 500, headers: corsHeaders })
89  }
90})

1Build a candidate review page at src/pages/CandidateReview.tsx (route: /candidates/:id).
2
3Layout: two-column at 50/50 width on desktop, stacked on mobile.
4
5Left panel:
6- Fetch a signed URL for the candidate's resume_path from supabase.storage.from('resumes').createSignedUrl(path, 3600)
7- Render the PDF in an <iframe> with the signed URL
8- Below the iframe: a Download Button and an 'Upload New Version' Button
9
10Right panel:
11- If parse_status = 'processing': show a Spinner and poll every 3 seconds
12- If parse_status = 'failed': show an Alert with parse_error and a Retry Button
13- If parse_status = 'completed': show the parsed_data as editable fields:
14  - Contact section (Card): editable Inputs for name, email, phone, location, linkedin
15  - Summary (Card): editable Textarea
16  - Experience (Card per job): each entry shows company/title/dates. Clicking 'Edit' opens an inline form. A trash Button removes the entry. An 'Add Experience' Button adds a new empty entry.
17  - Education (Card per entry): same pattern as Experience
18  - Skills: a multi-value Input with removable Badges. Type a skill and press Enter to add.
19  - Certifications: editable list
20- A floating 'Save Changes' Button that appears when any field is edited (tracks dirty state with useForm)
21- On save: UPDATE candidates SET parsed_data = {updated json}, manually_reviewed = true
22- Show a 'Mark as Reviewed' Button that sets manually_reviewed = true

1Build a candidates list page at src/pages/Candidates.tsx.
2
3Requirements:
4- A DataTable with columns: Name (link to /candidates/:id), Email, Location, Parse Status Badge, Skills (first 3 as small Badges + '+N more'), Experience Years (calculate from parsed_data.experience dates), Reviewed Badge (checkmark if manually_reviewed), Upload Date
5- Full-text search Input above table: search across name, email, location, and skills. Use Supabase's textSearch or ilike queries against parsed_data::text for broad matching.
6- Filter panel (collapsible):
7  - Skills filter: type a skill to filter candidates who have it in parsed_data->>'skills'
8  - Location filter: text Input
9  - Min years experience: number Select
10  - Review status: all / reviewed / unreviewed
11  - Date range picker for upload date
12- Clicking a row navigates to the candidate review page
13- Bulk actions checkbox: select multiple candidates, then 'Delete' (with confirmation Dialog) or 'Export as CSV'
14- Stats row above table: total candidates, pending review count, parse failures count