How I Built My Own AI-Powered Resume Builder for less than 1$ !
Updating my resume always felt like a chore. Google Docs, Canva, or LaTeX — nothing felt right. Either the formatting broke, the layout was rigid, or I couldn't quickly tailor it for a specific job application. So I built my own. An AI-powered resume builder that lives right inside my personal site
The Problem
Updating my resume always felt like a chore. Google Docs, Canva, or LaTeX — nothing felt right. Either the formatting broke, the layout was rigid, or I couldn't quickly tailor it for a specific job application.
So I built my own. An AI-powered resume builder that lives right inside my personal site.
What It Does
Fill in your details — personal info, experience, education, summary
Preview in real-time — see exactly what your resume looks like as you type
Switch between templates — single column or two column layouts
Customize fonts, colors, and sizes — full control over the visual style
Export to PDF — one click download
Print directly — browser-native print with full styling
Save, load, and clone resumes — keep multiple versions
Optimize with AI — paste a job description and let AI rewrite your bullet points to match
How It Works
Data Flow
1. User fills out the form — Personal info, experience with bullet points, education, and a professional summary are captured in React state.
2. Live preview updates in real-time — State is passed down to the preview component which renders both single-column and two-column templates.
3. Save to Firestore — When saved, data is sent to the server which persists it in Firebase Firestore.
4. Load and clone — Previously saved resumes can be loaded from the database or cloned to create variations.
5. AI Optimization — Paste a job description, click "Optimize", and the resume content + job description is sent to an LLM which returns rewritten bullet points and summary tailored to the role.
PDF Export
The PDF generation works in two steps: capture the live preview as an image at high resolution, and place that image onto an A4 document and save it.
Print Preview
Browser-native print uses a custom HTML template generated from the resume data (not cloned from the DOM) to ensure consistent styling across browsers.
Cost
The entire AI development cost for this project was less than $1 USD. The DeepSeek API calls for resume optimization cost fractions of a cent each, and the rest of the stack is entirely open source and self-hosted.
How I Used AI to Build It
This whole project was a pair programming session with AI from start to finish.
1. AI-Generated Code Architecture — I described the component structure (collapsible form sections, live preview, styling modal) and the AI scaffolded the entire page with state management, validation, and clean UI patterns.
2. AI-Written Complex Logic — The trickiest parts — PDF generation, print preview HTML, validation engine, two-column layout renderer — were all written by AI from plain English descriptions.
3. AI-Generated AI Integration — Meta, right? The "Optimize with AI" feature itself was built by AI. I explained the requirement and it wrote the integration, keyword extraction fallback, and API route handler.
4. Iterative Refinement via Chat — The entire UI was refined through prompts: "Make the preview panel sticky on scroll", "Add a minimize button", "Show bullet points as removable chips", "Add a clone button". Each request became working code instantly.
Nearly every line of the component was generated by AI. My role was product thinking and direction — deciding what to build, reviewing the output, and making small tweaks.
Key Design Decisions
Live preview as you edit — No separate "preview mode" toggle needed
One textarea per experience for bullet points — Paste multiple lines at once, each becomes a bullet
Sticky preview panel — Scroll through the form while the preview stays visible
Validation before save — Catches missing required fields early
Smart fallback for AI — If the LLM API fails, keywords are extracted from the job description locally and action-verb bullet points are generated
What I Learned
The hardest part wasn't the PDF generation or the AI integration — it was getting the print preview to match the on-screen preview exactly. Browsers handle CSS differently in print mode, so I ended up generating the print HTML from scratch using the resume data rather than cloning the live preview.
The biggest lesson? AI lets you build complex, polished features in hours instead of days — for less than the price of a coffee. This entire resume builder — with its live preview, multiple templates, PDF export, print support, and AI optimization — went from idea to working product for under $1 in AI API costs.
