ResumePilot is a portfolio-ready AI Resume Builder SaaS frontend built with React, Vite, Tailwind CSS, React Router, Lucide React, and local browser persistence.
The project demonstrates a complete SaaS-style product experience: marketing pages, pricing, authentication UI, a resume builder workflow, live resume preview, client-side export, templates, dashboard screens, and dark/light mode support.
- SaaS landing page with a focused product hero.
- Feature cards, trust stats, testimonials, and conversion sections.
- Responsive layout for desktop, tablet, and mobile.
- Monthly and yearly billing toggle.
- Three pricing plans: Free, Pro, and Career Plus.
- Feature comparison table and FAQ section.
- Login, register, and forgot password pages.
- Reusable authentication layout and input components.
- Password visibility toggle, validation states, and social login UI placeholders.
- Builder page at
/builder. - Resume form and live preview layout.
- Personal information, summary, work experience, education, skills, and projects.
- Dynamic add/remove behavior for repeatable sections.
- Template selector.
- Export actions for
PDF,DOCX, andDOC. - Reset sample data action.
- Automatic local save through browser
localStorage.
- PDF export generated from the current resume content.
- DOCX export generated through a lightweight client-side OpenXML utility.
- DOC export generated from structured Word-compatible HTML.
- Browser-only export flow with no backend requirement.
- Workspace overview header.
- Resume statistics cards.
- Recent resumes list.
- Resume cards with ATS score, status, template, and update date.
- Upgrade banner, resume health progress cards, and activity feed.
- Templates page at
/templates. - Template search and category filters.
- Template cards with ATS score display.
- Preview modal.
- Use Template action linked to the builder route.
- Dark and light mode.
- Saved theme preference through
localStorage. - Theme toggle in the navigation.
- Improved 404 page.
- Lazy loading for pages.
- Loader component.
- Accessibility focus states.
- Reduced motion support.
- SEO meta tags and Open Graph data.
- React
- Vite
- Tailwind CSS
- React Router DOM
- Lucide React
- React state
- React Context
- Browser
localStorage - Browser Blob downloads
- Custom client-side PDF export utility
- Custom client-side DOCX OpenXML export utility
- Word-compatible DOC HTML export
- Mock product data
| Route | Purpose |
|---|---|
/ |
SaaS landing page |
/pricing |
Pricing plans and feature comparison |
/templates |
Resume template gallery |
/login |
Login screen |
/register |
Account creation screen |
/forgot-password |
Password recovery UI |
/dashboard |
User dashboard and resume overview |
/builder |
Resume builder with live preview and export actions |
/builder?template=<id> |
Builder route with selected template reference |
* |
Polished 404 page |
The builder currently supports these editable resume sections:
- Personal Information
- Professional Summary
- Work Experience
- Education
- Skills
- Projects
Data is stored locally in the browser to simulate a saved user workspace without requiring a backend.
The builder includes client-side resume export from the live resume data.
| Format | Behavior |
|---|---|
PDF |
Generates a downloadable PDF resume file from the current builder content. |
DOCX |
Generates a Microsoft Word-compatible .docx file using a lightweight OpenXML export utility. |
DOC |
Generates a Word-compatible .doc file from structured resume HTML. |
The export feature runs fully in the browser and does not require a backend service. It is designed as a portfolio-ready implementation for document export workflows inside a SaaS resume builder.
npm install
npm run devProduction build:
npm run build
npm run previewnpm run dev
npm run build
npm run previewResumePilot/
├── public/
│ └── logo.svg
├── src/
│ ├── components/
│ │ ├── auth/
│ │ ├── builder/
│ │ │ ├── BuilderLayout.jsx
│ │ │ ├── ExportActions.jsx
│ │ │ └── ResumePreview.jsx
│ │ ├── dashboard/
│ │ ├── home/
│ │ ├── layout/
│ │ ├── pricing/
│ │ ├── templates/
│ │ └── ui/
│ ├── context/
│ ├── data/
│ ├── hooks/
│ ├── pages/
│ ├── routes/
│ ├── styles/
│ ├── utils/
│ │ └── exportResume.js
│ ├── App.jsx
│ └── main.jsx
├── index.html
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── vite.config.js
└── README.mdResumePilot is best presented as an AI Resume Builder SaaS frontend and career productivity product.
It is suitable for showcasing:
- SaaS landing page design.
- Product-focused frontend architecture.
- Authentication UI workflows.
- Pricing page UX.
- Dashboard UI design.
- Controlled forms and dynamic state.
- Live document preview.
- Client-side PDF/DOCX/DOC export.
- Template browsing experience.
- Local persistence.
- Dark/light theme support.
This project is frontend-centered.
It does not include:
- A real backend database.
- Real AI resume generation.
- Real authentication.
- Payment processing.
- Server-side resume storage.
- Account permissions.
- Production analytics tracking.
Product behavior is simulated locally to demonstrate UI workflows, state management, resume-building interaction design, client-side document export, and SaaS product thinking.
- Landing page hero section.
- Pricing page with billing toggle.
- Login and register screens.
- Dashboard overview.
- Resume builder with live preview and export actions.
- Exported PDF/DOCX/DOC examples.
- Experience and education dynamic sections.
- Templates gallery.
- Template preview modal.
- Dark mode view.
- 404 page.
ResumePilot demonstrates the ability to design and implement a polished SaaS frontend with marketing pages, authentication UI, pricing flows, a dynamic resume builder, live preview rendering, PDF/DOCX/DOC export, template browsing, dashboard workflows, local persistence, and responsive product-level UI execution.