Skip to content
// booting portfolio
the engineer's notebookYash.
loading assets000%
Yash.
Index / Work
Frontend · System Design · 2026 · P/02

Resume Builder

A real-time, ATS-friendly resume builder with a schema-driven form engine and instant PDF export.

P/02Frontend · System Design

Resume Builder

resume-builder.caseview case →
Role
Frontend Developer
Year
2026
Category
Frontend · System Design
Stack
4 technologies

A dynamic CV generator built around a schema-driven form engine, live preview, and a client-side PDF pipeline — designed for clean, ATS-friendly output and easy template customization.

01 — Problem

Most resume tools lock you into rigid templates and lose formatting on export. I wanted a builder with live preview, reusable templates, and reliable, print-ready PDFs that pass ATS parsers.

02 — Solution

I engineered a real-time builder in React with synchronized state and live preview, a schema-driven form engine spanning 10+ modules with nested fields and validation, and a client-side PDF workflow using jsPDF for consistent, print-ready exports.

03 — Architecture

A schema describes every resume section; a generic form engine renders nested fields + validation from it, while a preview component subscribes to the same state for instant updates. Rendering is optimized to avoid redundant re-renders during live editing, and jsPDF produces the final ATS-friendly document.

React.jsJavaScriptjsPDFCSS3

04 — Challenges

  1. 01Keeping live preview in perfect sync with a deeply nested form without re-rendering everything.
  2. 02Designing a schema flexible enough for 10+ section types yet simple to extend.
  3. 03Producing consistent, print-ready PDFs that survive ATS parsing.

05 — Outcomes

  • A modular, extensible architecture with reusable section components.
  • ATS-friendly, print-ready PDF exports.
  • Smooth live editing via optimized state updates.

Stack

React.jsJavaScriptjsPDFCSS3