Resume-Builder — Next.js 作品集模板

SHA-256: bc1177cecf50026ba932a61bbeeeb3426387ac86b7b89cfe2fd71c617ef8312d

2026-10-14T18:57:26.551Z

# RenderCV 🚀
> A high-performance, client-side Resume Builder with zero-latency live PDF rendering.

[![Next.js](https://img.shields.io/badge/Next.js-14-black?style=flat&logo=next.js)](https://nextjs.org/)
[![React](https://img.shields.io/badge/React-18-blue?style=flat&logo=react)](https://reactjs.org/)
[![Redux](https://img.shields.io/badge/Redux_Toolkit-764ABC?style=flat&logo=redux)](https://redux-toolkit.js.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat&logo=tailwind-css)](https://tailwindcss.com/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 💡 Overview
**🚀 Live Demo:** [Click here to try RenderCV](https://render-cv-beige.vercel.app)

RenderCV is a privacy-first, fully client-side resume generation tool. It allows users to dynamically build, reorder, and format their professional experience while generating a production-ready PDF in real-time. 

By leveraging a background-thread architecture for PDF geometry calculations, the application maintains a buttery-smooth React UI without the typical thread-blocking delays associated with heavy document generation.

## ✨ Key Features
* **Zero-Latency Live Preview:** Watch your PDF generate instantly as you type, with document rendering fully decoupled from the main UI thread.
* **Intelligent Chronological Auto-Sorting:** The engine automatically parses raw date strings and sorts Experience and Education arrays. "Current" roles are pinned to the top, followed by strict reverse-chronological ordering based on dates.
* **Persistent Auto-Save:** Powered by a custom LocalStorage synchronization hook, ensuring you never lose your progress even if the browser crashes.
* **Complex State Management:** Deeply nested array mutations (Experience, Education, Projects) handled safely and predictably via Redux Toolkit.
* **Dynamic Templating Engine:** Swap between professional layouts (Classic, Modern) with a single click.

## 🧠 Technical Architecture & Challenges Solved

Building a live PDF renderer in the browser introduces severe performance bottlenecks. Here is how RenderCV solves them:

1. **The Ghost-Clone Bug (React Reconciliation):** * *Problem:* Rapidly swapping array items (like moving a job up or down) caused `@react-pdf/renderer` to lose track of text blocks, rendering duplicate "ghost" data.
   * *Solution:* Engineered a dynamic `globalOrderKey` reconciliation strategy. By mapping the exact order of IDs into a master key at the document root, the PDF engine is forced to cleanly destroy and rebuild the component tree on every structural swap, guaranteeing 100% data accuracy.

2. **UI State vs. Render State Conflicts (Sorting UX):** * *Problem:* Auto-sorting the Redux state while a user is actively typing dates causes input fields to unexpectedly jump and swap positions in the UI.
   * *Solution:* Decoupled the form's local entry order from the document's render order. Implemented a `sortChronologically` middleware utility that intercepts the Redux payload *right before* it injects into the React-PDF instance. The UI form remains stable for the user, while the generated PDF remains perfectly reverse-chronological.

3. **Main Thread Blocking:** * *Problem:* Calculating PDF word-wraps and page breaks requires massive CPU power, causing the React form to freeze on every keystroke.
   * *Solution:* Implemented the `usePDF` background hook to isolate document calculation. The React form updates instantly, while the PDF engine asynchronously generates Blob URLs in the background, rendering them safely in an isolated iframe.

## 🛠️ Getting Started

### Prerequisites
Make sure you are running a **64-bit version** of Node.js (v18.17.0 or higher) to handle the PDF compilation.

### Installation

1. Clone the repository:
   ```bash
   git clone [https://github.com/kaifgowani/Resume-Builder.git](https://github.com/kaifgowani/Resume-Builder.git)

2. Navigate into the directory:
   ```Bash
   cd Resume-Builder

3. Install dependencies:
   ```Bash
   npm install

4. Start the development server:
   ```Bash
   npm run dev

5. Open http://localhost:3000 in your browser.

🚀 Future Roadmap
[ ] Implement user authentication via Firebase/Supabase.

[ ] Add cloud database synchronization for multi-device access.

[ ] Expand the template library with highly customizable color themes.

[ ] Integrate AI-powered bullet point optimization.

🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Built with coffee and late-night debugging by Kaif Gowani.