System Overview
A high-level analysis of the VeriWorkly architecture, data flow, and processing pipeline.
System Overview
VeriWorkly utilizes a decoupled, monorepo architecture designed to prioritize user privacy while maintaining the performance required for document rendering and synchronization. The platform operates on a Local-First Architecture with an optional cloud-sync layer.
Local-First Engine
By default, VeriWorkly operates as a client-side application to ensure maximum data privacy.
- Client Storage: When a user interacts with the dashboard, their Master Profile and resume layouts are saved directly to the browser's persistent storage (IndexedDB/LocalStorage) via Zustand.
- Service Independence: Users can create, modify, and preview resumes without any mandatory interaction with the backend API.
- Privacy by Design: Personal data remains on the user's device unless they explicitly opt-in to cloud services.
Optional Cloud Layer
For users requiring cross-device synchronization or managed sharing, VeriWorkly provides an optional cloud layer.
- Data Synchronization: Local state is bridged with the backend PostgreSQL database via the Express API using the Better-Auth session framework.
- Conflict Management: We implement optimistic concurrency strategies to ensure data integrity across multiple active sessions.
Client-Side PDF Rendering
To ensure maximum privacy and instant feedback, VeriWorkly utilizes a client-side rendering pipeline for PDF generation. This approach eliminates the need for server-side headless browsers and ensures that document layouts are generated directly within the user's secure environment.
Rendering Pipeline
- Instantiation: The application initializes the
react-pdfengine within the user's browser. - Data Mapping: The local resume state is mapped to high-fidelity PDF primitives (View, Text, Image) optimized for ATS compatibility.
- Generation: The document is rendered into a Blob or Stream locally, ensuring pixel-perfect alignment with the template's PDF specification.
- Delivery: The finalized document is made available for immediate download without ever leaving the user's device.
Technology Stack
The platform utilizes a modern stack optimized for type safety and scalability.
Frontend Stack
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 16+ (App Router) | React meta-framework with SSR, static export |
| UI Library | React 19 | Modern component architecture |
| Styling | Tailwind CSS 4 | Utility-first CSS framework with @theme API |
| Design System | Radix UI | Unstyled, accessible components |
| PDF Generation | react-pdf | Client-side high-fidelity document rendering |
| State Management | Zustand | Lightweight, flexible store with middleware |
| Forms | React Hook Form | Performant form handling |
| Validation | Zod | TypeScript-first schema validation |
| Icons | Lucide React | Consistent icon library |
| Markdown | MDX | JSX in Markdown for docs/blog |
Backend Stack
| Layer | Technology | Purpose |
|---|---|---|
| Runtime | Node.js 20+ | JavaScript/TypeScript on the backend |
| Framework | Express | Minimal, flexible HTTP server |
| Language | TypeScript (Strict) | Type safety across the backend |
| Database | PostgreSQL | Reliable, feature-rich relational database |
| ORM | Prisma | Type-safe database access with migrations |
| Authentication | Better-Auth | Modern, secure passwordless auth |
| Document Generation | docx | Native Word document generation (local) |
| Validation | Zod | Schema validation for API payloads |
| Testing | Vitest | Fast unit & integration testing |
| Security | Helmet | HTTP security headers |
Reference Guides
- Monorepo Architecture: Detailed breakdown of the repository structure.
- Resume Schema: Technical reference for the Master Profile and resume data structures.
- Database Schema: Relational data model and Prisma configuration.
- Export Pipeline: Deep-dive into the client-side react-pdf integration.
- Local Setup: Instructions for configuring the development environment.