ResumeBaker

Built a production-ready full-stack resume builder with real-time preview synchronization, dynamic layouts, JWT authentication, AI-powered resume import, and consistent PDF export. Implemented REST APIs for resume persistence and seamless guest/registered user workflows.

Tech Stack

Frontend:

ReactViteTailwind CSShtml2canvasjsPDFreact-pdf

Backend:

Node.jsExpressMongoDBMongooseJWT

AI Integration:

OpenAI API for resume parsing and content structuring

Project highlights

Full-Stack Resume Builder

Built using the MERN stack with persistent resume storage and authenticated user workflows.

Real-Time Resume Preview

Live CV updates with synchronized preview while editing.

Multiple Resume Layouts

Three layout templates powered by a shared resume data schema.

AI-Powered Resume Import

Upload existing resumes (PDF) and automatically structure content using AI.

Authentication & Guest Mode

JWT-based authentication with separate guest and logged-in user flows.

PDF Export System

Multi-page resume export using React-PDF with layout-specific rendering.

TECHNICAL IMPLEMENTATION

Dual panel interface:

Built a responsive two-panel layout using React state management to synchronize form inputs with the live preview. Built synchronized form and preview rendering for real-time resume editing.

  • Synchronized structured form state with live resume preview
  • Section-based architecture supporting dynamic visibility and editing
  • Shared resume schema powering both preview and export systems

Dynamic Styling System:

Built a lightweight styling system for theme colors and font customization with live preview updates.

  • Theme-based color switching for resume appearance
  • Font-style selection controls for text presentation
  • Live style updates applied directly to the preview

PDF Generation & Export:

Implemented separate rendering flows for downloadable CV export and dashboard preview generation.

  • React-PDF for downloadable CV output with selectable text and clickable links
  • html2canvas + jsPDF pipeline for generating dashboard preview images
  • Separate render paths optimized for export quality and dashboard performance

Resume Import Pipeline:

Implemented PDF parsing and AI-assisted structuring to transform uploaded resumes into editable form data.

  • PDF text extraction using pdfjs
  • AI-powered resume section structuring
  • Normalization into a shared resume schema

Engineering Challenges Solved

  • • Maintained synchronization between form inputs, live preview, and exported PDF output while preserving a consistent resume structure.
  • • Designed a dual-render workflow where HTML powers real-time editing and React-PDF handles downloadable resume generation while maintaining layout consistency.
  • • Built reusable resume layouts powered by a shared data schema while supporting structurally different templates.
  • • Optimized rendering performance during editing and PDF generation by memoizing large preview components with React.memo() to improve responsiveness.

Architecture Decisions

Shared Resume Schema

All layouts, form sections, and export systems consume a shared structured resume model, enabling layout switching without data loss.

Dual Render Workflow

Separated HTML preview rendering from React-PDF export rendering to balance editing responsiveness and export quality.