Build a professional resume in minutes — live preview, 10 templates, AI enhancement, instant PDF export.
ResumeAI is a fully client-side React application that lets anyone build a polished, ATS-friendly resume without an account, without a backend, and entirely for free.
The user fills in a multi-section form, watches the A4 preview update live on every keystroke, optionally lets Groq AI rewrite each section with stronger language, and downloads a print-ready PDF in one click.
Every keystroke reflects instantly in the A4 preview panel — no refresh needed.
Groq AI rewrites content with stronger verbs, quantified metrics, and ATS keywords.
Compare original vs AI-enhanced versions section by section before accepting.
react-to-print for selectable text + html2canvas + jsPDF fallback download.
Full dark/light mode toggle with localStorage persistence.
Debounced auto-save to localStorage every 5 seconds — never lose your work.
8 presets + full custom colour picker applied per template in real time.
Hamburger nav and tab-based section switcher down to 375 px mobile.
SectionAIPanel calls enhanceSection() in aiEnhance.jsaiResumeData snapshot in context is updated794×1123 px <div> renders the template at native A4 resolution with no CSS transformsreact-to-print injects @page { size: A4; margin: 0 } and opens the system dialog — fully text-selectablehtml2canvas rasterises at 2× DPR, embeds into jsPDF, triggers .save()resume-builder/
├── public/
│ └── docs.html # This documentation page (printable)
├── src/
│ ├── components/
│ │ ├── AI/
│ │ │ ├── AICompareView.jsx # Side-by-side compare modal
│ │ │ ├── AISuggestions.jsx # Per-section tip panel
│ │ │ └── SectionAIPanel.jsx # Enhance + diff + accept UI
│ │ ├── Forms/ # 6 section forms
│ │ ├── Layout/
│ │ │ ├── Navbar.jsx # Responsive nav + hamburger
│ │ │ └── Sidebar.jsx # Section nav + Reset/Sample
│ │ ├── Preview/
│ │ │ ├── A4Container.jsx # Scaled 794×1123 px wrapper
│ │ │ └── ResumePreview.jsx # Toolbar + live preview
│ │ └── Templates/ # 10 templates (lazy-loaded)
│ ├── context/
│ │ ├── ResumeContext.jsx # All resume state + mutations
│ │ ├── ThemeContext.jsx # Dark / light mode
│ │ └── ToastContext.jsx # Global notifications
│ ├── data/sampleData.js # Demo resume data
│ ├── pages/ # Home / Builder / Templates / Preview
│ └── utils/
│ ├── aiEnhance.js # Groq API + rate limiting
│ ├── pdfExport.js # html2canvas + jsPDF
│ └── storage.js # localStorage helpers
├── .github/workflows/deploy.yml # Auto-deploy to GitHub Pages
└── index.html # Entry + meta / OG tags# 1. Clone
git clone https://github.com/Snehal-Kanzariya/resume-builder.git
cd resume-builder
# 2. Install dependencies
npm install
# 3. (Optional) Add Groq API key
echo "VITE_GROQ_API_KEY=gsk_your_key_here" > .env
# 4. Start dev server
npm run dev # → http://localhost:5173| Command | Description |
|---|---|
npm run dev | Start Vite dev server with HMR |
npm run build | Build for production to dist/ |
npm run preview | Preview the production build locally |
npm run lint | Run ESLint across all source files |
| Shortcut | Action |
|---|---|
Ctrl + P | Open browser print dialog (also saves as PDF) |
Ctrl + S | Show auto-save confirmation toast |
The app is automatically deployed to GitHub Pages via GitHub Actions on every push to main.
| URL | Description |
|---|---|
| snehal-kanzariya.github.io/resume-builder/ | Live application |
| …/docs.html | This documentation (printable PDF) |
npm run build
# Push dist/ to gh-pages branch (handled automatically by CI)git checkout -b feat/your-featuregit commit -m "feat: add your feature"git push origin feat/your-featureMIT © 2026 Snehal Kanzariya
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files, to deal in the software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software.