Skip to main content

​
Get started

This guide will help you install and run Resume Builder locally, then create your first professional resume.
1

Clone the repository

First, clone the Resume Builder repository to your local machine:
git clone <your-repo-url>
cd resume_builder
Replace <your-repo-url> with the actual URL of your Resume Builder repository.
2

Install dependencies

Install the required dependencies using pnpm (recommended) or npm:
pnpm install
Or with npm:
npm install
pnpm is faster and more disk-efficient than npm. Install it globally with npm install -g pnpm if you haven’t already.
3

Start the development server

Launch the development server:
pnpm dev
The application will be available at http://localhost:3000.
The dev server includes hot module replacement (HMR), so changes you make to the code will be reflected immediately in the browser.

​
Build your first resume

Now that Resume Builder is running, let’s create your first resume.

​
Choose a template

When you first open the app, you’ll see the template selector at the top of the page. Resume Builder offers three professional templates:

Classic

Traditional professional layout with serif fonts

Modern

Two-column design with blue accent sidebar

Minimal

Clean, spacious design with centered headers
Click on any template to select it. The preview will update instantly to show your chosen template.
You can switch templates at any time. All your data is preserved when changing templates.

​
Add your information

Fill out your resume information section by section:
1

Personal information

Start with the basics in the “Personal Information” card:
src/types.ts
export type PersonalInfo = {
  fullName: string;
  email: string;
  phone: string;
  website: string;
  linkedin: string;
  github: string;
  location: string;
  jobTitle: string;
};
Fill in your name, contact details, job title, and professional links (LinkedIn, GitHub, portfolio website).
2

Professional summary

Write a brief overview of your professional background in the “Professional Summary” section. This should be 2-3 sentences highlighting your key qualifications and career goals.
3

Work experience

Add your work history by clicking “Add Experience” in the “Work Experience” card:
src/hooks/useResume.tsx
const addExperience = () => {
  setResumeData((prev) => ({
    ...prev,
    experience: [
      ...prev.experience,
      {
        id: crypto.randomUUID(),
        company: '',
        position: '',
        location: '',
        startDate: '',
        endDate: '',
        current: false,
        description: '',
      },
    ],
  }));
};
For each position, include:
  • Company name
  • Position/title
  • Location
  • Start and end dates (or check “Current Position”)
  • Description of your responsibilities and achievements
4

Education, skills, and projects

Continue filling out the remaining sections:
  • Education: Add your degrees and certifications
  • Skills: List your technical and soft skills
  • Projects: Showcase your portfolio with GitHub and live URLs
5

Optional: Add custom sections

Need to add Awards, Volunteering, or Certifications? Use the “Custom Sections” feature:
src/hooks/useResume.tsx
const addCustomSection = (title: string) => {
  setResumeData((prev) => ({
    ...prev,
    customSections: [
      ...prev.customSections,
      {
        id: crypto.randomUUID(),
        title,
        items: [],
      },
    ],
  }));
};
Click “Add Custom Section”, enter a title, and start adding items.
All your data is automatically saved to browser localStorage as you type. You won’t lose your work even if you close the browser.

​
Reorder sections

Customize the order of your resume sections using the Section Order Editor:
  1. Find the “Section Order” card near the top of the editor
  2. Use the up/down arrows to reorder sections
  3. The preview updates instantly to reflect your changes
src/hooks/useResume.tsx
const reorderSections = (newOrder: SectionId[]) => {
  setResumeData((prev) => ({
    ...prev,
    sectionOrder: newOrder,
  }));
};

​
View on mobile

On mobile devices, the live preview is hidden to save space. Use the floating eye icon button in the bottom-right corner to open a full-screen preview modal.
The floating preview button appears only on screens smaller than 768px. On desktop, the preview is always visible alongside the editor.

​
Export your resume

Once you’re happy with your resume, export it as a PDF:
1

Click Export PDF

Click the “Export PDF” button in the header:
src/routes/index.tsx
const handlePrint = () => {
  window.print();
};
This opens your browser’s print dialog.
2

Configure print settings

In the print dialog:
  • Select “Save as PDF” as the destination
  • Ensure margins are set appropriately
  • Disable headers and footers for a cleaner look
3

Save your PDF

Click “Save” to download your resume as a PDF file.
You can also export your resume data as JSON using the “Export Data” button. This creates a backup you can import later or share with others.

​
Next steps

Congratulations! You’ve created your first resume. Here are some next steps:

Customize templates

Learn how to modify templates and create your own designs

Development guide

Explore the codebase and contribute to Resume Builder

Try different templates

Experiment with all three templates to find the best fit for your industry

Backup your data

Export your resume data as JSON for safekeeping

​
Building for production

When you’re ready to deploy Resume Builder: 
# Build the production bundle
pnpm build

# Preview the production build locally
pnpm preview
The production build is optimized for performance and includes minification, tree-shaking, and other optimizations.

Build docs developers (and LLMs) love

Get started for freeTalk to us