https://github.com/umarsiddique010/resume-craft-react

Client-side resume builder built with React 19 and Vite. Features 3 professional templates, ATS-friendly PDF export, real-time preview, custom fonts, full Vitest test suite, GitHub Actions CI, and Vercel CD.
https://github.com/umarsiddique010/resume-craft-react

cv-buider cv-builder javascipt javascript react react-hook react-hooks responsive-design resume-builder resume-creator resume-template resume-templates resume-website vitejs

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/umarsiddique010/resume-craft-react
Owner: umarSiddique010
Created: 2025-05-14T07:31:12.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2026-04-03T11:05:08.000Z (3 months ago)
Last Synced: 2026-04-03T16:27:49.320Z (3 months ago)
Topics: cv-buider, cv-builder, javascipt, javascript, react, react-hook, react-hooks, responsive-design, resume-builder, resume-creator, resume-template, resume-templates, resume-website, vitejs
Language: JavaScript
Homepage: https://resume-craft-react.vercel.app/
Size: 7.24 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Resume Craft

### Craft Your Perfect Resume.

A production-grade React 19 resume builder with multiple templates,
ATS-friendly output, PDF export, and a fully tested codebase.

View Live Production Deployment
  •
Local Setup
  •
Repository
  •
Report an Issue

[![React](https://img.shields.io/badge/React_19-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://react.dev/)
[![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)
[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[![React Router](https://img.shields.io/badge/React_Router_v7-CA4245?style=for-the-badge&logo=react-router&logoColor=white)](https://reactrouter.com/)
[![React PDF](https://img.shields.io/badge/@react--pdf-FF0000?style=for-the-badge&logo=adobeacrobatreader&logoColor=white)](https://react-pdf.org/)
[![Vitest](https://img.shields.io/badge/Vitest-6E9F18?style=for-the-badge&logo=vitest&logoColor=white)](https://vitest.dev/)
[![Husky](https://img.shields.io/badge/Husky_Hooks-42B983?style=for-the-badge&logo=git&logoColor=white)](https://typicode.github.io/husky/)
[![Lint-Staged](https://img.shields.io/badge/Lint--Staged-1572B6?style=for-the-badge&logo=git&logoColor=white)](https://github.com/lint-staged/lint-staged)
[![Vercel](https://img.shields.io/badge/Vercel_Deployment-000000?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com/)
[![CI/CD](https://img.shields.io/badge/CI%2FCD-GitHub_Actions_+_Vercel-2088FF?style=for-the-badge&logo=githubactions&logoColor=white)](https://github.com/umarSiddique010/resume-craft-react/actions)

## Overview

**Resume Craft** is a fully client-side resume builder built with **React 19** and **Vite**. Users instantly generate a professional PDF resume — **no backend, no login, and no data storage**. Since **privacy matters**, all data stays in the browser and never leaves the user's device.

The project is engineered with a focus on code quality: a strict **Context + Reducer** state architecture, strong **Vitest** coverage across components, templates, and reducer logic, an automated **Husky + Lint-Staged** pre-commit pipeline, and a **GitHub Actions CI/CD** pipeline that gates every production deploy behind passing tests and builds.

## Application Preview

![Resume Craft Live](./public/app-screenshot.webp)

## Features & Architecture

### 1. Four Professional Resume Templates

- **Bold Accent** — Modern two-column layout with a dark navy header, gold accent elements, and skill badges — set as the default template
- **Standard** — Clean two-column layout with an olive sidebar and profile picture support
- **Classic** — Traditional single-column design with a centered header
- **ATS-Friendly** — Text-only, parser-safe layout built with `@react-pdf/renderer` to pass automated applicant tracking systems

### 2. Client-Side PDF Generation

PDF export runs entirely in the browser — no server round-trips, no file uploads.

- **`@react-pdf/renderer`** handles the ATS template as a true PDF document with preserved text layers
- **`html2pdf.js` + `html2canvas`** captures the live DOM preview for high-fidelity layout export on Bold Accent, Standard, and Classic templates
- **6 Custom Font Choices** — Roboto, Google Sans Code, Poppins, Playwrite NZ, Delius Swash Caps, Rubik Distressed

### 3. Global State: Context + Reducer

All resume data lives in a single state tree managed by `useReducer` inside `InputFieldContext`. No Redux, no Zustand — just clean React primitives.

- **Typed Action Constants** — Every section (Work, Education, Skills, Projects, etc.) has its own scoped `ADD / UPDATE / REMOVE / REMOVE_ALL` action types defined in `resumeTypes.js`
- **Pure Reducer** — `resumeReducer.js` is a single pure function with zero side effects, making it fully deterministic and easy to test
- **Live Preview** — `DisplayTemplate` consumes context directly, so the resume preview re-renders in real time as the user types

```
User types in form
↓
dispatchField({ type: UPDATE_WORK_EXPERIENCE_FIELD, payload })
↓
resumeReducer → new state
↓
InputFieldContext re-renders consumers
↓
updates instantly
↓
User clicks Download → PDF generated client-side
```

### 4. Testing & Quality Assurance

This project treats testing as a first-class citizen, not an afterthought.

- **Unit Testing** — All components (WelcomePage, HomePage, all UserInput sections, all four templates) and reducer logic are tested using **Vitest** and **React Testing Library**
- **Reducer Tests** — Comprehensive test cases validate the `resumeReducer` across core action paths including add, update, remove, and key edge cases.
- **Mocking Strategy** — External dependencies like `@react-pdf/renderer`, `react-router-dom`, and `html2pdf.js` are mocked to ensure isolated, deterministic tests

### 5. CI/CD Pipeline

Every push to `main` triggers the full pipeline:

- **Quality** — Runs `npm run check` (ESLint + Prettier) on every push and PR
- **Test** — Runs `npm run coverage` (Vitest); build job won't start until this passes
- **Build** — Runs `npm run build` only after tests pass (`needs: test`)
- **Deploy** — Vercel auto-deploys to production only after all CI jobs pass — no broken build ever reaches production
- **Git Hooks (Husky + Lint-Staged)** — ESLint and Prettier enforced locally on pre-commit, catching issues before they reach CI

### 6. Performance Optimizations

- **Route-level Code Splitting** — All routes are lazy-loaded via `React.lazy` + `Suspense`, keeping the initial bundle minimal
- **Manual Chunk Splitting** — `@react-pdf/renderer`, `react-icons`, and vendor libraries are split into separate chunks via Vite's `manualChunks`
- **Font Preloading** — Critical fonts preloaded in `index.html` via ``
- **Local Fonts Only** — All fonts are self-hosted `woff2` files; no external CDN dependency

## Tech Stack

## Local Development

### Prerequisites

- Node.js 18+ (LTS recommended)
- npm

### 1. Clone the Repository

```bash
git clone https://github.com/umarSiddique010/resume-craft-react.git

cd resume-craft-react
```

### 2. Install Dependencies

```bash
npm install
```

### 3. Run Development Server

```bash
npm run dev
```

Open [http://localhost:5173](http://localhost:5173) to view the application.

### 4. Running Tests

```bash
# Run full test suite
npm test

# Run with interactive UI
npm run test:ui

# Generate coverage report
npm run coverage
```

### 5. Lint & Format

```bash
# Check lint + format together
npm run check

# Auto-fix lint issues
npm run lint:fix

# Auto-format all files
npm run format
```

---

## Project Structure

```text
src
├── assets/ # Images, icons, fonts
├── components/
│ ├── DisplayTemplate/ # Resume templates (Bold Accent, Standard, Classic, ATS)
│ ├── HomePage/ # Main split layout
│ ├── UserInput/ # Form sections (Personal, Skills, Projects, etc.)
│ └── WelcomePage/ # Landing page
├── context/
│ └── UserInputContext/
│ ├── InputFieldContext.jsx
│ └── reducer/
│ ├── resumeReducer.js
│ ├── resumeTypes.js
│ ├── resumeInitialState.js
│ └── reducerInputUtils.js
├── App.jsx # Application routing & Lazy load fallback UI
├── main.jsx # React entry point
└── setupTests.js # Vitest
```

---

## Contributing

Contributions are welcome. Here's how to get started:

**1. Fork & Clone**

```bash
git clone https://github.com/umarSiddique010/resume-craft-react.git

cd resume-craft-react

npm install
```

**2. Create a Branch**

```bash
git checkout -b feat/your-feature-name
```

**3. Make Your Changes**

- Follow existing code style (ESLint + Prettier enforce this automatically on commit)
- Add or update tests for any changed logic
- Keep all state changes inside the reducer — no local state for resume data

**4. Open a Pull Request**

- Target the `main` branch
- Write a clear title and description
- Reference related issues with `Closes #issue-number`

**Guidelines:** One feature or fix per PR. Don't remove existing tests. If adding a new template, follow the same props structure as existing ones.

---

### Developer & Maintainer

**Md Umar Siddique**