Puppeteer
Pixel-perfect PDF on DigitalOcean
Claude
Parses PDF & DOCX imports
Drag & drop
dnd-kit live editor
Stripe
Premium template checkout
The Challenge
The Solution
Features
Live split-pane editor
A form on the left and a paginated, WYSIWYG resume preview on the right that updates as you type.
Drag-and-drop sections
Reorder sections and entries with dnd-kit, with the preview reflowing instantly.
AI resume import
Upload an existing PDF or DOCX; text is extracted locally, then Claude parses it into structured resume JSON.
Pixel-perfect PDF export
A Puppeteer service renders a signed preview route to an exact A4 PDF, identical every time.
Premium templates
Stripe Checkout unlocks premium templates, with purchases verified server-side before export.
Accounts & dashboard
Supabase auth with anonymous-to-account transfer and a dashboard of saved resumes and jobs.
System Architecture
App
Next.js Editor
Import
Claude Parse
Store
Supabase
Payments
Stripe
Render
Puppeteer (DO)
Technology Stack
Frontend & Editor
Next.js 16
React 19Zustand + Immerdnd-kitResizable PanelsBase UIAI & Parsing
Claude (Haiku 4.5)pdf-parsemammoth (DOCX)PDF Rendering
Puppeteer
DigitalOcean dropletExpress servicePlatform & Payments
Supabase (Auth + RLS)Stripe
PostHog
NetlifyKey Learnings
- •Browser print-to-PDF couldn't guarantee fidelity, so I split rendering into a standalone Puppeteer service on a DigitalOcean droplet, the resume renders identically every time, pixel for pixel.
- •Forcing Claude to return structured JSON turned messy PDF and DOCX uploads into clean, editable resume data.
- •Importing existing resumes removed the blank-page problem and got users to a finished draft far faster.
- •Signing the preview URL and verifying the Stripe purchase server-side kept premium exports from being spoofed.
