Resume Maker Latex
Production-grade Web App software engineering system implemented in TypeScript, JavaScript. Features a decoupled multi-tier architecture with validated API endpoints and resilient state processing.
Technical Architecture & Engineering Overview
Detailed system design and core implementation
The system follows a layered architecture: the presentation layer (React SPA) communicates with a RESTful API layer (/api/auth/* and /api/resumes/*) over HTTPS. Each request passes through an isAuthenticated middleware that validates JWT tokens, applies Helmet security headers, and enforces rate‑limiting to mitigate brute‑force attacks. Data ingestion begins at the controller level where incoming payloads are validated against Joi schemas before being persisted to MongoDB. Resume documents contain sanitized HTML generated by Tiptap, ensuring XSS safety via server‑side sanitization.
When a user triggers a download, the controller delegates to a service that either streams a PDFKit document or invokes the LaTeX compiler (node‑latex). The compiled PDF or .tex source is streamed back to the client, allowing instant preview or offline editing. The frontend leverages React Query for caching and optimistic UI updates, while the drag‑and‑drop UI (dnd-kit) synchronously updates the resume's section order in the database, handling rapid re‑ordering edge cases.
Security guardrails include JWT token rotation, HTTP‑only cookies, and strict CORS policies. All routes are protected by the isAuthenticated middleware, and sensitive operations (e.g., resume deletion) are logged for audit. The build topology uses Vite for fast HMR in development and produces a production bundle that is bundled into an Electron executable, delivering native‑like performance while retaining web flexibility.
The deployment pipeline (not fully detailed in the code) is designed for continuous integration with automated linting, TypeScript compilation, and unit tests (future work). The repository also contains scripts for MongoDB Atlas connection pooling and graceful shutdown handling, ensuring resilience in production environments.
System Diagrams & Flow Visualizations
Interactive Mermaid architecture & execution flows
Core System Features
Key capabilities & architectural features
User registration, login, and JWT‑protected session management
User registration, login, and JWT‑protected session management
CRUD operations for resumes (create, read, update, delete)
CRUD operations for resumes (create, read, update, delete)
Real‑time preview of resume content with rich‑text editing
Real‑time preview of resume content with rich‑text editing
Drag‑and‑drop reordering of resume sections with immediate persistence
Drag‑and‑drop reordering of resume sections with immediate persistence
PDF generation via PDFKit
PDF generation via PDFKit
LaTeX PDF generation and source `.tex` download
LaTeX PDF generation and source `.tex` download
Dark‑mode UI built with TailwindCSS and Shadcn UI components
Dark‑mode UI built with TailwindCSS and Shadcn UI components
Electron packaging for desktop deployment
Electron packaging for desktop deployment
Rate limiting and security headers via Helmet
Rate limiting and security headers via Helmet
Centralized error handling and logging
Centralized error handling and logging
Engineering Challenges & Solutions
Problem statements & resolution strategies
Balancing real‑time drag‑and‑drop UI responsiveness with database write consistency, especially under rapid user actions
Balancing real‑time drag‑and‑drop UI responsiveness with database write consistency, especially under rapid user actions
Ensuring XSS‑free storage of HTML generated by Tiptap while preserving formatting
Ensuring XSS‑free storage of HTML generated by Tiptap while preserving formatting
Managing two separate PDF generation pipelines (PDFKit vs LaTeX) without code duplication
Managing two separate PDF generation pipelines (PDFKit vs LaTeX) without code duplication
Handling LaTeX compilation errors gracefully and providing useful feedback to the user
Handling LaTeX compilation errors gracefully and providing useful feedback to the user
Coordinating JWT token refresh flow across Electron’s main and renderer processes
Coordinating JWT token refresh flow across Electron’s main and renderer processes
API Reference & Endpoints
REST API surface & route documentation
| METHOD | ENDPOINT PATH | DESCRIPTION | COPY |
|---|---|---|---|
| POST | /api/auth/register | Endpoint defined in server/auth.ts | |
| POST | /api/auth/login | Endpoint defined in server/auth.ts | |
| GET | /api/auth/user | Endpoint defined in server/auth.ts | |
| POST | /api/auth/logout | Endpoint defined in server/auth.ts | |
| GET | /api/login | Endpoint defined in server/replitAuth.ts | |
| GET | /api/logout | Endpoint defined in server/replitAuth.ts | |
| GET | /api/callback | Endpoint defined in server/replitAuth.ts | |
| POST | /register | Endpoint defined in server/routes/auth.routes.ts | |
| POST | /login | Endpoint defined in server/routes/auth.routes.ts | |
| GET | /user | Endpoint defined in server/routes/auth.routes.ts | |
| POST | /logout | Endpoint defined in server/routes/auth.routes.ts | |
| GET | /current | Endpoint defined in server/routes/resume.routes.ts | |
| GET | / | Endpoint defined in server/routes/resume.routes.ts | |
| GET | /:id | Endpoint defined in server/routes/resume.routes.ts | |
| POST | / | Endpoint defined in server/routes/resume.routes.ts | |
| PATCH | /:id | Endpoint defined in server/routes/resume.routes.ts | |
| DELETE | /:id | Endpoint defined in server/routes/resume.routes.ts | |
| POST | /download | Endpoint defined in server/routes/resume.routes.ts | |
| GET | /api/resumes/current | Endpoint defined in server/routes.ts | |
| GET | /api/resumes | Endpoint defined in server/routes.ts | |
| GET | /api/resumes/:id | Endpoint defined in server/routes.ts | |
| POST | /api/resumes | Endpoint defined in server/routes.ts | |
| PATCH | /api/resumes/:id | Endpoint defined in server/routes.ts | |
| DELETE | /api/resumes/:id | Endpoint defined in server/routes.ts | |
| POST | /api/resumes/download | Endpoint defined in server/routes.ts | |
| POST | /api/resumes/download-latex | Endpoint defined in server/routes.ts | |
| POST | /api/resumes/download-latex-source | Endpoint defined in server/routes.ts |
Key Code Modules & Architecture
Core file entrypoints and service responsibilities
clientModule component managing client source logic
client/srcModule component managing src source logic
client/src/features/resume/componentsModule component managing components source logic
client/src/components/uiModule component managing ui source logic
client/src/hooksModule component managing hooks source logic
client/src/libModule component managing lib source logic
client/src/pagesModule component managing pages source logic
serverModule component managing server source logic
server/configModule component managing config source logic
server/controllersModule component managing controllers source logic
server/middlewareModule component managing middleware source logic
server/modelsModule component managing models source logic
server/routesModule component managing routes source logic
server/servicesModule component managing services source logic
User Journey Pipeline
- 1User accesses application user interface via browser
- 2User triggers action invoking HTTP/WebSocket API endpoints
- 3Data persisted or retrieved from database storage layer
Execution Code Flow
- 1Client or caller initiates request to application entrypoint
- 2Backend router validates request parameters and applies middleware
- 3Database ORM/client executes storage query
- 4Application serializes JSON/audio/data response back to client
System FAQ & Technical Specifications
Frequently asked questions and core architecture details
Q: What technologies are used in Resume Maker Latex?
Resume Maker Latex is engineered using modern full-stack frameworks.
Q: What core engineering problem does Resume Maker Latex solve?
Production-grade Web App software engineering system implemented in TypeScript, JavaScript. Features a decoupled multi-tier architecture with validated API endpoints and resilient state processing.
Q: How is 'Balancing real‑time drag‑and‑drop UI responsiveness with database write consistency, especially under rapid user actions' resolved in Resume Maker Latex?
Resolved through specialized system architecture and resilient state handling.
Related Systems & Case Studies
Explore similar technical architectures and projects