Goutam Prusty
WritingResearchProjectsAbout

Method

Gemini Deep Research

Length

15 minutes.
Length
15MIN READ

Source Material

  1. [1]Source 1: Parsing Resumes with LLMs: A Guide to Structuring CVs for HR Automation - Datumo
  2. [2]Source 2: Sajjad-Amjad/Resume-Parser: Get structured output(JSON) from resumes using GPT and LangChain. - GitHub
  3. [3]Source 3: Self-Hosting with Docker - Reactive Resume
  4. [4]Source 4: Page wrapping - React-pdf
  5. [5]Source 5: AI CV Makers: Free ATS Resume Builder for Indian Freshers
  6. [6]Source 6: Ekemini Thompson EkeminiThompson - GitHub
  7. [7]Source 7: charkour/zundo: undo/redo middleware for zustand. (under 700 bytes) - GitHub
  8. [8]Source 8: Rethinking Undo/Redo - Why We Need Travels - DEV Community
  9. [9]Source 9: 10 Most Common ATS Resume Parsing Failures (2026) - ATS Verification
  10. [10]Source 10: Resume Could Not Be Parsed: What It Means and How to Fix It - LoopCV
  11. [11]Source 11: ResizeObserver loop completed with undelivered notifications when callback runs ReactDOM flushSync. [391393420] - Chromium Issue
  12. [12]Source 12: PRINTING BOOKS FROM HTML AND CSS: METRICS, FORMATTERS AND RESULTS - AMS Laurea
  13. [13]Source 13: Node.js PDF Generation: PDFKit vs Puppeteer vs jsPDF Comparison - Reintech
  14. [14]Source 14: Autype vs. Puppeteer vs. wkhtmltopdf – Comparison
  15. [15]Source 15: How to Fix PDF Page Breaks in HTML (The Complete Guide) - DEV Community
  16. [16]Source 16: Turning React apps into PDFs with Next.js, NodeJS and Puppeteer - DEV Community
  17. [17]Source 17: Quickstart - Reactive Resume
  18. [18]Source 18: Best Rich Text Editors 2026: Top 10 Compared - Velt
  19. [19]Source 19: Lexical vs TipTap 2026: Save 4-6 Weeks + $60K (Tested) | Eddyter
  20. [20]Source 20: Tiptap vs Quill vs Lexical vs Slate: React Rich Text Editors in 2026 - PkgPulse
  21. [21]Source 21: Tiptap vs Lexical: Which Rich Text Editor Should You Pick for Your Next Project? - Medium
  22. [22]Source 22: Which rich text editor framework should you choose in 2025? | Liveblocks blog
  23. [23]Source 23: Development Setup - Reactive Resume
  24. [24]Source 24: Reactive Resume changelog
  25. [25]Source 25: Hargurjeet Singh Ganger — Senior Data Scientist & AI Engineer
  26. [26]Source 26: AI Agents Roadmap: From Chatbots to Autonomy | PDF | Software Engineering - Scribd
  27. [27]Source 27: snehitvaddi/finetuneresume.app: AI-powered resume tailoring — architecture, API docs, and design decisions - GitHub
  28. [28]Source 28: Is FlowCV ATS-Friendly? Tested + Best 2026 Alternatives | Resume Optimizer Pro
  29. [29]Source 29: ATS Formatting Mistakes That Kill Your Resume | Resumemate
  30. [30]Source 30: ATS parsing reality check: 8 resume formatting issues that break scanners (add yours)
  31. [31]Source 31: Free & Easy 5-Minute ATS Resume Parsing Test
  32. [32]Source 32: Why Your ATS Parse Failed (and How to Fix the Mistakes) | Rezi Blog
  33. [33]Source 33: Project Architecture - Reactive Resume
  34. [34]Source 34: Reactive Resume v5.1.5 release notes - WinterFlow.io
  35. [35]Source 35: ResumeyPro vs FlowCV: Which Resume Builder Is Best?
  36. [36]Source 36: FlowCV Review 2026: 100% Free, But Only 1 Resume - ResuFit
  37. [37]Source 37: 8 Resume Builder Tools Tech Professionals Use to Get More Interviews - Fueler
  38. [38]Source 38: 9 Top Resume Builder Tools for Tech Professionals in Canada - Fueler
  39. [39]Source 39: Best Resume Builder for Software Engineers in 2026
01
  1. Home
  2. /
  3. Research

System Architecture and Reverse Engineering Specification: Modern Resume Builder Platform

A comprehensive system architecture and reverse engineering specification for building a scalable, ATS-optimized modern resume builder platform.

July 19, 2026
software•
#resume-builder#system-architecture#software-engineering#pdf-generation#react#nextjs
Show case file details↓

Method

Gemini Deep Research

Length

15 minutes.
Length
15MIN READ

Source Material

  1. [1]Source 1: Parsing Resumes with LLMs: A Guide to Structuring CVs for HR Automation - Datumo
  2. [2]Source 2: Sajjad-Amjad/Resume-Parser: Get structured output(JSON) from resumes using GPT and LangChain. - GitHub
  3. [3]Source 3: Self-Hosting with Docker - Reactive Resume
  4. [4]Source 4: Page wrapping - React-pdf
  5. [5]Source 5: AI CV Makers: Free ATS Resume Builder for Indian Freshers
  6. [6]Source 6: Ekemini Thompson EkeminiThompson - GitHub
  7. [7]Source 7: charkour/zundo: undo/redo middleware for zustand. (under 700 bytes) - GitHub
  8. [8]Source 8: Rethinking Undo/Redo - Why We Need Travels - DEV Community
  9. [9]Source 9: 10 Most Common ATS Resume Parsing Failures (2026) - ATS Verification
  10. [10]Source 10: Resume Could Not Be Parsed: What It Means and How to Fix It - LoopCV
  11. [11]Source 11: ResizeObserver loop completed with undelivered notifications when callback runs ReactDOM flushSync. [391393420] - Chromium Issue
  12. [12]Source 12: PRINTING BOOKS FROM HTML AND CSS: METRICS, FORMATTERS AND RESULTS - AMS Laurea
  13. [13]Source 13: Node.js PDF Generation: PDFKit vs Puppeteer vs jsPDF Comparison - Reintech
  14. [14]Source 14: Autype vs. Puppeteer vs. wkhtmltopdf – Comparison
  15. [15]Source 15: How to Fix PDF Page Breaks in HTML (The Complete Guide) - DEV Community
  16. [16]Source 16: Turning React apps into PDFs with Next.js, NodeJS and Puppeteer - DEV Community
  17. [17]Source 17: Quickstart - Reactive Resume
  18. [18]Source 18: Best Rich Text Editors 2026: Top 10 Compared - Velt
  19. [19]Source 19: Lexical vs TipTap 2026: Save 4-6 Weeks + $60K (Tested) | Eddyter
  20. [20]Source 20: Tiptap vs Quill vs Lexical vs Slate: React Rich Text Editors in 2026 - PkgPulse
  21. [21]Source 21: Tiptap vs Lexical: Which Rich Text Editor Should You Pick for Your Next Project? - Medium
  22. [22]Source 22: Which rich text editor framework should you choose in 2025? | Liveblocks blog
  23. [23]Source 23: Development Setup - Reactive Resume
  24. [24]Source 24: Reactive Resume changelog
  25. [25]Source 25: Hargurjeet Singh Ganger — Senior Data Scientist & AI Engineer
  26. [26]Source 26: AI Agents Roadmap: From Chatbots to Autonomy | PDF | Software Engineering - Scribd
  27. [27]Source 27: snehitvaddi/finetuneresume.app: AI-powered resume tailoring — architecture, API docs, and design decisions - GitHub
  28. [28]Source 28: Is FlowCV ATS-Friendly? Tested + Best 2026 Alternatives | Resume Optimizer Pro
  29. [29]Source 29: ATS Formatting Mistakes That Kill Your Resume | Resumemate
  30. [30]Source 30: ATS parsing reality check: 8 resume formatting issues that break scanners (add yours)
  31. [31]Source 31: Free & Easy 5-Minute ATS Resume Parsing Test
  32. [32]Source 32: Why Your ATS Parse Failed (and How to Fix the Mistakes) | Rezi Blog
  33. [33]Source 33: Project Architecture - Reactive Resume
  34. [34]Source 34: Reactive Resume v5.1.5 release notes - WinterFlow.io
  35. [35]Source 35: ResumeyPro vs FlowCV: Which Resume Builder Is Best?
  36. [36]Source 36: FlowCV Review 2026: 100% Free, But Only 1 Resume - ResuFit
  37. [37]Source 37: 8 Resume Builder Tools Tech Professionals Use to Get More Interviews - Fueler
  38. [38]Source 38: 9 Top Resume Builder Tools for Tech Professionals in Canada - Fueler
  39. [39]Source 39: Best Resume Builder for Software Engineers in 2026
System Architecture and Reverse Engineering Specification: Modern Resume Builder Platform

System Architecture and Reverse Engineering Specification: Modern Resume Builder Platform

1. Product Breakdown

The platform under analysis operates as a highly interactive, web-based document generation tool. Structurally optimized for career profiles, the system separates content entry from visual design, allowing users to modify underlying data while dynamically applying distinct visual templates. The following feature breakdown outlines the user problems solved, user experience (UX) decisions, technical implementations, and engineering complexity for every core capability.

FeatureUser Problem SolvedUX DecisionsTechnical ImplementationEngineering Complexity
Resume BuilderCentralizing disparate career data into a single, editable format.Split-screen interface: data entry forms on the left, live visual canvas on the right.Global JSON state object mapped to a React component tree. Forms mutate state; canvas subscribes to state changes.High. Requires aggressive memoization to maintain 60 FPS while deeply nested state updates occur.
Cover Letter BuilderCreating accompanying documents that visually match the resume.Reuses the resume interface but swaps the data schema to a standard letter format.Shares the core rendering engine and theme tokens, injecting a different primary layout component.Medium. Leverages existing infrastructure but requires distinct schema validation.
Live PreviewVisualizing changes instantly without continuous export cycles.The canvas reacts to keystrokes instantly, utilizing a scaled CSS transform to simulate physical paper sizes (A4/Letter).Client-side React rendering combined with debounce mechanisms for expensive layout recalculations.High. Browser layout engines differ from PDF paginators, requiring complex synchronization.
Resume TemplatesAchieving professional design without graphic design skills.One-click template switching retains all user data, applying new spatial and visual rules instantly.Higher-order React components that ingest the standard JSON schema and map fields to specific structural positions using CSS Grid/Flexbox.High. Building a layout engine capable of reflowing arbitrary user data into distinct visual configurations is prone to edge-case breakages.
Theme CustomizationCreating a unique visual identity to stand out in a candidate pool.Dedicated sidebars allow granular adjustment of colors, typography, and spacing parameters.CSS-in-JS or dynamic CSS variables driven by the global state. Hardcoded values are strictly prohibited.Medium. Requires a robust design token system and strict adherence to contrast accessibility guidelines.
Section OrderingReorganizing career history dynamically (e.g., placing Education above Experience).Invisible hitboxes and clear grab handles allow smooth resorting via drag-and-drop.Utilizing libraries like @hello-pangea/dnd, the state array representing section ordering is mutated via a reducer upon drop.Medium. Managing nested drag-and-drop requires careful isolation of drop zones.
Resume ImportAvoiding manual data entry when migrating from older documents.A simple file upload dropzone initiates an asynchronous processing state with progress indicators.Optical Character Recognition (OCR) combined with Large Language Models (LLMs) instructed via Pydantic schemas to extract unstructured text1.Very High. Managing LLM hallucinations and mapping complex varied layouts to a rigid data structure is historically difficult.
PDF ExportGenerating a universally readable, ATS-compliant final document.Single-click export directly from the header, with options for standard paper sizes.Client-side PDF generation using libraries like @react-pdf/renderer to bypass server costs and ensure machine readability3.Extremely High. Replicating HTML/CSS layouts perfectly in a PDF primitive context requires dual-rendering engines.
AI WritingOvercoming writer's block and articulating impact effectively.Contextual buttons next to text areas suggest AI improvements, rewriting bullets inline.API integration with LLMs (OpenAI/Anthropic), passing the user's bullet point and the target job description to generate optimized content5.Medium. Requires precise prompt engineering, streaming responses, and semantic caching to control costs6.
Version ManagementMaintaining different resumes for different roles without data loss.A history dropdown allows restoring previous snapshots or branching into new documents.A centralized history stack utilizing differential tracking (storing only state deltas) to prevent browser memory bloat7.High. Deep object diffing and conflict resolution during restoration require specialized middleware.
ATS OptimizationEnsuring automated parsers can read the document perfectly.Hidden from the user; the system automatically outputs linear, machine-readable text structures regardless of visual layout.Decoupling visual layout from DOM order. Multi-column visuals are achieved via absolute positioning to prevent the parser from interleaving text9.High. Requires continuous testing against major ATS platforms (Workday, Taleo, iCIMS).

2. Information Architecture

The application revolves around a central, deeply nested document model. The architecture separates user identity from document data, and further isolates content (data) from presentation (theme/layout).

Entity Relationship Model

The data architecture relies on a hybrid approach. While users and authentication metadata are stored in standard normalized relational tables, the resume documents themselves are stored as JSONB payloads. This prevents the need for complex, highly normalized joins when fetching a single resume document, which would drastically degrade performance during frequent autosave operations.

erDiagram
    USER ||--o{ RESUME : owns
    USER ||--o{ MEDIA : uploads
    USER {
        uuid id PK
        string email
        string password_hash
        string oauth_provider
        timestamp created_at
    }
    RESUME ||--|| THEME : contains
    RESUME ||--|| LAYOUT : contains
    RESUME ||--o{ SECTION : contains
    RESUME {
        uuid id PK
        uuid user_id FK
        string title
        string slug UK
        boolean is_public
        jsonb payload
        timestamp updated_at
    }
    SECTION ||--o{ ITEM : contains
    SECTION {
        string id PK
        string type
        boolean is_visible
    }
    ITEM {
        string id PK
        jsonb content
    }
    MEDIA {
        uuid id PK
        uuid user_id FK
        string url
        string file_type
    }

Relational Schema Design vs. NoSQL

While MongoDB provides native JSON document storage, a PostgreSQL database is recommended for this architecture. PostgreSQL's JSONB column type offers the flexibility of NoSQL for the RESUME.payload while retaining ACID compliance, strict foreign key constraints for user management, and advanced indexing (GIN indices) to allow querying inside the JSON structures if aggregate analytics are required in the future.


3. Frontend Architecture

To achieve sub-millisecond responsiveness for a complex document editor, the frontend architecture relies on a decoupled state model utilizing React (via Next.js) and a strict unidirectional data flow.

React Architecture and Component Hierarchy

The application is structured to minimize reconciliation overhead. The editor layout is divided into three distinct zones: the Sidebar System (navigation and global settings), the Toolbar (document-level actions like Export and Undo/Redo), and the Workspace (split between the Form Inspector and the Preview Canvas).

State is managed outside the React component lifecycle using Zustand. This avoids the performance bottlenecks associated with React Context "provider hell." When a user updates their job title in the Form Inspector, the controlled input mutates the Zustand store directly. The Preview Canvas, which subscribes only to specific slices of the global state (e.g., state.content.experience), detects the mutation and triggers a localized re-render of the ExperienceItem component, leaving the rest of the canvas untouched.

Form Management and Validation

Forms are heavily controlled components bound directly to the Zustand store. Local useState is avoided for document data to maintain a single source of truth. Validation is handled by Zod schemas at the boundary layer; before an autosave payload is dispatched, the Zod schema ensures all required fields (e.g., date formats, email strings) are structurally sound.

Code Splitting and Lazy Loading

The frontend bundle size is aggressively managed. The heavy PDF rendering engine (@react-pdf/renderer or similar) is dynamically imported only when the user clicks the "Export" button. Similarly, complex UI components like the Color Picker or Date Picker are lazy-loaded via React Suspense, keeping the initial Time-to-Interactive (TTI) low for users on constrained networks.


4. Live Resume Rendering Engine

The core technical challenge of the platform is ensuring the browser's live preview perfectly matches the exported PDF.

Single Source of Truth and Virtual DOM

The system utilizes a dual-engine architecture fed by a single JSON source of truth. For real-time editing, the data is rendered into standard React DOM elements. For export, the exact same data payload is fed into a PDF generation library. The React Virtual DOM diffing algorithm is optimized by ensuring all dynamically mapped items have stable key props tied to their unique UUIDs, preventing the entire list from unmounting during a reorder event.

Dynamic Page Breaks and Layout Recalculation

Emulating an A4 or US Letter page in the browser requires continuous measurement of DOM node heights. Dynamic pagination is traditionally handled by observing content with the ResizeObserver API to calculate when elements overflow a page's pixel height. However, executing React state updates (like flushSync) inside a ResizeObserver callback is a known anti-pattern that triggers infinite loop errors in Chromium browsers11.

To solve this, layout recalculations must be decoupled from the immediate render cycle. The architecture utilizes a debounced requestAnimationFrame loop that measures the off-screen height of rendered blocks, calculates optimal break points, and updates a distinct paginationState store. This ensures text is pushed to the next page smoothly without locking the main thread.

Widow and Orphan Control

Professional typesetting requires widow and orphan control—preventing a single line of a paragraph from appearing at the top or bottom of a page12. The rendering engine calculates the line height and font metrics of the text blocks. If a break point falls within the first or last two lines of a paragraph, the entire block is forced to the next page, ensuring a polished, professional layout4.


5. Template System

Templates in this architecture are not static HTML files; they are higher-order React components that consume the JSON schema and map data to spatial grids.

Template Architecture

Each template defines a CSS Grid or Flexbox layout establishing standard drop zones (e.g., MainColumn, SidebarColumn). The template iterates over the schema's layout configuration to determine rendering order. If layout.columns.sidebar contains ['skills', 'languages'], the template routes the respective data arrays to that physical zone.

Templates rely strictly on a theme context. Hardcoded colors or pixel values are prohibited. Instead, the template consumes typography tokens, spacing tokens, and color tokens from the global state. This allows a user to switch from a "Modern" template to a "Classic" template seamlessly; the underlying data remains identical, but the spatial mapping and token consumption change instantly.

Conditional rendering is heavily utilized. If a user leaves the phone field blank, the template completely removes the associated icon and container div to preserve spatial balance and prevent empty visual gaps.


6. Resume JSON Schema

A production-grade JSON schema dictates the platform's stability. All backend APIs, frontend stores, and LLM parsers must validate against this rigid structure.

{
  "id": "e8b9f1a2-4c3d-4e5f-8a9b-1c2d3e4f5a6b",
  "metadata": {
    "title": "Senior Software Engineer Profile",
    "locale": "en-US",
    "lastModified": "2026-07-12T08:40:21Z"
  },
  "theme": {
    "colors": {
      "primary": "#2563EB",
      "text": "#1F2937",
      "background": "#FFFFFF"
    },
    "typography": {
      "fontFamily": "Inter, sans-serif",
      "fontSizeScale": 1.1,
      "lineHeight": 1.5
    },
    "spacing": {
      "margins": 24,
      "itemGap": 12
    }
  },
  "layout": {
    "templateId": "modern-two-column",
    "columns": {
      "main": ["experience", "education", "projects"],
      "sidebar": ["personal", "skills", "languages"]
    },
    "pageSettings": {
      "format": "A4",
      "showPageNumbers": true
    }
  },
  "content": {
    "personal": {
      "fullName": "Jane Doe",
      "jobTitle": "Lead Architect",
      "email": "jane@example.com",
      "phone": "+91 98765 43210",
      "location": "Bengaluru, India",
      "links": [{ "type": "github", "url": "github.com/jane" }],
      "summary": "<p>Distributed systems engineer specializing in high-throughput pipelines.</p>"
    },
    "experience": [
      {
        "id": "exp-1",
        "company": "TechCorp Global",
        "role": "Senior Backend Engineer",
        "startDate": "2022-01-01",
        "endDate": "Present",
        "location": "Remote",
        "description": "<p>Led the migration to microservices, improving uptime by 99.9%.</p>",
        "isVisible": true
      }
    ],
    "skills": [
      {
        "id": "sk-1",
        "category": "Backend Development",
        "items": ["Node.js", "Go", "PostgreSQL", "Redis"]
      }
    ]
  }
}

7. State Management

For a complex document editor with frequent, nested updates, Zustand is the optimal choice over Redux or Context API due to its minimal boilerplate, lack of provider wrapping, and transient state update capabilities.

History, Undo/Redo, and Autosave

Implementing a robust history stack requires capturing previous states. Middleware like zundo enables native undo/redo time-travel debugging7. However, storing full deep copies of a large JSON schema for every keystroke leads to exponential memory bloat, causing browser crashes. The architecture must implement differential tracking (storing only state deltas) using libraries like mutative or travels, which can reduce the memory footprint of a 100-step history stack by 97%8.

Autosave is managed by a debounced hook that observes the state. If changes are detected and no new keystrokes occur for 3 seconds, a background PATCH request is dispatched. Optimistic UI updates handle immediate interactions. If the network request fails, the application caches the action in localStorage or IndexedDB. Upon reconnection, a synchronization worker resolves timestamps using a "last-write-wins" strategy.


8. PDF Generation Pipeline

The PDF generation engine is the most mission-critical component of the platform. The analysis reveals several potential architectures, each with distinct trade-offs.

ArchitectureMechanismProsConsRecommendation
Headless Chrome (Puppeteer)Boots an instance of Chrome on the server, loads HTML, and triggers print-to-PDF.Exact 1:1 match with browser CSS. Excellent for complex web layouts.Extremely resource-heavy (100-200MB RAM per instance). Suffers from slow cold starts and scales poorly under concurrent load13.Avoid for high-scale B2C SaaS.
HTML-to-PDF Utilities (wkhtmltopdf)Older rendering engines parsing HTML into PDF structures.Simpler deployment than full browsers.Outdated WebKit engines fail on modern CSS Grid/Flexbox. Handling page breaks is notoriously buggy14.Obsolete; do not use.
Dedicated React PDF Renderers (@react-pdf/renderer)A custom React reconciler that outputs PDF primitives instead of DOM nodes.Extremely fast, small memory footprint (5-10MB), native text selection (crucial for ATS), and runs entirely in the browser3.Requires writing layout logic twice (once for DOM, once for PDF primitives). Does not support standard CSS.Recommended.

Architectural Decision: Utilize @react-pdf/renderer executed on the client-side (in the user's browser) for instant downloads. Modern resume platforms, such as Reactive Resume v5, have migrated entirely to client-side @react-pdf/renderer execution to eliminate server bottlenecks, reduce infrastructure costs, and remove dependencies on external Chromium instances3. This approach natively handles dynamic pagination, widow/orphan control, and creates perfectly machine-readable PDFs optimized for Applicant Tracking Systems4.


9. Rich Text Editing

Resume descriptions and summaries require robust rich text formatting (bold, italic, lists) while strictly preventing potentially dangerous or layout-breaking HTML (like arbitrary div tags or scripts).

When evaluating rich text frameworks, the choice generally narrows down to Lexical, Tiptap, Slate, and Quill.

  • Lexical: Meta's highly performant, plugin-based editor18. It is excellent for high-scale social applications but requires significant boilerplate to assemble basic features19.
  • Tiptap: A headless wrapper around ProseMirror. It integrates seamlessly with React and offers over 100 pre-built extensions for lists, marks, and history19.

Architectural Decision: Tiptap is the optimal choice. Its headless nature allows the application to render custom toolbars that fit the platform's bespoke design system. Content is stored as sanitized HTML strings in the JSON schema. The output is easily parsed by the PDF engine and remains inherently ATS-readable.


10. Drag-and-Drop Architecture

The ability to reorder sections (e.g., moving Education above Experience) and sort individual items requires a highly accessible and performant Drag-and-Drop (DnD) engine.

The architecture utilizes @hello-pangea/dnd (a maintained fork of react-beautiful-dnd) or dnd-kit. Virtualization (rendering only visible items) is generally unnecessary, as standard resumes rarely exceed 50-100 total items, well within React's rendering capabilities.

Persistence is handled smoothly: the onDragEnd event triggers an array reordering function within the Zustand store. This immediately updates the global JSON schema, reflects the change on the live canvas, and fires the debounced autosave mechanism. Accessibility is maintained by ensuring all drag handles are focusable via keyboard navigation and announce positional changes to screen readers.


11. Backend Architecture

The backend is designed for high concurrency, primarily serving JSON documents and executing asynchronous background tasks (like AI processing and document parsing).

graph TD
    A[Client Browser] -->|REST / HTTPS| B(Cloudflare WAF / CDN)
    B --> C{Load Balancer}
    C --> D[Node.js API - Hono/Express]
    D -->|Cache / Rate Limit| E[(Redis)]
    D -->|CRUD| F[(PostgreSQL)]
    D -->|Async Tasks| G[BullMQ Queue]
    G --> H[Worker Nodes]
    H -->|Resume Parsing| I[LLM API - OpenAI/Anthropic]
    H -->|File Storage| J[(AWS S3 / SeaweedFS)]

The API layer utilizes Node.js with Hono (for edge-compatibility and speed). REST APIs are sufficient; GraphQL introduces unnecessary query complexity for a well-defined, singular document structure. Redis handles rate limiting for API endpoints, preventing abuse of AI generation endpoints. Any heavy ML processing is offloaded to a queue (BullMQ) processed by isolated worker nodes to avoid blocking the main event loop17.


12. Database Design

A highly scalable relational database forms the backbone of the platform. PostgreSQL is selected as the primary data store.

Schemas and Indexes

  • Users Table: Indexed on email (B-Tree).
  • Resumes Table: The core payload is stored using PostgreSQL's JSONB type. This allows rapid retrieval and partial updates without mapping complex hierarchical data across dozens of normalized tables. GIN (Generalized Inverted Index) indexes are applied to the payload column to allow rapid internal searching (e.g., finding all resumes containing the skill "React").
  • Performance Optimization: Connection pooling via PgBouncer prevents database connection exhaustion during traffic spikes. Migrations are strictly managed via Drizzle ORM or Prisma to ensure schema stability.

13. Authentication

Security and seamless onboarding are critical for user conversion. The authentication architecture utilizes OAuth 2.0 (Google, GitHub, LinkedIn) alongside standard Email/Password protocols.

Session management relies on JSON Web Tokens (JWT) stored in HttpOnly, Secure cookies to prevent Cross-Site Scripting (XSS) attacks. Short-lived access tokens (15 minutes) paired with rolling refresh tokens provide a balance of security and UX. Frameworks like Better Auth (utilized in Reactive Resume v5) simplify OAuth reconciliation, ensuring users who sign in via GitHub and later via Google with the same email are merged into a single identity seamlessly3. Role-Based Access Control (RBAC) middleware protects premium endpoints (e.g., AI generation, unlimited resume creation).


14. Resume Import

Converting an uploaded PDF or DOCX file into the structured JSON schema is one of the most technically complex features, requiring robust error correction.

  1. Ingestion & OCR: The file is uploaded, and tools like pdf.js or AWS Textract extract raw text strings and layout bounding boxes.
  2. LLM Extraction: Traditional regex-based parsers fail on varied formats. The modern architecture utilizes Large Language Models (LLMs) like GPT-4o or Anthropic Claude to interpret the unstructured text1.
  3. Schema Enforcement: Using libraries like Instructor and Pydantic, the LLM is mathematically constrained to output data strictly matching the internal JSON schema, preventing hallucinations1.
  4. Validation: The parsed payload is validated against Zod schemas. Any fields with low confidence scores are visually flagged in the UI for the user to review manually.

15. AI Features

Generative AI acts as a co-pilot for the job seeker, offering bullet point generation, grammar improvement, and job-description matching.

Architecture and Cost Optimization

System prompts enforce strict constraints (e.g., "Use the Situation-Task-Action-Result format. Keep responses under 20 words. Begin with a strong action verb.")27. To ensure quality, a multi-agent "Teacher-Student" pipeline generates the text and automatically critiques it for impact and metric inclusion before presenting it to the user27.

Cost optimization is paramount. Semantic caching (using Redis and vector embeddings) checks if a highly similar bullet point has been generated previously. If a match is found, the system returns the cached result, bypassing the LLM API entirely to save costs and reduce latency6. An LLM fallback chain ensures maximum uptime: fast, open-source models (via Groq) handle primary requests, falling back to DeepSeek or GPT-4o if rate limits are hit27.


16. ATS Optimization

Applicant Tracking Systems (ATS) like Workday, Taleo, and iCIMS parse text from PDFs to auto-fill candidate profiles. A fundamental understanding of ATS parsing is required to build effective templates.

The Multi-Column Parsing Failure

Visual multi-column templates (common in builders like FlowCV) frequently fail ATS parsing. Parsers serialize text by reading left-to-right, top-to-bottom. If a visual layout places "Skills" in a right column adjacent to "Experience" in the left column, the parser interleaves the text (e.g., "Software Engineer Python 2022 JavaScript"), destroying the semantic meaning9. FlowCV's multi-column templates report parse rates as low as 47% on platforms like iCIMS28.

Architectural Solution

The PDF generation engine must decouple visual layout from semantic DOM order. Using @react-pdf/renderer, the document tree is built strictly linearly. Multi-column visuals are achieved via Flexbox absolute positioning, ensuring the raw text layer remains sequential and logically ordered for machine readers29. Standard, predictable headers ("Professional Experience", "Education") and standard fonts (Arial, Helvetica) are strictly enforced to prevent character encoding errors, and hidden layout tables are explicitly avoided9.


17. Performance

Performance optimization focuses on maintaining a fluid editing experience.

  • Memoization: Heavy canvas components are wrapped in React.memo with custom equality checks to prevent unnecessary re-renders when unrelated state changes.
  • Debouncing: Autosave operations and AI completions are heavily debounced to prevent network flooding.
  • Caching & CDN: Web fonts, icons, and public static assets are aggressively cached and served via a global CDN (Cloudflare).
  • Lazy Loading: Modals, complex pickers, and the PDF export engine are code-split and loaded asynchronously.

18. Design System

A robust design system ensures rapid UI iteration, consistency, and accessibility.

Token CategoryValues / Implementation
Typography ScaleBase 16px (1rem). Modular scale (1.125) for headers (H1: 2.5rem, H2: 2rem, etc.). Primary font: Inter.
Spacing & Grid4px base unit. Tailwind spacing scale (p-4 = 16px, p-8 = 32px). 12-column fluid grid for the application shell.
Color PaletteSemantic tokens mapped to CSS variables. Primary (Blue-600), Surface (White), Background (Gray-50), Text (Gray-900), Danger (Red-500).
Border Radiussm (4px) for inputs, md (8px) for cards, full for avatars.
Dark ModeHandled natively via CSS variables and Tailwind's dark: pseudo-class modifiers, inverting surface and text tokens.

19. UI Components

A comprehensive inventory of custom components required for the platform, built atop headless primitives like Radix UI.

ComponentPurposeInteraction / State
Workspace ShellMain layout container.Manages the resizable split-pane between the Form Inspector and Canvas.
AccordionNavigating distinct resume sections.Exclusive open state (only one section open at a time).
Floating InputText entry.Animates label to top-left on focus or when value is present.
Date PickerSelecting start/end dates.Custom UI restricting selection to Month/Year only, with a "Present" toggle.
Rich Text EditorEditing descriptions.Tiptap instance with custom floating bubble menu for bold/italic/lists.
Color PickerTheme customization.Popover rendering a hex input and predefined palette swatches.
DnD ListReordering items.Renders drag handles; triggers array mutation on drop.
Preview CanvasLive document rendering.Subscribes to Zustand store; scales visually based on viewport width.
Command PalettePower-user navigation.Triggered via Cmd+K; allows rapid jumping between sections or triggering exports.
Toast NotificationsSystem feedback.Ephemeral alerts for "Saved", "Export Complete", or "Error".

20. API Design

A RESTful approach designed for scalability and clear client-server communication.

EndpointMethodPayload ExampleResponse ExamplePurpose
/api/v1/resumesPOST{"title":"Software Dev","templateId":"modern"}201 Created {"id":"uuid","payload":{...}}Create a new blank resume.
/api/v1/resumes/:idPATCH{"content.personal.email":"test@test.com"}200 OK {"success":true}Incremental autosave update.
/api/v1/resumes/:idGETN/A200 OK {"payload":{...}}Fetch full document state.
/api/v1/importPOSTmultipart/form-data200 OK {"parsedData":{...}}Extract JSON from a PDF/DOCX.
/api/v1/ai/improvePOST{"text":"Fixed bugs","role":"Engineer"}200 OK {"suggestions":["Resolved critical software defects..."]}Generate ATS-optimized bullets.

21. Folder Structure

A pnpm monorepo utilizing Turborepo is the industry standard for managing applications of this scale, isolating domains into distinct, testable packages33.

/ ├── apps/ │ ├── web/ # Next.js frontend (App Router) │ └── api/ # Hono backend server (Edge/Node) ├── packages/ │ ├── editor/ # React components (Forms, Tiptap, Zustand store) │ ├── renderer/ # @react-pdf/renderer logic and templates │ ├── db/ # Drizzle/Prisma schema and generated database client │ ├── ai/ # LLM prompts, Langchain/Instructor configurations │ ├── ui/ # Shared design system components (Tailwind + Radix) │ ├── config/ # ESLint, TypeScript, and Prettier shared configs │ └── types/ # Shared TypeScript interfaces and Zod Schemas


22. Technology Stack

The recommended modern stack for an engineering team to execute this efficiently and securely:

LayerTechnologyJustification
Frontend FrameworkNext.js (React)Industry standard, excellent App Router layout system, seamless API route integration.
StylingTailwind CSS + Radix UIUtility-first CSS guarantees small bundle sizes; Radix provides accessible headless primitives.
State ManagementZustand + ZundoMinimal boilerplate, highly performant transient updates, native undo/redo middleware7.
Rich Text EditorTiptapHeadless ProseMirror wrapper; easier to implement in React than Lexical, highly extensible19.
PDF Engine@react-pdf/rendererClient-side generation eliminates server bottlenecks and guarantees ATS-friendly text3.
Backend & APINode.js / HonoFast, edge-compatible web framework ideal for serverless or containerized deployment.
Database & ORMPostgreSQL + DrizzleRelational integrity for users, JSONB for documents. Drizzle offers superior type safety.
Caching & QueuesRedis (Upstash)Essential for rate limiting, semantic caching for AI, and queue management (BullMQ).
AI ProcessingGroq + OpenAIGroq for high-speed open-source inference; OpenAI as a reliable fallback for complex parsing27.

23. Scalability

Designing for growth from day one prevents major architectural rewrites and ensures platform stability.

  • 10 - 1,000 Users: A single monolithic Node.js server and a managed PostgreSQL instance handle this effortlessly. Because PDF generation is offloaded entirely to the client's browser, server compute remains near zero even during export spikes.
  • 10,000 - 100,000 Users: Introduce Redis for aggressive API rate limiting to protect the AI endpoints from abuse. Implement connection pooling (PgBouncer) for the PostgreSQL database. Cloudflare CDN aggressively caches all static assets and public, read-only resume URLs.
  • 1 Million - 10 Million Users: Transition backend services to a microservices architecture. Separate the AI generation and document import workers from the core CRUD API. Implement read-replicas for the PostgreSQL database, routing all public resume views to the read-only nodes. Utilize horizontal autoscaling via Kubernetes (EKS) for backend services based on CPU/Memory thresholds.

24. Development Roadmap

For an experienced Bengaluru-based engineering team (3–5 engineers), the project translates to a 5 to 6-month timeline.

PhaseMilestoneFocusEst. Time (Team)
Phase 1Basic Editor & ArchitectureMonorepo setup, Database schemas, Auth, Zustand store, split-screen UI.Weeks 1-4
Phase 2Templates & FormattingTiptap integration, Drag-and-Drop, JSON schema mapping, Design token system.Weeks 5-8
Phase 3PDF EngineImplement @react-pdf/renderer. Build core templates. Sync web canvas with PDF output.Weeks 9-12
Phase 4AI & Import PipelineOCR to LLM pipeline with Instructor/Pydantic schemas. AI bullet point generation.Weeks 13-16
Phase 5Accounts & Cloud SavingAutosave logic, JWT sessions, version history diffing, offline support.Weeks 17-20
Phase 6Polish & ATS AuditingRun exports through ATS parsers. Optimize bundle sizes. Finalize UI animations.Weeks 21-24

Estimated Effort Variance: A solo developer would require 12-14 months to reach production-grade quality. A larger enterprise engineering team (10+ engineers) could compress this to 3 months by parallelizing the PDF engine, AI pipeline, and frontend UI tracks.


25. Competitive Analysis

To position the product successfully, we must analyze the architectural trade-offs of existing competitors in the space.

CompetitorUX & CustomizationRendering & Tech ArchATS CompatibilityStrengths & Weaknesses
FlowCVExceptional. Deep visual controls, beautiful multi-column templates.HTML-based rendering. Modifies DOM structure to achieve visual layouts35.Poor. Visual multi-column layouts interleave text, dropping parse rates to ~47% on strict systems like iCIMS9.Strength: Unmatched design flexibility. Weakness: Destroys machine readability; AI is paywalled28.
Reactive ResumeDeveloper-centric. Highly functional but less intuitive for laypersons.Migrated to client-side @react-pdf/renderer in v5, eliminating heavy browserless services3.Excellent. Linear text flow ensures perfect parsing regardless of visual template37.Strength: Open-source, highly secure, flawless ATS. Weakness: Rigid UI, lacks the fluid design feel of FlowCV.
TealBasic resume builder attached to a powerful job tracker.Standard web rendering. Focuses on data over design38.Excellent. Forces single-column, highly scannable layouts28.Strength: Integrated job tracking and ATS scoring. Weakness: Extremely limited visual customization.
CanvaUnrestricted graphic design canvas.Canvas/Image-based rendering.Failing. Exports often result in image-based PDFs or completely scrambled text layers31.Strength: Infinite visual creativity. Weakness: Discarded immediately by automated screening software.
Novorésumé / Resume.ioHigh template variety, wizard-based entry.Server-side PDF generation.Variable. Creative templates suffer similar multi-column parsing failures as FlowCV28.Strength: Strong brand presence, easy onboarding. Weakness: Strict paywalls, aggressive subscription traps, rigid layouts.
ReziAbsolute minimalism. Strict compliance parameters.Strips all visual formatting. Focuses purely on keyword injection38.Flawless. Mathematically structured to parse cleanly38.Strength: Keyword optimization tools. Weakness: Eliminates personality and design, resulting in highly generic documents39.

Strategic Architectural Opportunity: By building an architecture that perfectly isolates semantic data (for ATS) from visual representation (for humans) using @react-pdf/renderer (as seen in Reactive Resume), the new platform can offer the stunning visual customization and ease-of-use of FlowCV, combined with the flawless machine-readability of Teal or Rezi. Furthermore, implementing client-side PDF generation will effectively eliminate the massive server compute costs typically associated with document generation, enabling a highly disruptive freemium business model capable of undercutting established competitors.

Works cited

  1. Parsing Resumes with LLMs: A Guide to Structuring CVs for HR Automation - Datumo, https://www.datumo.io/blog/parsing-resumes-with-llms-a-guide-to-structuring-cvs-for-hr-automation
  2. Sajjad-Amjad/Resume-Parser: Get structured output(JSON) from resumes using GPT and LangChain. - GitHub, https://github.com/Sajjad-Amjad/Resume-Parser
  3. Self-Hosting with Docker - Reactive Resume, https://docs.rxresu.me/self-hosting/docker
  4. Page wrapping - React-pdf, https://react-pdf.org/advanced
  5. AI CV Makers: Free ATS Resume Builder for Indian Freshers, https://www.aicvmakers.in/
  6. Ekemini Thompson EkeminiThompson - GitHub, https://github.com/EkeminiThompson
  7. charkour/zundo: undo/redo middleware for zustand. <700 bytes - GitHub, https://github.com/charkour/zundo
  8. Rethinking Undo/Redo - Why We Need Travels - DEV Community, https://dev.to/unadlib/rethinking-undoredo-why-we-need-travels-2lcc
  9. 10 Most Common ATS Resume Parsing Failures (2026) - ATS Verification, https://atsverification.com/blog/10-most-common-ats-parsing-failures/
  10. Resume Could Not Be Parsed: What It Means and How to Fix It - LoopCV, https://www.loopcv.pro/guides/ats-resume-not-parsed/
  11. ResizeObserver loop completed with undelivered notifications when callback runs ReactDOM flushSync. [391393420] - Chromium Issue, https://issues.chromium.org/issues/391393420
  12. PRINTING BOOKS FROM HTML AND CSS: METRICS, FORMATTERS AND RESULTS - AMS Laurea, https://amslaurea.unibo.it/id/eprint/18522/1/Printing%20books%20from%20html%20and%20css.pdf
  13. Node.js PDF Generation: PDFKit vs Puppeteer vs jsPDF Comparison - Reintech, https://reintech.io/blog/nodejs-pdf-generation-pdfkit-puppeteer-jspdf-comparison
  14. Autype vs. Puppeteer vs. wkhtmltopdf – Comparison, https://autype.com/blog/autype-vs-puppeteer-vs-wkhtmltopdf-which-tool-is-right-for-you
  15. How to Fix PDF Page Breaks in HTML (The Complete Guide) - DEV Community, https://dev.to/digital_trubador/how-to-fix-pdf-page-breaks-in-html-the-complete-guide-1m7g
  16. Turning React apps into PDFs with Next.js, NodeJS and puppeteer - DEV Community, https://dev.to/jordykoppen/turning-react-apps-into-pdfs-with-nextjs-nodejs-and-puppeteer-mfi/comments
  17. Quickstart - Reactive Resume, https://docs.rxresu.me/getting-started/quickstart
  18. Best Rich Text Editors 2026: Top 10 Compared - Velt, https://velt.dev/blog/best-rich-text-editors-react-comparison
  19. Lexical vs TipTap 2026: Save 4-6 Weeks + $60K (Tested) | Eddyter, https://eddyter.com/blogs/lexical-vs-tiptap-2026
  20. Tiptap vs Quill vs Lexical vs Slate: React Rich Text Editors in 2026 - PkgPulse, https://www.pkgpulse.com/guides/tiptap-vs-lexical-vs-slate-vs-quill-rich-text-editor-2026
  21. Tiptap vs Lexical: Which Rich Text Editor Should You Pick for Your Next Project? - Medium, https://medium.com/@faisalmujtaba/tiptap-vs-lexical-which-rich-text-editor-should-you-pick-for-your-next-project-17a1817efcd9
  22. Which rich text editor framework should you choose in 2025? | Liveblocks blog, https://liveblocks.io/blog/which-rich-text-editor-framework-should-you-choose-in-2025
  23. Development Setup - Reactive Resume, https://docs.rxresu.me/contributing/development
  24. Reactive Resume changelog, https://docs.rxresu.me/changelog
  25. Hargurjeet Singh Ganger — Senior Data Scientist & AI Engineer, https://hargurjeet.dev/
  26. AI Agents Roadmap: From Chatbots to Autonomy | PDF | Software Engineering - Scribd, https://www.scribd.com/document/983286159/Level-3-Roadmap-AI-Agents
  27. snehitvaddi/finetuneresume.app: AI-powered resume tailoring — architecture, API docs, and design decisions - GitHub, https://github.com/snehitvaddi/finetuneresume.app
  28. Is FlowCV ATS-Friendly? Tested + Best 2026 Alternatives | Resume Optimizer Pro, https://resumeoptimizerpro.com/blog/flowcv-alternative
  29. ATS Formatting Mistakes That Kill Your Resume | Resumemate, https://www.resumemate.io/blog/ats-formatting-mistakes-that-kill-your-resume/
  30. ATS parsing reality check: 8 resume formatting issues that break scanners (add yours), https://www.reddit.com/r/resumes/comments/1qkx000/ats_parsing_reality_check_8_resume_formatting/
  31. Free & Easy 5-Minute ATS Resume Parsing Test, https://www.distinctiveresumetemplates.com/free-ats-resume-parsing-test/
  32. Why Your ATS Parse Failed (and How to Fix the Mistakes) | Rezi Blog, https://www.rezi.ai/posts/why-your-ats-parse-failed
  33. Project Architecture - Reactive Resume, https://docs.rxresu.me/contributing/architecture
  34. Reactive Resume v5.1.5 release notes - WinterFlow.io, https://winterflow.io/catalog/reactive-resume/releases/v5.1.5/
  35. ResumeyPro vs FlowCV: Which Resume Builder Is Best?, https://resumey.pro/blog/resumeypro-vs-flowcv/
  36. FlowCV Review 2026: 100% Free, But Only 1 Resume - ResuFit, https://resufit.com/blog/flowcv-review-free-resume-builder-worth-trying/
  37. 8 Resume Builder Tools Tech Professionals Use to Get More Interviews - Fueler, https://fueler.io/blog/resume-builder-tools-tech-professionals-use-to-get-more-interviews
  38. 9 Top Resume Builder Tools for Tech Professionals in Canada - Fueler, https://fueler.io/blog/top-resume-builder-tools-for-tech-professionals-in-canada
  39. Best Resume Builder for Software Engineers in 2026, https://www.sweresume.app/comparison/best-resume-builder-2026/
Goutam Prusty

Learning in public. Building with intention.

Personal notebook for projects, research, and writing.

NowResumeUsesRSSContact

© 2026