How to Build a Resume Builder Backend with Lovable

1Build a resume builder. Create these Supabase tables:
2
3- resumes: id, user_id, title (e.g. 'Software Engineer Resume'), full_name, email, phone, location, website_url, linkedin_url, github_url, is_public (bool default false), public_slug (text, UNIQUE, for shareable link), selected_template (text default 'minimal'), created_at, updated_at
4
5- resume_summary: id, resume_id (FK resumes UNIQUE), content (text, 2-4 sentence professional summary), created_at
6
7- resume_experiences: id, resume_id (FK resumes), company, title, location, start_date (date), end_date (date nullable, null = present), is_current (bool default false), bullets (text array, list of achievement bullets), sort_order (int), created_at
8
9- resume_education: id, resume_id (FK resumes), institution, degree, field_of_study, gpa (text nullable), start_date (date), end_date (date), highlights (text array), sort_order (int), created_at
10
11- resume_skills: id, resume_id (FK resumes), category (text e.g. 'Programming Languages'), skills (text array), sort_order (int), created_at
12
13- resume_projects: id, resume_id (FK resumes), name, description, tech_stack (text array), url (text nullable), start_date (date nullable), end_date (date nullable), bullets (text array), sort_order (int), created_at
14
15RLS: all tables require user_id = auth.uid() on resumes table; access to section tables via resume_id IN (SELECT id FROM resumes WHERE user_id = auth.uid()).
16
17Create a view resume_full_data that joins all section tables for a given resume_id — used by the PDF generator.

1Build the resume editor at src/pages/ResumeEditor.tsx:
2
31. Layout: editing panel (left, 45%), preview panel (right, 55%)
42. Editing panel with Tabs for each section: Header, Summary, Experience, Education, Skills, Projects
53. Header tab: form for full_name, email, phone, location, website_url, linkedin_url, github_url (all auto-saving on blur)
64. Experience tab:
7   - List of experience cards showing company + title + date range
8   - 'Add Experience' Button opens an inline form with: company, title, location, date range (start_date/end_date DatePickers, 'Currently working here' Checkbox), bullets (dynamic list — type a bullet and press Enter to add another, click x to remove)
9   - Drag handle on each card to reorder (updates sort_order)
10   - Edit and delete buttons per card
115. Similar pattern for Education, Skills, and Projects tabs
126. Preview panel: renders the selected template component with the current resume data. Updates on every change using react-query with a 500ms debounce
137. Template selector: small thumbnail Cards above the preview showing all available templates. Clicking one updates resumes.selected_template and re-renders the preview

1// src/components/resume-templates/MinimalTemplate.tsx
2import { Separator } from '@/components/ui/separator'
3import { Badge } from '@/components/ui/badge'
4import type { ResumeData } from '@/types/resume'
5import { format } from 'date-fns'
6
7interface Props { data: ResumeData; isPdfMode?: boolean }
8
9export function MinimalTemplate({ data, isPdfMode = false }: Props) {
10  const { resume, experiences, education, skills, projects, summary } = data
11  const dateRange = (start: string, end: string | null, isCurrent: boolean) =>
12    `${format(new Date(start), 'MMM yyyy')} — ${isCurrent || !end ? 'Present' : format(new Date(end), 'MMM yyyy')}`
13
14  return (
15    <div className={`bg-white text-gray-900 font-sans ${isPdfMode ? 'p-8' : 'p-6'} max-w-[794px]`}>
16      <div className="text-center mb-6">
17        <h1 className="text-3xl font-bold tracking-tight">{resume.full_name}</h1>
18        <div className="flex justify-center gap-4 text-sm text-gray-500 mt-1 flex-wrap">
19          {resume.email && <span>{resume.email}</span>}
20          {resume.phone && <span>{resume.phone}</span>}
21          {resume.location && <span>{resume.location}</span>}
22          {resume.linkedin_url && <a href={resume.linkedin_url} className="text-blue-600">{resume.linkedin_url.replace('https://linkedin.com/in/', 'linkedin.com/in/')}</a>}
23        </div>
24      </div>
25      {summary && (
26        <>
27          <h2 className="text-lg font-semibold uppercase tracking-wide mb-2">Summary</h2>
28          <Separator className="mb-2" />
29          <p className="text-sm leading-relaxed mb-4">{summary.content}</p>
30        </>
31      )}
32      {experiences.length > 0 && (
33        <>
34          <h2 className="text-lg font-semibold uppercase tracking-wide mb-2">Experience</h2>
35          <Separator className="mb-3" />
36          <div className="space-y-4 mb-4">
37            {experiences.map((exp) => (
38              <div key={exp.id}>
39                <div className="flex justify-between items-start">
40                  <div>
41                    <span className="font-semibold">{exp.title}</span> <span className="text-gray-600">at {exp.company}</span>
42                    {exp.location && <span className="text-gray-500 text-sm ml-2">· {exp.location}</span>}
43                  </div>
44                  <span className="text-sm text-gray-500 whitespace-nowrap">{dateRange(exp.start_date, exp.end_date, exp.is_current)}</span>
45                </div>
46                <ul className="mt-1 space-y-0.5">
47                  {exp.bullets.map((b, i) => <li key={i} className="text-sm text-gray-700 before:content-['•'] before:mr-2 before:text-gray-400">{b}</li>)}
48                </ul>
49              </div>
50            ))}
51          </div>
52        </>
53      )}
54      {skills.length > 0 && (
55        <>
56          <h2 className="text-lg font-semibold uppercase tracking-wide mb-2">Skills</h2>
57          <Separator className="mb-3" />
58          <div className="space-y-1 mb-4">
59            {skills.map((s) => (
60              <div key={s.id} className="flex gap-2 text-sm">
61                <span className="font-medium w-36 shrink-0">{s.category}:</span>
62                <span className="text-gray-600">{s.skills.join(', ')}</span>
63              </div>
64            ))}
65          </div>
66        </>
67      )}
68    </div>
69  )
70}

1Build two features:
2
31. PDF generation Edge Function at supabase/functions/generate-resume-pdf/index.ts:
4   - Authenticate the user via Authorization header
5   - Accept { resumeId, templateName } in request body
6   - Fetch all resume data using the resume_full_data view (service_role client)
7   - Build the HTML for the selected template using string interpolation (not React — Deno can't render JSX)
8   - Call the HTML-to-PDF API with the HTML and A4 dimensions (794x1123px)
9   - Upload the PDF to Supabase Storage at resumes/{userId}/{resumeId}/{templateName}.pdf
10   - Return a signed URL valid for 1 hour
11
122. Public sharing feature:
13   - Add a 'Share Resume' toggle in the editor header
14   - When enabled: set resumes.is_public = true, generate a URL-safe slug from full_name + random 6-char suffix (e.g. 'jane-doe-a3f9k2'), store in public_slug
15   - Create a public route /resume/:slug that fetches resume data WHERE public_slug = slug AND is_public = true (no auth)
16   - Render using the resume's selected_template
17   - Add a 'Download PDF' Button on the public page that calls the generate-resume-pdf Edge Function with the resume owner's service_role (via a special public download endpoint)
18   - Show a 'Copy Link' Button that copies the public URL to clipboard