AI-Powered Resume Builder & ATS Optimizer
Craft job-winning resumes with AI-powered ATS optimization. 100% free & open source.
✨ Live Demo • 📖 Documentation • 🐛 Report Bug • 💡 Request Feature
Landing Page
ATS Scanner
Resume Editor
- Drag & Drop Sections – Reorder resume sections effortlessly
- Live A4 Preview – See changes in real-time as you type
- Multiple Templates – Choose from professional, ATS-friendly designs
- Custom Sections – Add publications, volunteering, or any custom section
- Smart Rewrite – Enhance any bullet point or summary with one click
- Context-Aware – AI understands resume-specific writing best practices
- Gemini Models – Powered by Google's latest AI models
- Match Score – See how well your resume matches a job description
- Missing Keywords – Identify critical skills you're missing
- Smart Suggestions – Get AI-rewritten content tailored to the job
- Weak Phrase Detection – Find and fix generic or weak language
- Import PDF/DOCX – Parse existing resumes automatically with AI
- Export to PDF – Download ATS-friendly PDFs with real text (not images)
- Clickable Links – Email, LinkedIn, GitHub links work in exported PDFs
- Bring Your Own Key (BYOK) – Use your own free Gemini API key
- No Data Storage – Your resume stays in your browser
- Open Source – Full transparency, audit the code yourself
| Category | Technology |
|---|---|
| Framework | React 19 with TypeScript |
| Build Tool | Vite 6 |
| Styling | Tailwind CSS (via CDN) |
| AI | Google Gemini API (@google/genai) |
| PDF Export | @react-pdf/renderer |
| DOCX Parsing | mammoth.js |
| Icons | Material Symbols Rounded |
- Node.js v18 or higher
- npm (comes with Node.js)
- Gemini API Key (free) – Get one here
-
Clone the repository
git clone https://github.com/Vrun-design/Civvi.git cd Civvi -
Install dependencies
npm install
-
Configure API Key (Optional)
Create a
.env.localfile in the project root:API_KEY=your_gemini_api_key_here
💡 Tip: If you skip this step, the app will prompt you to enter your API key when you use AI features. The key is stored locally in your browser.
-
Start the development server
npm run dev
-
Open your browser
Navigate to
http://localhost:5173
- Click "Get Started" on the landing page
- Fill in your information in the editor sidebar
- Watch the live preview update in real-time
- Use the AI Rewrite button (✨) to enhance your content
- Switch to the "Optimizer" tab in the sidebar
- Paste the job description you're applying for
- Click "Analyze Resume"
- Review your match score and suggestions
- Click "Apply All Suggestions" to update your resume
- Click "Export PDF" in the header
- Your resume downloads as a clean, ATS-friendly PDF
- Links are clickable and text is selectable (for ATS systems)
Civvi/
├── App.tsx # Main application component
├── index.tsx # React entry point
├── types.ts # TypeScript type definitions
├── components/
│ ├── LandingPage.tsx # Hero section and feature showcase
│ ├── ResumeEditor.tsx # Section editing forms
│ ├── ResumePreview.tsx # Live HTML preview wrapper
│ ├── AtsOptimizer.tsx # Job description analyzer
│ ├── ApiKeyModal.tsx # BYOK modal component
│ ├── icons.tsx # Icon components
│ └── templates/ # HTML preview templates
│ ├── TemplateA.tsx # Modern template
│ └── TemplateB.tsx # Modern template
├── services/
│ ├── geminiService.ts # AI API integration
│ ├── pdfGeneratorReactPDF.tsx # PDF export entry
│ └── pdf/
│ ├── PDFTemplateA.tsx # PDF template A
│ └── PDFTemplateB.tsx # PDF template B
└── index.html # HTML entry with CDN scripts
| Variable | Description | Required |
|---|---|---|
API_KEY |
Your Gemini API key | No (can use BYOK instead) |
- Create a new component in
components/templates/for the HTML preview - Create a matching PDF template in
services/pdf/ - Register both in the template selector in
App.tsx
npm run buildThis creates optimized static files in the dist/ directory.
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Add more resume templates
- Implement LinkedIn profile import
- Add resume sharing functionality
- Create a resume scoring history
- Add multi-language support (i18n)
- Implement offline mode with service workers
This project is licensed under the MIT License – see the LICENSE file for details.
- Google Gemini – For the powerful AI capabilities
- React PDF – For seamless PDF generation
- Tailwind CSS – For the beautiful styling utilities
- Issues: GitHub Issues
- Discussions: GitHub Discussions
Built to help you pass unfair ATS systems
If you find this project useful, please consider giving it a ⭐