Loading content…
Loading content…
Build a client-side resume builder web application. You will structure multi-step form wizards, manage dynamic arrays for experiences, write live preview renders, and compile downloadable PDF layouts.
Design an interactive CV editor where developers input details, experience records, and education dynamically. The app renders a live side-by-side preview and compiles printable PDFs.
Aspiring UI engineers who need to master complex form layouts, react state management of nested arrays, client document compilation pipelines, and print stylesheets.
Business Objective
Building a resume requires a clean, step-by-step wizard. Users want to dynamically add/remove multiple job histories, custom tags, and education blocks. The form fields must validate dynamically (e.g. valid emails, start/end dates check). The layout builder must offer preset templates (Modern, Classic, Professional) and let users download standard-compliant PDFs directly from the browser.
Core Features List
Next.js & React 19 & TypeScript
@react-pdf/renderer or CSS @media print
TailwindCSS & Lucide icons
resume-builder/
├── app/
│ ├── page.tsx # Primary editing grid workspace
│ └── layout.tsx
├── components/
│ ├── FormWizard/
│ │ ├── StepPersonal.tsx # Details inputs
│ │ ├── StepExperience.tsx # Work lists
│ │ └── StepEducation.tsx # Education inputs
│ ├── Preview/
│ │ ├── LivePreview.tsx # Preview pane
│ │ ├── TemplateClassic.tsx # Classic preset styling
│ │ └── TemplateModern.tsx # Modern layout styling
│ └── ui/
│ ├── WizardTabs.tsx # Step triggers
│ └── InputGroup.tsx # Reusable fields
├── lib/
│ ├── validation.ts # Zod validation models
│ └── templates.ts # Styles definitions
└── types/
└── resume.ts # Interface specifications`FormWizard` Component
A central state coordinator. Holds values for sub-steps, tracks validation flags, and handles multi-step flow navigations.
`StepExperience` Component
Manages an array of experience blocks. Lets users append new entries, remove indexes, and fill fields dynamically.
`LivePreview` Component
Renders a visual page representation side-by-side with inputs. Scales using CSS transforms to fit split-view panels.
Request body payload:
{
"title": "My Software Engineer Resume",
"templateId": "modern-classic",
"personalInfo": {
"fullName": "Jane Doe",
"email": "jane@example.com",
"phone": "+1 555-123-4567"
},
"experiences": [
{
"id": "exp-1",
"company": "Tech Corp",
"position": "Frontend Engineer",
"startDate": "2024-01-01",
"endDate": "Present",
"highlights": "Led React Migration project"
}
]
}
Response (201 Created):
{
"success": true,
"resumeId": "cv_77889"
}CREATE TABLE resumes (
id VARCHAR(50) PRIMARY KEY,
user_id VARCHAR(50) NOT NULL,
title VARCHAR(150) NOT NULL DEFAULT 'Untitled Resume',
template_id VARCHAR(50) NOT NULL DEFAULT 'classic',
personal_info JSONB NOT NULL DEFAULT '{}',
experience JSONB NOT NULL DEFAULT '[]',
education JSONB NOT NULL DEFAULT '[]',
skills JSONB NOT NULL DEFAULT '[]',
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
CREATE INDEX idx_resumes_user ON resumes(user_id);Build multi-step tab flows. Program basic input cards and next/back buttons.
Develop hooks to handle push/pop mutations on nesting array inputs (e.g. jobs, schools lists).
Connect form states directly to a graphic preview column. Implement CSS scaling filters to preview full pages.
Implement templates configuration. Create style bindings swapping layout components on the fly.
Incorporate client PDF print engines or custom CSS media print setups to compile A4 documents cleanly.
key={idx} on mutable lists. When jobs are deleted, inputs swap values, breaking input focus hooks. Use unique UUID hashes instead.💡 Unique ID Preservation: Always assign unique identifiers (`crypto.randomUUID()`) to dynamically-added experience items as soon as they are added. This guarantees robust mapping and prevents form key bugs.
💡 Avoid Heavy Client Packages: Heavy libraries like pdfmake or react-pdf bloat loading bundles. Try styling with Tailwind, setting print classes (`print:hidden`, `print:block`), and triggering `window.print()` to let browsers leverage native print features.
Click on any question to view the recommended architectural response for technical interviews.