1) Giới Thiệu Dự Án
🚀 Credit Score Prediction App
Một ứng dụng fullstack thực thụ dự đoán điểm tín dụng — từ frontend, backend API, database đến ML model — tất cả deploy riêng biệt trên cloud, $0 chi phí hosting.
Đây không phải là một bài tập nhỏ chạy trên localhost. Đây là một hệ thống hoàn chỉnh với các service kết nối với nhau qua internet, giống như cách các ứng dụng thực tế vận hành.
🌐 Live Demo
⚡ API Docs
📂 Backend Repo
📂 Frontend Repo
💡 Điểm đáng chú ý
Tại sao project này đặc biệt?
- ✅ Fullstack thực thụ — Frontend gọi REST API, backend kết nối database, mỗi service deploy riêng biệt
- ✅ 100% miễn phí — Vercel free, Render free, Supabase free. Ai cũng deploy được!
- ✅ Auto Deploy (CI/CD) — Push code lên GitHub → tự động build & deploy. Không cần SSH!
- ✅ API-first design — Swagger UI, Pydantic validation, CORS middleware, graceful degradation
- ✅ Giải quyết bài toán thực tế — Cold start, CORS, version pinning, error handling
2) Tech Stack & Kiến Trúc Hệ Thống
🛠️ Technology Stack
| Layer | Công nghệ | Hosting | Chi phí |
|---|---|---|---|
| Frontend | Next.js 14 + Tailwind CSS | Vercel | $0 (Free tier) |
| Backend | Python + FastAPI | Render.com | $0 (Free tier) |
| Database | PostgreSQL | Supabase | $0 (Free tier) |
| ML Model | XGBoost | File JSON trong repo | $0 |
| Monitoring | UptimeRobot | UptimeRobot.com | $0 (Free tier) |
🏗️ Kiến trúc hệ thống
System Architecture
🔄 Luồng hoạt động
User nhập dữ liệu
User điền form 13 fields trên website frontend được host trên Vercel.
Frontend gửi request
Next.js gửi POST request tới Backend API trên Render.com.
Backend validate & predict
FastAPI validate input bằng Pydantic → đưa dữ liệu vào model XGBoost để predict.
Lưu kết quả
Kết quả prediction được lưu vào Supabase PostgreSQL để tracking.
Trả response
Backend trả JSON response → Frontend hiển thị credit score + recommendation.
3) Frontend — Next.js + Vercel
🌐 Tại sao chọn Next.js + Vercel?
Next.js là framework React phổ biến nhất, và Vercel là nhà phát triển Next.js — triển khai cực kỳ nhanh, zero config, free tier hào phóng.
📋 Chức năng Frontend
📝 Form nhập liệu
Form 13 fields với validation: thu nhập, tuổi, số khoản vay, loại hình vay...
📊 Hiển thị kết quả
Hiển thị credit score, phân loại risk level, recommendations cải thiện điểm.
🎨 UI/UX
Tailwind CSS responsive, dark/light mode, loading states, error handling.
⚡ Performance
Static generation, optimized bundle, lazy loading components.
🚀 Deploy lên Vercel
Kết nối GitHub repo
Vào vercel.com → Import project từ GitHub.
Cấu hình vercel.json
Thêm file vercel.json với {"framework": "nextjs"} để Vercel detect đúng framework.
Set Environment Variables
Thêm NEXT_PUBLIC_API_URL trỏ đến backend URL trên Render.
Lưu ý quan trọng
Vercel không tự detect được Next.js nếu thiếu file vercel.json với config framework. Đây là lỗi phổ biến khiến deploy thất bại!
4) Backend — FastAPI + Render
⚡ Tại sao chọn FastAPI + Render?
FastAPI là framework Python nhanh nhất cho API, tự động sinh Swagger docs. Render.com hỗ trợ deploy Python app miễn phí, auto-deploy từ GitHub.
📋 Tính năng Backend
🔗 REST API
Endpoints: /predict, /health, /history. Swagger UI tự động tại /docs.
✅ Validation
Pydantic models validate tất cả input fields — type checking, range validation, error messages rõ ràng.
🔒 CORS Middleware
Config CORS cho phép frontend domain gọi API. Không dùng wildcard * trong production!
🛡️ Graceful Degradation
API vẫn trả kết quả predict ngay cả khi database mất kết nối — chỉ bỏ qua bước lưu log.
📝 Cấu trúc API chính
| Method | Endpoint | Mô tả |
|---|---|---|
| POST | /predict | Nhận input 13 fields → trả credit score prediction |
| GET | /health | Health check endpoint (cho UptimeRobot) |
| HEAD | /health | HEAD method cho UptimeRobot ping |
| GET | /history | Lấy lịch sử predictions từ database |
| GET | /docs | Swagger UI — API documentation tự động |
🚀 Deploy lên Render
Kết nối GitHub repo
Vào render.com → New Web Service → chọn repo backend.
Cấu hình Build & Start
Build command: pip install -r requirements.txt
Start command: uvicorn main:app --host 0.0.0.0 --port $PORT
Pin Python version
Tạo file .python-version chứa version cụ thể (ví dụ: 3.11.7).
Set Environment Variables
Thêm DATABASE_URL (Supabase connection string) và các biến cần thiết.
5) Database — Supabase PostgreSQL
🗄️ Tại sao chọn Supabase?
Supabase cung cấp PostgreSQL managed database miễn phí, có dashboard quản lý trực quan, SQL editor, và connection string sẵn sàng.
🆓 Free Tier
500MB storage, 2 projects miễn phí, API rate limit hào phóng cho side projects.
🔧 Dễ setup
Tạo project → copy connection string → paste vào Render env vars. Xong!
📊 Dashboard
Table editor, SQL editor, logs — quản lý data trực quan ngay trên browser.
🔒 Bảo mật
Row Level Security (RLS), SSL connection, API keys riêng biệt.
📝 Database Schema
Bảng chính: predictions
CREATE TABLE predictions (
id SERIAL PRIMARY KEY,
input_data JSONB NOT NULL,
credit_score FLOAT NOT NULL,
risk_level VARCHAR(20),
created_at TIMESTAMP DEFAULT NOW()
);Mỗi lần user gửi form predict, kết quả sẽ được lưu vào bảng này để tracking và phân tích sau.
6) ML Model — XGBoost
🤖 Machine Learning Pipeline
Model XGBoost được train offline trên dataset credit scoring, sau đó export thành file JSON và đưa vào repo backend. Khi API nhận request, model load từ file và predict realtime.
📥 13 Input Features
- Thu nhập hàng năm
- Tuổi
- Số khoản vay đang có
- Tỷ lệ sử dụng tín dụng
- Lịch sử thanh toán trễ
- Và nhiều features khác...
📤 Output
- Credit Score: Điểm số từ 300-850
- Risk Level: Low / Medium / High
- Recommendations: Gợi ý cải thiện điểm tín dụng
Tại sao lưu model dạng JSON trong repo?
Với free tier hosting, cách đơn giản nhất là bundle model cùng code. File JSON nhẹ, load nhanh, và không cần external storage. Phù hợp cho model nhỏ (<50MB).
7) CI/CD & Auto Deploy
🔄 Zero-Config CI/CD
Cả Vercel lẫn Render đều tích hợp GitHub — mỗi lần push code, hệ thống tự động build và deploy. Không cần SSH, không cần viết pipeline, không cần config server!
📋 Workflow CI/CD
Developer push code lên GitHub
Commit và push lên branch main.
GitHub Webhooks trigger build
Vercel và Render nhận webhook → bắt đầu pull code mới.
Tự động build
Vercel: next build. Render: pip install + uvicorn start.
Deploy tự động
Build thành công → auto deploy lên production. Thất bại → giữ version cũ.
So sánh CI/CD Flow
| Platform | Trigger | Build Time | Rollback |
|---|---|---|---|
| Vercel | Push to main | ~30-60 giây | ✅ 1-click rollback |
| Render | Push to main | ~2-5 phút | ✅ Manual redeploy |
8) Giải Quyết Cold Start — Bài Toán Thực Tế Của Free Tier
🧊 Cold Start là gì?
Render free plan sẽ tắt server sau 15 phút idle (không có request). Khi user truy cập lại, server phải "thức dậy" — mất 30-120 giây. Đây là trải nghiệm user rất tệ!
🛠️ Giải pháp: UptimeRobot Keep-Alive
📡 UptimeRobot
Dịch vụ monitoring miễn phí — ping endpoint /health mỗi 5 phút để giữ server luôn "thức".
🔧 Cấu hình endpoint
Endpoint /health phải hỗ trợ cả GET và HEAD method — vì UptimeRobot mặc định gửi HEAD request.
Code endpoint /health
@app.get("/health")
@app.head("/health")
async def health_check():
return {"status": "healthy", "timestamp": datetime.now().isoformat()}Lưu ý: Cần decorate cả @app.get và @app.head để UptimeRobot hoạt động đúng.
Tạo tài khoản UptimeRobot
Đăng ký miễn phí tại uptimerobot.com.
Thêm monitor mới
Monitor type: HTTP(s) → URL: https://your-app.onrender.com/health → Interval: 5 phút.
Kết quả
Server luôn sẵn sàng, user không phải chờ cold start. Uptime gần như 100%!
9) Bài Học Rút Ra Khi Deploy
Dưới đây là những bài học "đốt thời gian" mà tôi đã trải qua — hy vọng giúp bạn tránh được!
Python Version Pinning
Render mặc định dùng Python mới nhất (3.14) — nhiều thư viện chưa hỗ trợ → phải tạo file .python-version để pin version cụ thể (ví dụ: 3.11.7).
Vercel Framework Detection
Vercel không detect được Next.js nếu thiếu vercel.json với {"framework": "nextjs"}. Deploy sẽ thất bại hoặc chạy sai mode.
Requirements Version Range
Trong requirements.txt, nên dùng >= thay vì == để tránh conflict giữa local và server. Ví dụ: fastapi>=0.100.0.
CORS Configuration
CORS phải config đúng domain frontend trên backend. Không bao giờ dùng * (wildcard) trong production — đó là lỗ hổng bảo mật!
Graceful Degradation
Thiết kế API sao cho vẫn trả kết quả predict ngay cả khi database mất kết nối. Chỉ bỏ qua bước lưu log — không crash toàn bộ request.
HEAD Method cho Health Check
UptimeRobot gửi HEAD request — nếu endpoint chỉ hỗ trợ GET thì ping sẽ thất bại. Phải cấu hình endpoint hỗ trợ cả GET và HEAD.
📊 Tổng kết các lỗi phổ biến
| Vấn đề | Nguyên nhân | Giải pháp |
|---|---|---|
| Build fail trên Render | Python version quá mới | File .python-version |
| Vercel deploy sai | Không detect Next.js | vercel.json config |
| CORS blocked | Wildcard hoặc thiếu domain | Whitelist frontend domain |
| Cold start chậm | Render free spin down | UptimeRobot keep-alive |
| API crash khi DB down | Không có error handling | Try/catch + graceful degradation |
| UptimeRobot fail | Chỉ hỗ trợ GET | Thêm HEAD method |
10) Kết Luận & Source Code
🎯 Tóm tắt
Project này chứng minh rằng bạn hoàn toàn có thể build và deploy một ứng dụng fullstack ML thực tế mà không tốn đồng nào. Từ frontend, backend, database đến ML model — tất cả chạy trên cloud, auto deploy, monitoring tự động.
📂 Source Code & Demo
🌐 Live Demo
credit-score-frontend-xi.vercel.app
Dùng thử ngay — nhập thông tin và xem AI dự đoán credit score!
📂 Frontend Source
GitHub — credit-score-frontend
Next.js 14 + Tailwind CSS. Fork và customize theo ý bạn!
🚀 Bước tiếp theo cho bạn
Clone & chạy local
Fork cả 2 repo, chạy thử trên máy. Hiểu flow data từ form → API → model → DB.
Deploy bản của bạn
Tạo tài khoản Vercel + Render + Supabase → deploy app riêng. Thực hành CI/CD thực tế!
Mở rộng tính năng
Thêm auth, dashboard analytics, retrain model, A/B testing... Biến nó thành portfolio project!
🎓 Học Fullstack & ML cùng MinAI
Muốn build thêm nhiều project fullstack + ML? Khám phá các khóa học Data Science, Machine Learning, Web Development tại MinAI — với AI Tutor hỗ trợ 24/7!
Xem khóa học →