✨ Beautiful CV

Create stunning resumes in minutes — drag, drop, and let AI do the writing.

Features • Stack • Quick Start • Architecture • API • Pricing

---

🌟 Why Beautiful CV?

Building a resume shouldn't be painful. Beautiful CV combines a smooth drag-and-drop editor with AI-powered content generation — so you focus on what matters, and we handle the formatting, wording, and design.

🎯 Drag elements freely • 🤖 AI writes your summaries & skills • 🎨 8+ templates to choose from • 📄 PDF export for just ¥1

Drag-and-drop editor with real-time preview

---

✨ Features

🎯 Visual Drag & Drop Editor Reposition any CV element — name, summary, experience, skills — by simply dragging. No grids, no snapping. Built with @dnd-kit for buttery-smooth interactions.	🤖 AI Content Generation Stuck on how to describe yourself? Let DeepSeek AI write professional summaries, skill lists, and experience descriptions tailored to your job title. 50 generations per day, free.
🎨 Template Marketplace Browse 8 professionally-designed templates — from Tech Startup to Executive Pro, Chinese-English Bilingual to Creative Portfolio. Free and premium options.	📄 One-Click PDF Export Export your CV as a polished PDF with a single click. Client-side rendering via html2pdf.js means instant, high-quality output.
💳 Simple Payments (¥1) Pay via WeChat or Alipay QR code through Xorpay — no Stripe, no business license needed. Manual admin verification as fallback.	🔐 Secure & Private JWT authentication with refresh tokens. Passwords hashed with bcrypt. Rate limiting on AI endpoints. Your data stays yours.
🌐 Chinese-English Bilingual Dedicated bilingual template for Chinese job seekers applying to international companies. Full Chinese + English layout support.	📱 Fully Responsive Works beautifully on desktop, tablet, and mobile. Tailwind CSS ensures a consistent experience across all screen sizes.

---

🛠️ Tech Stack

graph LR
    subgraph Frontend
        React[React 18] --> Vite[Vite 5]
        React --> Tailwind[Tailwind CSS]
        React --> DnD["dnd-kit"]
        React --> HTML2PDF[html2pdf.js]
        React --> Zustand[Zustand]
    end

    subgraph Backend
        Express[Express 4] --> JWT[JWT Auth]
        Express --> RateLimit[Rate Limiting]
        Express --> Helmet[Helmet]
    end

    subgraph Services
        PG[(PostgreSQL)]
        DeepSeek[DeepSeek AI]
        Xorpay[Xorpay Payments]
    end

    Frontend -- Axios --> Backend
    Backend -- pg --> PG
    Backend -- API --> DeepSeek
    Backend -- API --> Xorpay

Loading

Layer	Technology	Why
Frontend	React 18 + TypeScript + Vite	Fast dev, type safety, modern DX
Styling	Tailwind CSS	Utility-first, rapid UI development
Drag & Drop	@dnd-kit	Modern, accessible, performant
State	Zustand + React Context	Lightweight global + auth state
Backend	Express 4 + TypeScript	Mature, flexible, well-typed
Database	PostgreSQL 12+	Reliable, ACID, great ecosystem
AI	DeepSeek (deepseek-chat)	OpenAI-compatible, cost-effective for Chinese content
Payments	Xorpay / PayJS	Personal-friendly, WeChat + Alipay QR
PDF	html2pdf.js (client-side)	No server overhead, instant output

---

🚀 Quick Start

Prerequisites

• Node.js ≥18 • npm ≥9 • PostgreSQL ≥12

1. Clone & Setup

git clone https://github.com/AzarAI-TOP/Beautiful_CV.git
cd Beautiful_CV

# Run the automated setup script
bash setup.sh

Or manually:

# Install dependencies
cd backend && npm install && cd ..
cd frontend && npm install && cd ..

# Configure environment
cp .env.example backend/.env
# Edit backend/.env with your database credentials

2. Start PostgreSQL & Create Database

createdb beautiful_cv
# The schema auto-initializes when the backend starts

3. Launch

# Terminal 1 — Backend (port 5000)
cd backend && npm run dev

# Terminal 2 — Frontend (port 3000)
cd frontend && npm run dev

4. Open

Visit http://localhost:3000 and start building your CV! 🎉

Optional: Seed Template Data

cd backend && npm run db:seed

Optional: Enable Real AI

Add your DeepSeek API key to backend/.env:

DEEPSEEK_API_KEY=sk-your-key-here

Get one at platform.deepseek.com — ~$0.28 per million tokens.

---

🏗️ Architecture

Beautiful_CV/
├── backend/                  # Express API (port 5000)
│   ├── src/
│   │   ├── api/              # Route handlers (6 modules)
│   │   │   ├── auth.ts       #   Signup, login, token refresh
│   │   │   ├── cv.ts         #   CV CRUD operations
│   │   │   ├── templates.ts  #   Template listing
│   │   │   ├── ai.ts         #   DeepSeek content generation
│   │   │   ├── payments.ts   #   Payment orders & webhooks
│   │   │   └── export.ts     #   PDF generation
│   │   ├── models/           # Database query modules
│   │   ├── middleware/       # Auth, error handling, rate limiting
│   │   ├── services/         # DeepSeek, PayJS, Xorpay logic
│   │   ├── config/           # DB pool, schema auto-init
│   │   └── server.ts         # Express entry point
│   └── package.json
├── frontend/                 # React SPA (port 3000)
│   ├── src/
│   │   ├── pages/            # 5 page components
│   │   ├── components/       # AIAssistant, DragDropCanvas, PDFExport
│   │   ├── context/          # AuthContext (JWT state)
│   │   ├── services/         # Axios API layer
│   │   └── Router.tsx        # React Router config
│   └── package.json
├── shared/                   # Shared TypeScript types
├── .env.example              # Environment template
├── setup.sh                  # Automated setup script
└── README.md                 # You are here :)

---

📡 API Reference

Base URL: http://localhost:5000/api

Authentication

Method	Endpoint	Description
POST	/api/auth/signup	Register new user { email, password, name }
POST	/api/auth/login	Login → returns { accessToken, refreshToken }
POST	/api/auth/refresh	Refresh access token

CV Management 🔒

Method	Endpoint	Description
GET	/api/cv	List user's CVs
POST	/api/cv	Create new CV
GET	/api/cv/:id	Get CV by ID
PUT	/api/cv/:id	Update CV (elements, content)
DELETE	/api/cv/:id	Delete CV

Templates

Method	Endpoint	Description
GET	/api/templates	List all templates (8 built-in)

AI Generation 🔒 (50/day limit)

Method	Endpoint	Body
POST	/api/ai/generate-summary	{ job_title, skills[], experience? }
POST	/api/ai/generate-skills	{ job_title, experience_level }
POST	/api/ai/generate-experience	{ job_title, company, role }

Payments

Method	Endpoint	Description
POST	/api/payments/create-order 🔒	Create payment order (returns QR link)
GET	/api/payments/status/:cvId 🔒	Check if CV is paid
POST	/api/payments/notify	Payment webhook (Xorpay/PayJS)

Export 🔒

Method	Endpoint	Description
POST	/api/export/pdf/:cvId	Export CV to PDF

🔒 = Requires Authorization: Bearer <token> header

---

💰 Pricing

Item	Cost
Create & Edit CV	Free
AI Content Generation	Free (50/day)
PDF Download	¥1 RMB per CV
Premium Templates	¥9-19 RMB one-time

Operational Costs (for self-hosting)

Service	Monthly
Vercel (Frontend)	$0
Railway/Render (Backend)	$0–5
PostgreSQL (small DB)	$0–15
DeepSeek API	~$0.01–0.05/gen
Xorpay fees	~1% per tx
Total	~$10–35/month

---

🤝 Contributing

We welcome contributions! Here's how:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to your branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Guidelines

• Run npm run type-check in both backend/ and frontend/ before committing
• Keep API changes backward-compatible
• Write meaningful commit messages

---

📝 License

MIT © 2026 Beautiful CV

---

🙏 Acknowledgments

• DeepSeek for affordable, high-quality AI
• @dnd-kit for the incredible drag-and-drop library
• Tailwind CSS for the design system
• All our early users and contributors ❤️

---

Made with ❤️ for job seekers everywhere
_{Star ⭐ this repo if you find it useful!}