Menu
Get Resume
All Projects

Web App · 01 / 03

Crowned Project

AI Resume Builder

A step-by-step resume builder with a live preview pane — fill in your details on one side, watch a formatted resume take shape on the other. The core builder is free; AI-assisted writing and unlimited resumes unlock with Premium.

Next.jsPrismaStripeVercel Blob
Case Study
The Goal

This one wasn't built to fix a specific pain point — it was a deliberate exercise in showcasing modern SaaS development end to end: real AI integration, a live-updating preview, Stripe-backed subscription billing, and the kind of UX polish that makes a tool feel finished rather than a demo.

Features & Decisions
  • Guided multi-step builder — The form is broken into General Info, Personal Info, Work Experience, Education, Skills, and Summary steps, with the resume preview rendering live in the same view — no separate preview page, no stale state between the form and the output.
  • Autosave — Progress saves automatically as you move between steps, so there's no explicit save button and no risk of losing a half-finished resume on a refresh.
  • Tiered AI access — AI tools and unlimited resumes are gated behind Premium and Premium Plus plans, while the manual builder — the part most people actually need — stays free.
The Hard Part

Keeping the live preview in sync with the form without re-rendering the whole page on every keystroke took some care — the preview only re-renders the section tied to whatever field changed, not the entire document.

What's Next

UI/UX polish is the immediate focus. Extending the AI tools past text generation — matching a resume against a specific job description — comes after that, as time allows.

← PreviousRedbookNext →TripleA LMS