Skip to main content

​
Quickstart Guide

This guide will help you set up CV Builder and create your first professional resume in just a few minutes.
Time to complete: 5-10 minutesWhat you’ll need: Node.js 18.17+, a package manager (pnpm/npm/yarn), and optionally a Firebase project for cloud features

​
Quick Setup

1

Clone the Repository

Get the CV Builder source code from GitHub:
git clone https://github.com/tariqahmaad/CV-Builder.git
cd CV-Builder
The repository is named CV-Builder with a hyphen, not an underscore.
2

Install Dependencies

Install all required packages using your preferred package manager:
pnpm install
This will install all dependencies including:
  • Next.js 16.1.6 with React 19.2.3
  • Firebase 12.8.0 for backend services
  • Tailwind CSS 4.x for styling
  • React Hook Form & Zod for form management
  • @react-pdf/renderer for PDF export
Installation typically takes 1-2 minutes depending on your internet connection.
3

Start Development Server

Launch the development server:
pnpm dev
# or npm run dev / yarn dev
You should see output similar to:
▲ Next.js 16.1.6
- Local:        http://localhost:3000
- Network:      http://192.168.1.x:3000

✓ Ready in 2.3s
4

Create Your First Resume

You can start building your resume immediately in Guest Mode (no authentication required):
  1. Click “Start Building” on the landing page
  2. You’ll be redirected to /editor
  3. Fill in your personal information in the left panel
  4. Watch the real-time preview update on the right
  5. Add experience, education, skills, and other sections
  6. Export as PDF when ready
In Guest Mode, all data is stored in your browser’s localStorage. No account is needed to create and export resumes.

​
Understanding the Editor

​
Layout Overview

The editor page (/editor) is split into two main panels: 
┌─────────────────────────────────────────────────┐
│  Header (Template Selector, Actions)            │
├──────────────────────┬──────────────────────────┤
│                      │                          │
│  Form Panel (Left)   │  Preview Panel (Right)   │
│                      │                          │
│  - Personal Info     │  - Real-time Preview     │
│  - Experience        │  - Template Rendering    │
│  - Education         │  - Section Visibility    │
│  - Skills            │                          │
│  - Projects          │                          │
│  - etc.              │                          │
│                      │                          │
└──────────────────────┴──────────────────────────┘

​
Key Features to Try

Try different resume templates:
  • Default: Traditional, clean layout
  • Rhyhorn: Bold, modern design
  • Nexus: Minimalist, ATS-focused
Switch templates from the header dropdown - your data remains intact across all templates.
  • Reorder sections: Drag and drop section headers to change their order
  • Hide sections: Toggle visibility to exclude sections from your resume
  • Add entries: Use the ”+” button to add multiple experiences, education entries, etc.
The personal information section is always displayed first and cannot be hidden.
Your changes are automatically saved to localStorage as you type. There’s no manual save button needed in Guest Mode.
lib/backend/cvDraftStorage.ts
// Draft saved automatically every few seconds
export function saveDraft(data: CVData): void {
  localStorage.setItem('cv-draft', JSON.stringify(data));
}
Click the “Export PDF” button in the header to generate a professional PDF resume.The PDF is generated using @react-pdf/renderer with:
  • Proper A4 page formatting
  • Professional typography and spacing
  • ATS-friendly structure
  • Support for all three templates

​
Optional: Enable Cloud Features

To unlock version control and multi-device sync, set up Firebase:
1

Create Firebase Project

  1. Go to Firebase Console
  2. Click “Add project”
  3. Name your project (e.g., “cv-builder-app”)
  4. Disable Google Analytics (optional)
  5. Click “Create project”
2

Enable Services

In your Firebase project:Authentication:
  • Go to Build > Authentication
  • Click “Get started”
  • Enable Email/Password provider
Firestore Database:
  • Go to Build > Firestore Database
  • Click “Create database”
  • Start in production mode
  • Choose your preferred location
Storage (for profile images):
  • Go to Build > Storage
  • Click “Get started”
  • Start in production mode
3

Get Configuration

  1. Go to Project Settings (gear icon)
  2. Scroll to Your apps
  3. Click the web icon (</>)
  4. Register your app (e.g., “CV Builder Web”)
  5. Copy the Firebase configuration object
4

Configure Environment Variables

Create a .env.local file in the project root:
.env.local
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key_here
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
Never commit .env.local to version control. It’s already in .gitignore.
These variables are used in lib/firebase.ts:
lib/firebase.ts
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};
5

Restart Development Server

Stop the server (Ctrl+C) and restart it to load the new environment variables:
pnpm dev

​
Using Cloud Features

Once Firebase is configured:

​
Sign Up / Sign In

  1. Click “Sign In” in the navigation
  2. Create an account with email and password
  3. Your guest mode data will be synced to the cloud

​
Version Control

Save and manage multiple versions of your resume:
lib/cvService.ts
// Save a named version
export async function saveVersion(
  userId: string,
  data: CVData,
  input: CVVersionInput,
  isAutoSave: boolean = false
): Promise<string | null>

// Restore a previous version
export async function restoreVersion(
  userId: string, 
  versionId: string
): Promise<boolean>
How to use:
  1. Click “Versions” in the editor header
  2. Click “Save Version”
  3. Name your version (e.g., “Software Engineer - FAANG”)
  4. Add optional description and tags
  5. Restore any previous version with one click
An automatic backup is created before every restore operation to prevent data loss.

​
Multi-Device Sync

Sign in on any device to access your resumes. Changes sync automatically through Firestore.

​
Next Steps

Installation Guide

Detailed setup instructions with troubleshooting

Templates

Learn about available resume templates

User Guide

Complete guide to creating resumes

API Reference

Explore the CV service API

​
Common Quick Tips

In the Personal Information section, click the profile photo placeholder to upload an image. You’ll be able to crop it before saving.
Yes! You can reorder sections by dragging section headers. The personal information section always stays first.
Click the eye icon next to any section header to hide it from the preview and PDF export.
Yes, in Guest Mode the app works completely offline using localStorage. Cloud features require an internet connection.
When signed in, go to /resumes to view all your saved resumes and create new ones. Each resume has its own version history.

Build docs developers (and LLMs) love

Get started for freeTalk to us