Please generate a resume builder and checker like user can upload resume, type a role, type a skills as input and all the step i am providing you Resume Builder Flow:
Step 1: User enters job title, industry, or job description.
Step 2: Based on input, the resume builder suggests relevant resume sections (Skills, Experience, Education).
Step 3: User fills in the details.
Step 4: Builder provides feedback on ATS optimization.
Step 5: User downloads the final resume in the appropriate format.
Resume Checker Flow:
Step 1: User uploads an existing resume or pastes content.
Step 2: Optionally, user inputs job description for comparison.
Step 3: Checker analyzes the resume and generates a report.
Step 4: User receives a score along with recommendations for improvement.
Step 5: User makes changes based on feedback and rechecks the resume (if desired).
I'll help you build a comprehensive resume builder and checker application. This is a multi-feature project, so let me first generate a design vision and create a structured plan.
Now let me start building the application. I'll create a modern, dark-themed design with teal accent colors inspired by the design brief. Let me first update the globals.css, then build all the components.
Now let me update the layout metadata and create all the necessary components:
Now let me create the Resume Builder flow with all its steps:
Now let me create the Resume Checker flow:
Now let me create the Resume Preview component with download functionality:
I've built a complete Resume Builder and Checker application with all the features you requested. Here's what's included:
Resume Builder Flow:
Resume Checker Flow:
The app features a modern dark teal theme, responsive design, step progress indicators, and reusable components throughout.
Let me read through the existing codebase to give you a complete overview of all the flows in the ResumeAI product.
Based on my complete review of the codebase, here's a comprehensive overview of all the existing flows in the ResumeAI product:
/app/page.tsx)Purpose: Entry point showcasing both tools with feature highlights and navigation.
Components:
/app/builder/page.tsx)A 5-step wizard for creating resumes from scratch:
| Step | Component | Purpose |
|---|---|---|
| Step 1: Job Info | JobInputStep | Enter job title (with quick-select for popular roles), industry, and optional job description for keyword matching |
| Step 2: Sections | SectionSelectorStep | Select resume sections (Personal Info, Summary, Experience, Education, Skills, Projects, Certifications, Achievements) with role-based recommendations and suggested skills |
| Step 3: Details | DetailsFormStep | Fill in personal info, professional summary, work experience (with achievements), education, and skills. Includes ability to add suggested skills with one click |
| Step 4: Review | ATSFeedbackStep | ATS optimization score (0-100), issues categorized by type (error/warning/info), keyword analysis showing found vs missing keywords, improvement suggestions |
| Step 5: Download | ResumePreview | Live resume preview with Print/Save as PDF and Download TXT options |
Data Types:
ResumeData: Personal info, summary, experience[], education[], skills[], certifications[], projects[]JobInfo: title, industry, descriptionATSFeedback: score, issues[], suggestions[], keywords (found/missing)/app/checker/page.tsx)A 3-step wizard for analyzing existing resumes:
| Step | Component | Purpose |
|---|---|---|
| Step 1: Upload | UploadStep | Upload resume file (TXT, PDF, DOC, DOCX) via drag-and-drop or file picker, OR paste content directly in a text area |
| Step 2: Job Match | JobComparisonStep | Optional: Add job description for keyword comparison. Can skip this step |
| Step 3: Results | AnalysisReport | Comprehensive analysis report with circular score visualization |
Analysis Report Features:
Detailed breakdown by category with individual progress bars:
| Component | Location | Purpose |
|---|---|---|
Header | /components/header.tsx | Navigation with logo, links to Builder/Checker, mobile menu |
ResumePreview | /components/resume-preview.tsx | Formatted resume display with download options |
/lib/resume-store.ts)| Function | Purpose |
|---|---|
suggestedSkills | Maps job titles to relevant skill arrays (Software Engineer, Data Scientist, Product Manager, etc.) |
suggestedSections | Returns recommended resume sections based on job title |
generateATSFeedback | Analyzes ResumeData and returns score, issues, suggestions, and keyword analysis |
analyzeResume | Analyzes raw resume content string for the Checker flow |
extractKeywords | Extracts important keywords from job descriptions for matching |
HOME PAGE
│
├─── BUILD YOUR RESUME ────────────────────────────────────────┐
│ │ │
│ ├── Step 1: Enter Job Title/Industry/Description │
│ ├── Step 2: Select Sections & Skills │
│ ├── Step 3: Fill Personal Info, Experience, Education │
│ ├── Step 4: View ATS Score & Fix Issues │
│ └── Step 5: Preview & Download (TXT/PDF) │
│ │
└─── CHECK EXISTING RESUME ────────────────────────────────────┘
│
├── Step 1: Upload File or Paste Content
├── Step 2: Add Job Description (Optional)
└── Step 3: View Analysis Report & Recommendations
└── Recheck or Upload New