Website bán tài khoản – Next.js + Tailwind + PostgreSQL (Docker)

🎯 Tổng quan sản phẩm

Đây là mã nguồn hoàn chỉnh của website Cursor Pro Shop - một hệ thống thương mại điện tử chuyên nghiệp được xây dựng để bán tài khoản Cursor AI Pro và các sản phẩm phần mềm khác. Hệ thống được phát triển bằng công nghệ hiện đại nhất, đảm bảo hiệu suất cao, bảo mật tốt và trải nghiệm người dùng tuyệt vời.

✨ Tính năng chính

🛒 Hệ thống E-commerce đầy đủ

• Quản lý sản phẩm: Hỗ trợ cả tài khoản (account) và license key, với hệ thống quản lý kho hàng thông minh
• Danh mục sản phẩm: Phân loại đa cấp, hỗ trợ danh mục cha-con linh hoạt
• Giỏ hàng & Thanh toán: Giỏ hàng lưu trữ, tích hợp Polar Payment để xử lý thanh toán an toàn
• Quản lý đơn hàng: Theo dõi trạng thái đơn hàng, tự động gửi thông tin tài khoản/license cho khách hàng
• Social Proof: Hiển thị các giao dịch gần đây để tăng độ tin cậy

👥 Hệ thống người dùng

• Đăng ký/Đăng nhập: Hỗ trợ đăng ký bằng email hoặc OAuth (Google, GitHub)
• Xác thực 2 lớp (MFA): Bảo mật tài khoản với mã OTP
• Quản lý hồ sơ: Người dùng có thể cập nhật thông tin, đổi mật khẩu
• Dashboard cá nhân: Xem lịch sử đơn hàng, đăng ký subscription, uploads

🔐 Admin Panel mạnh mẽ

• Quản lý sản phẩm: CRUD đầy đủ, upload ảnh, quản lý kho, giá cả
• Quản lý đơn hàng: Xem chi tiết, cập nhật trạng thái, xuất dữ liệu
• Quản lý người dùng: Xem danh sách, phân quyền, khóa/mở khóa tài khoản
• Quản lý license: Thêm, xóa, theo dõi license keys đã sử dụng
• Quản lý danh mục: Tạo và sắp xếp danh mục sản phẩm
• Social Proofs: Quản lý các bằng chứng xã hội hiển thị trên trang chủ
• Thống kê tổng quan: Dashboard với các số liệu về doanh thu, đơn hàng, người dùng

💳 Tích hợp thanh toán

• Polar Payment: Tích hợp hoàn chỉnh với Polar.sh để xử lý thanh toán và subscription
• Customer Portal: Khách hàng có thể quản lý subscription trực tiếp
• Webhook: Tự động cập nhật trạng thái đơn hàng khi nhận thanh toán

📧 Hệ thống Email

• Brevo Integration: Gửi email xác nhận đơn hàng, reset mật khẩu, thông báo
• Email Templates: Templates chuyên nghiệp cho các loại email khác nhau

📤 Upload & Media

• Uploadthing: Tích hợp upload ảnh sản phẩm, avatar người dùng
• Quản lý media: Upload, xóa, quản lý các file đã tải lên

🛠️ Công nghệ sử dụng

Frontend

• Next.js 15.3: Framework React với Server Components, App Router
• React 19.1: Thư viện UI hiện đại nhất
• TypeScript 5.8: Type-safe development
• Tailwind CSS 4.1: Utility-first CSS framework
• Shadcn/UI: Component library đẹp và có thể tùy chỉnh
• Framer Motion: Animation mượt mà
• Anime.js: Thư viện animation bổ sung

Backend

• Next.js API Routes: Serverless API endpoints
• Better Auth: Hệ thống authentication hiện đại với OAuth support
• Drizzle ORM: Type-safe database queries
• PostgreSQL: Database quan hệ mạnh mẽ

DevOps & Tools

• Docker & Docker Compose: Containerization, dễ dàng deploy
• ESLint & Biome: Code quality và formatting
• Knip: Phát hiện code không sử dụng
• Nginx: Reverse proxy và load balancing

📋 Yêu cầu hệ thống

• Node.js: 18.x trở lên (khuyến nghị 20.x)
• Bun: Runtime hiện đại (hoặc có thể dùng npm/yarn)
• PostgreSQL: 15.x trở lên
• Docker: 20.x trở lên (nếu deploy bằng Docker)
• RAM: Tối thiểu 2GB (khuyến nghị 4GB cho production)
• Disk: Tối thiểu 10GB trống

🎨 Giao diện

Website được thiết kế với giao diện hiện đại, responsive hoàn toàn trên mọi thiết bị:

• Layout đẹp mắt, dễ sử dụng
• Dark mode/Light mode support
• Animation mượt mà, trải nghiệm tốt
• SEO-friendly với sitemap và meta tags
• Loading states và error handling đầy đủ

🔒 Bảo mật

• Xác thực mạnh mẽ với Better Auth
• Bảo vệ CSRF và XSS
• Hash mật khẩu với bcrypt
• Environment variables cho sensitive data
• SQL injection protection với Drizzle ORM
• Rate limiting và validation đầu vào

📦 Bao gồm trong mã nguồn

• ✅ Toàn bộ source code đã được optimize
• ✅ Database schema và migrations
• ✅ Docker configuration để deploy dễ dàng
• ✅ Nginx configuration cho production
• ✅ Environment variables template
• ✅ Documentation đầy đủ
• ✅ Scripts hỗ trợ deployment

🚀 Tại sao chọn mã nguồn này?

• Code chất lượng cao: Clean code, type-safe, dễ maintain
• Scalable: Có thể mở rộng dễ dàng khi business phát triển
• Production-ready: Đã được test và sẵn sàng deploy
• Documentation: Hướng dẫn chi tiết từ setup đến deployment
• Support: Cấu trúc code rõ ràng, dễ customize theo nhu cầu
• Modern Stack: Sử dụng công nghệ mới nhất, performance tốt

💡 Use Cases

Mã nguồn này phù hợp cho:

• Bán tài khoản Cursor AI Pro, JetBrains, hoặc các phần mềm khác
• Bán license keys cho các sản phẩm phần mềm
• Xây dựng cửa hàng số hóa (digital products store)
• Bán subscription services
• Làm base để phát triển các loại e-commerce khác

📝 Lưu ý quan trọng

• Mã nguồn không bao gồm các API keys và credentials thực tế
• Bạn cần tự setup các dịch vụ bên thứ 3 (Polar, Brevo, Uploadthing, OAuth apps)
• Database sẽ được tạo tự động khi chạy migrations
• Hỗ trợ cả development và production environment

Mã nguồn này là giải pháp hoàn chỉnh để bạn bắt đầu kinh doanh online ngay lập tức!

XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO

Nguồn: Sharecode.vn

📚 Hướng dẫn cài đặt Cursor Pro Shop

Hướng dẫn này sẽ giúp bạn cài đặt và chạy website Cursor Pro Shop từ đầu đến cuối.

📋 Yêu cầu tiên quyết

Trước khi bắt đầu, đảm bảo bạn đã cài đặt:

• Node.js: Phiên bản 18.x trở lên (khuyến nghị 20.x)
• Bun: Runtime hiện đại (hoặc npm/yarn)
• PostgreSQL: Phiên bản 15.x trở lên
• Git: Để clone repository
• Docker & Docker Compose: (Nếu deploy bằng Docker - khuyến nghị)

🚀 Phương pháp 1: Cài đặt với Docker (Khuyến nghị)

Bước 1: Clone mã nguồn

git clone [URL_REPOSITORY]
cd cursor-pro-shop

Bước 2: Cấu hình Environment Variables

1. Sao chép file environment mẫu:

   cp env.example .env
   

2. Mở file .env và điền các thông tin sau:

2.1. Cấu hình Database

DATABASE_URL=postgresql://postgres:minh123@postgres:5432/tkcursorprod

Lưu ý: Nếu dùng Docker, giữ nguyên cấu hình trên. Nếu dùng database riêng, thay đổi connection string.

2.2. Cấu hình Domain

NEXT_PUBLIC_BASE_URL=https://your-domain.com
NEXT_SERVER_APP_URL=https://your-domain.com

Thay your-domain.com bằng domain thực tế của bạn. Với local development, dùng http://localhost:3000

2.3. Cấu hình Authentication

# Tạo secret 32 ký tự (bắt buộc)
BETTER_AUTH_SECRET=your-32-character-secret-here
AUTH_SECRET=your-32-character-secret-here

Bạn có thể tạo secret bằng lệnh: bunx randomstring length=32

2.4. Cấu hình OAuth (Tùy chọn nhưng khuyến nghị)

Google OAuth:

1. Vào Google Cloud Console
2. Tạo OAuth 2.0 Client ID
3. Thêm Authorized JavaScript origins: https://your-domain.com và http://localhost:3000
4. Thêm Authorized redirect URIs: https://your-domain.com/api/auth/callback/google và http://localhost:3000/api/auth/callback/google
5. Copy Client ID và Secret vào .env:

   AUTH_GOOGLE_ID=your-google-client-id
   AUTH_GOOGLE_SECRET=your-google-secret
   

GitHub OAuth:

1. Vào GitHub Developer Settings
2. Tạo OAuth App mới
3. Authorization callback URL: https://your-domain.com/api/auth/callback/github
4. Copy Client ID và Secret vào .env:

   AUTH_GITHUB_ID=your-github-client-id
   AUTH_GITHUB_SECRET=your-github-secret
   

2.5. Cấu hình Email Service (Brevo)

1. Đăng ký tài khoản tại Brevo
2. Vào Settings → API Keys, tạo API key mới
3. Copy API key vào .env:

   BREVO_API_KEY=your-brevo-api-key
   [email protected]
   

2.6. Cấu hình Upload Service (Uploadthing)

1. Đăng ký tài khoản tại Uploadthing
2. Vào Dashboard, tạo App mới
3. Copy API Key và Secret vào .env:

   UPLOADTHING_SECRET_KEY=your-uploadthing-secret-key
   UPLOADTHING_TOKEN=your-uploadthing-token
   

2.7. Cấu hình Payment (Polar - Tùy chọn)

1. Đăng ký tài khoản tại Polar.sh
2. Tạo Organization và lấy Access Token
3. Copy vào .env:

   POLAR_ACCESS_TOKEN=your-polar-access-token
   POLAR_WEBHOOK_SECRET=your-webhook-secret
   POLAR_ENVIRONMENT=production
   

4. Cấu hình sản phẩm trong Polar Dashboard
5. Cập nhật Product IDs trong file src/lib/auth.ts

Bước 3: Chạy ứng dụng với Docker

1. Dừng các container cũ (nếu có):

   docker-compose down
   

2. Build và khởi động tất cả services:

   docker-compose up --build -d
   

3. Đợi database khởi động (khoảng 10-15 giây), sau đó chạy migrations:

   docker-compose exec app bun db:push
   

4. Kiểm tra logs để đảm bảo mọi thứ chạy ổn:

   docker-compose logs -f app
   

Bước 4: Truy cập ứng dụng

Mở trình duyệt và truy cập:

• Website: http://localhost:3001
• Admin Panel: http://localhost:3001/admin

💻 Phương pháp 2: Cài đặt Local Development (Không dùng Docker)

Bước 1: Cài đặt PostgreSQL

Cài đặt PostgreSQL trên máy của bạn và tạo database:

createdb tkcursorprod

Bước 2: Cấu hình Environment

1. Sao chép và cấu hình .env như hướng dẫn ở trên
2. Cập nhật DATABASE_URL để trỏ đến PostgreSQL local:

   DATABASE_URL=postgresql://postgres:password@localhost:5432/tkcursorprod
   

Bước 3: Cài đặt Dependencies

bun install

Hoặc nếu không dùng Bun: npm install hoặc yarn install

Bước 4: Chạy Database Migrations

bun db:push

Bước 5: Khởi động Development Server

bun dev

Truy cập http://localhost:3000

🔧 Các lệnh hữu ích

🌐 Deploy lên Production Server

Deploy với Docker trên Ubuntu Server

Xem file DEPLOY_GUIDE.md để có hướng dẫn chi tiết về:

• Tạo Ubuntu Droplet trên DigitalOcean/VPS
• Cài đặt Docker và Nginx
• Cấu hình Domain và SSL (Let's Encrypt)
• Setup monitoring và backup
• Troubleshooting các vấn đề thường gặp

Tóm tắt các bước deploy:

1. Clone mã nguồn lên server
2. Cấu hình .env với production values
3. Point domain đến server IP
4. Cài đặt Nginx và SSL
5. Chạy docker-compose up -d --build
6. Chạy migrations: docker-compose exec app bun db:push

🔍 Kiểm tra sau khi cài đặt

1. Kiểm tra Database:

   docker-compose exec postgres psql -U postgres -d tkcursorprod -c "\dt"
   

2. Kiểm tra API Health: Truy cập http://localhost:3001/api/test-db
3. Test Authentication: Thử đăng ký/đăng nhập
4. Test Admin Panel: Đăng nhập và kiểm tra các chức năng admin
5. Test Upload: Thử upload ảnh sản phẩm

🐛 Troubleshooting

Lỗi Database Connection

Lỗi Port đã được sử dụng

• Kiểm tra PostgreSQL đã chạy chưa: docker-compose ps
• Kiểm tra DATABASE_URL trong .env
• Với Docker, đảm bảo dùng service name postgres thay vì localhost

  Lỗi Migration

  • Kiểm tra port 3001: netstat -tulpn | grep :3001
  • Thay đổi port trong docker-compose.yml nếu cần

    Lỗi Permission

    • Xóa database và tạo lại: docker-compose exec postgres psql -U postgres -c "DROP DATABASE tkcursorprod; CREATE DATABASE tkcursorprod;"
    • Chạy lại: docker-compose exec app bun db:push

      📞 Hỗ trợ

      Nếu gặp vấn đề trong quá trình cài đặt:

      ✅ Checklist hoàn thành

      Chúc bạn cài đặt thành công! 🎉

      • Với Docker, kiểm tra quyền của volume uploads
      • Chạy: chmod -R 755 uploads
        1. Kiểm tra logs: docker-compose logs -f
        2. Xem file DEPLOY_GUIDE.md để biết thêm chi tiết
        3. Kiểm tra các environment variables đã được cấu hình đúng chưa
        4. Đảm bảo tất cả services bên thứ 3 (Brevo, Uploadthing, Polar) đã được setup
        • ☐ Đã cài đặt các dependencies cần thiết
        • ☐ Đã cấu hình file .env
        • ☐ Đã setup OAuth (Google/GitHub)
        • ☐ Đã setup Brevo email service
        • ☐ Đã setup Uploadthing
        • ☐ Đã setup Polar payment (nếu cần)
        • ☐ Đã chạy database migrations
        • ☐ Đã khởi động ứng dụng thành công
        • ☐ Đã test các chức năng cơ bản