How to Build a Certificate Generator with Lovable

1Build a certificate generator app. Create these Supabase tables:
2
3- certificate_templates: id, user_id, name, description, template_config (jsonb, stores layout + content blocks), preview_image_url, is_active (bool default true), created_at, updated_at
4- issued_certificates: id, user_id, template_id (FK certificate_templates), verification_token (uuid, default gen_random_uuid(), UNIQUE), recipient_name, recipient_email, course_name (text), issue_date (date, default today), expiry_date (date nullable), pdf_url (text, Supabase Storage path), is_revoked (bool default false), revoked_at, revocation_reason, metadata (jsonb, stores all custom fields), created_at
5
6The template_config jsonb structure:
7{
8  layout: { background_color, border_color, border_width, font_family, width_px, height_px },
9  blocks: [{ id, type: text|image|line, x, y, width, height, content, font_size, font_weight, color, align, token_key }]
10}
11
12RLS:
13- certificate_templates: user_id = auth.uid() for all operations
14- issued_certificates: user_id = auth.uid() for writes, allow public SELECT WHERE is_revoked = false (for verification)
15
16Create a Storage bucket 'certificates' with public = false. Signed URLs will be used for PDF access.

1Build the template editor at src/pages/TemplateEditor.tsx:
2
31. Split layout: form panel (left, 40%), preview panel (right, 60%)
42. Form panel sections:
5   - Layout settings: background color picker (Input type='color'), border color + width, font family Select (Serif, Sans-serif, Monospace, Georgia), dimensions (A4 preset = 794x1123px, or custom)
6   - Content blocks list: each block shows its type icon, token_key if set, and Edit/Delete buttons
7   - 'Add Text Block' Button: opens inline editor for that block's content, font size, position, alignment
8   - Token reference: show available tokens as Badge chips: {{recipient_name}}, {{course_name}}, {{issue_date}}, {{certificate_id}}, plus any custom tokens the user defines
93. Preview panel:
10   - Render the certificate as a div with inline styles from template_config.layout
11   - Render each block as an absolutely-positioned div within the certificate div
12   - Replace {{token}} placeholders with sample data for preview: recipient_name = 'Jane Doe', course_name = 'Your Course Name', issue_date = today
134. Save Button: upserts template_config to certificate_templates, updates preview_image_url by calling html2canvas on the preview div

1// supabase/functions/generate-certificate/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 corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8}
9
10serve(async (req: Request) => {
11  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
12
13  const supabase = createClient(
14    Deno.env.get('SUPABASE_URL') ?? '',
15    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
16  )
17
18  const { templateId, recipientData, certificateId } = await req.json()
19
20  const { data: template } = await supabase
21    .from('certificate_templates')
22    .select('template_config')
23    .eq('id', templateId)
24    .single()
25
26  if (!template) {
27    return new Response(JSON.stringify({ error: 'Template not found' }), { status: 404, headers: corsHeaders })
28  }
29
30  const config = template.template_config
31  let html = buildCertificateHtml(config, { ...recipientData, certificate_id: certificateId })
32
33  const pdfResponse = await fetch('https://api.htmlpdfapi.com/convert', {
34    method: 'POST',
35    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${Deno.env.get('PDF_API_KEY')}` },
36    body: JSON.stringify({ html, width: config.layout.width_px, height: config.layout.height_px }),
37  })
38
39  if (!pdfResponse.ok) {
40    return new Response(JSON.stringify({ error: 'PDF generation failed' }), { status: 500, headers: corsHeaders })
41  }
42
43  const pdfBuffer = await pdfResponse.arrayBuffer()
44  const fileName = `certificates/${certificateId}.pdf`
45
46  const { error: uploadError } = await supabase.storage.from('certificates').upload(fileName, pdfBuffer, {
47    contentType: 'application/pdf',
48    upsert: true,
49  })
50
51  if (uploadError) {
52    return new Response(JSON.stringify({ error: uploadError.message }), { status: 500, headers: corsHeaders })
53  }
54
55  await supabase.from('issued_certificates').update({ pdf_url: fileName }).eq('id', certificateId)
56
57  return new Response(JSON.stringify({ pdfUrl: fileName }), { headers: corsHeaders })
58})
59
60function buildCertificateHtml(config: any, data: Record<string, string>): string {
61  const { layout, blocks } = config
62  const blockHtml = blocks.map((b: any) => {
63    const content = b.content.replace(/\{\{(\w+)\}\}/g, (_: string, key: string) => data[key] ?? `{{${key}}}`)
64    return `<div style="position:absolute;left:${b.x}px;top:${b.y}px;width:${b.width}px;font-size:${b.font_size}px;font-weight:${b.font_weight};color:${b.color};text-align:${b.align}">${content}</div>`
65  }).join('')
66  return `<html><body><div style="position:relative;width:${layout.width_px}px;height:${layout.height_px}px;background:${layout.background_color};border:${layout.border_width}px solid ${layout.border_color};font-family:${layout.font_family}">${blockHtml}</div></body></html>`
67}

1Build two features:
2
31. Bulk Issuance page at src/pages/BulkIssue.tsx:
4   - File Input for CSV upload. Expected columns: recipient_name (required), email (required), course_name (required), and any custom token columns
5   - Parse CSV on the frontend using a simple split('\n').map(row => row.split(',')) or ask Lovable to use the papaparse library
6   - Show parsed rows in a DataTable preview with a 'recipient_name', 'email', 'course_name' column validation check
7   - Template Select: choose which template to use
8   - Issue Date DatePicker (default today)
9   - 'Issue All' Button: shows a Progress bar. For each row:
10     a. Insert a row into issued_certificates (get the new id and verification_token)
11     b. Call the generate-certificate Edge Function with templateId, row data, certificateId
12     c. Send email via Resend Edge Function with a link to verify/TOKEN and a PDF download link
13   - Show a results summary: X succeeded, Y failed with error details
14
152. Public verification page at src/pages/VerifyCertificate.tsx (route: /verify/:token):
16   - Fetch issued_certificates WHERE verification_token = token AND is_revoked = false
17   - If found: show a green success Banner with the recipient name, course name, issue date, and 'This certificate is valid'
18   - If not found or revoked: show a red error state 'Certificate not found or has been revoked'
19   - Show a 'Download PDF' Button that generates a signed URL from Supabase Storage
20   - No authentication required for this page