Đã đăng vào about 6 hours ago 6 phút đọc

[Open Source] #39 - Reactive Resume: Kiến trúc Monorepo và nghệ thuật Render PDF "Pixel-Perfect" với NestJS & Puppeteer

Việc tạo ra một bản Resume (CV) đẹp, chuẩn chỉnh và dễ dàng tùy biến luôn là nhu cầu thiết yếu của mọi ứng viên. Tuy nhiên, việc xây dựng một công cụ vừa cho phép chỉnh sửa trực quan (Visual Editor), vừa đảm bảo chất lượng in ấn (PDF) là một bài toán hóc búa về mặt kỹ thuật. Reactive Resume không chỉ là một công cụ tạo CV mã nguồn mở phổ biến nhất hiện nay, mà còn là một "bản mẫu" hoàn hảo về kiến trúc Monorepo và quy trình HTML-to-PDF hiện đại.

Dưới góc độ kỹ thuật, dự án này phô diễn cách phối hợp nhịp nhàng giữa NestJS, React và Headless Browser để tạo ra trải nghiệm người dùng không thua kém các dịch vụ trả phí.

Github: https://github.com/AmruthPillai/Reactive-Resume

🛠️ 1. Nền tảng công nghệ: Sức mạnh của Nx Monorepo

Dự án được tổ chức theo mô hình Monorepo sử dụng công cụ Nx, giúp quản lý đồng thời cả ứng dụng Frontend, Backend và các thư viện dùng chung một cách cực kỳ hiệu quả:

Frontend (Vite & React): Đảm bảo tốc độ phản hồi nhanh (Fast Refresh) trong quá trình phát triển. Sử dụng Zustand để quản lý state và Zundo để hỗ trợ tính năng Undo/Redo cho người dùng.
Backend (NestJS & Prisma): Một cấu trúc server-side vững chắc với kiến trúc Module, giúp việc quản lý Business Logic và tương tác với PostgreSQL trở nên an toàn về kiểu dữ liệu (Type-safe).
Tailwind CSS & LinguiJS: Sự kết hợp hoàn hảo để tạo giao diện linh hoạt và hỗ trợ đa ngôn ngữ (i18n) một cách mượt mà.
Minio (S3 Compatible): Giải pháp lưu trữ đối tượng mã nguồn mở, dùng để quản lý ảnh đại diện và các tệp tin PDF đã được xuất bản.

🏗️ 2. Trụ cột kiến trúc: Sự tách biệt giữa Builder và Artboard

Điểm độc đáo nhất của Reactive Resume nằm ở cách nó xử lý giao diện soạn thảo. Dự án tách biệt hoàn toàn phần "Điều khiển" và phần "Hiển thị":

Artboard Isolation (apps/artboard): Đây là một ứng dụng React độc lập được nhúng vào ứng dụng chính thông qua iframe. Tại sao phải làm vậy? Kỹ thuật này giúp cô lập hoàn toàn CSS của mẫu CV (Template) khỏi CSS của thanh công cụ (Builder), tránh xung đột phong cách và đảm bảo khi in ra, CV sẽ trông chính xác như những gì người dùng thấy.
Giao tiếp qua postMessage: Khi bạn thay đổi một dòng chữ trong Builder, dữ liệu được gửi sang Artboard thông qua API postMessage. Artboard nhận dữ liệu, re-render mẫu CV ngay lập tức với hiệu suất cực cao.
Schema-driven Design: Mọi dữ liệu Resume được chuẩn hóa theo cấu trúc nghiêm ngặt (dựa trên chuẩn JSON Resume). Điều này cho phép người dùng đổi từ Template này sang Template khác chỉ trong 1 giây mà không bao giờ lo mất dữ liệu.

🔄 3. Các kỹ thuật "Pro-level" trong mã nguồn

HTML-to-PDF via Puppeteer: Thay vì dùng các thư viện vẽ PDF thủ công (rất khó tùy biến CSS), Reactive Resume sử dụng Puppeteer (chạy qua Browserless). Nó sẽ mở một trình duyệt Chrome ngầm, truy cập vào trang Artboard, chờ đợi Google Fonts tải xong, sau đó thực hiện lệnh "Print to PDF". Kết quả là bản in đạt độ chính xác đến từng pixel so với bản thiết kế trên web.
Optimistic Updates: Sử dụng TanStack Query, ứng dụng thực hiện cập nhật trạng thái ngay lập tức trên UI trước khi gửi yêu cầu lưu vào Database. Điều này tạo ra trải nghiệm "không độ trễ" ngay cả khi mạng chậm.
AI-Powered Resume: Dự án tích hợp trực tiếp OpenAI SDK, cho phép người dùng "nâng cấp" CV bằng cách nhờ AI sửa lỗi chính tả, thay đổi giọng văn hoặc tóm tắt kinh nghiệm làm việc một cách chuyên nghiệp.

📊 4. Workflow: Từ chỉnh sửa đến file PDF hoàn chỉnh

Sơ đồ dưới đây mô tả luồng dữ liệu khi người dùng thao tác trên ứng dụng:

⚖️ 5. So sánh chiến lược

Tiêu chí	Reactive Resume	Canva / Novoresume	MS Word / Google Docs
Quyền riêng tư	Tuyệt đối (Self-host được)	Phụ thuộc bên thứ 3	Tuyệt đối
Độ linh hoạt	Rất cao (CSS/JS dựa trên web)	Cao (Kéo thả đồ họa)	Thấp (Dễ lệch format)
Tính nhất quán	Schema-driven (Đổi mẫu dễ)	Phải làm lại từ đầu	Phải làm lại từ đầu
Chi phí	Hoàn toàn miễn phí	Trả phí cho Premium	Miễn phí/Trả phí

✅ Kết luận: Tại sao Reactive Resume là hình mẫu?

Reactive Resume là một minh chứng cho thấy việc kết hợp đúng đắn các công nghệ hiện đại có thể giải quyết những bài toán cũ theo cách tinh tế hơn. Việc sử dụng Nx Monorepo giúp code base luôn sạch sẽ, trong khi kỹ thuật Iframe Artboard và Headless Browser PDF giải quyết triệt để vấn đề đồng bộ hiển thị và in ấn.

Đối với các developer, đây là một kho tài liệu mẫu về:

Cách triển khai NestJS với Prisma trong thực tế.
Cách quản lý state phức tạp với Zustand.
Cách vận hành một hệ thống HTML-to-PDF quy mô lớn.

Hy vọng bài phân tích này giúp bạn có thêm cảm hứng để xây dựng những ứng dụng tuyệt vời. Đừng quên Upvote và Follow mình để đón chờ những số tiếp theo trong series Open Source nhé!