Tech Stack Của Team

Hiểu stack mình dùng và vì sao chọn nó giúp đưa ra quyết định đúng khi build feature mới, thay vì mỗi lần lại phải hỏi "dùng cái gì cho cái này".

Nguyên tắc lõi: Chọn công nghệ ổn định cho hạ tầng, công nghệ đột phá cho tính năng.

Nhìn Tổng Quan#

┌─────────────────────────────────────────────────────────────┐
│                        FRONTEND                             │
│  NextJS + Tailwind CSS + Shadcn UI                          │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                        BACKEND                              │
│  NextJS API Routes (đơn giản) │ FastAPI (ML/AI nặng)        │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                       DATABASE                              │
│  Supabase (PostgreSQL + Auth + Realtime + Storage)          │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                  DỊCH VỤ BÊN NGOÀI                          │
│  Claude/OpenAI │ DataForSEO │ SerpAPI │ Google APIs         │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                      DEPLOYMENT                             │
│  Railway (hosting) + Cloudflare (domains/CDN)               │
└─────────────────────────────────────────────────────────────┘

Frontend#

NextJS#

React framework full-stack -- có sẵn routing, server-side rendering, API routes. Mình chọn vì developer experience tốt, community lớn, và Claude Code hiểu nó rất rõ (nhiều training data). Quan trọng nhất là frontend + API nằm chung một project, deploy một lần là xong.

NextJS API Routes hay FastAPI?

Tailwind CSS#

Utility-first CSS framework. Styling nhất quán mà không cần viết CSS custom, iterate cực nhanh vì đổi style ngay trong HTML. AI cũng hiểu rất tốt -- prompt "thêm padding 4 cho card" là nó biết ngay p-4.

Shadcn UI#

Bộ components xây trên Radix UI, nhưng khác với component libraries thông thường: components được copy thẳng vào project chứ không phải dependency. Nghĩa là mình customize thoải mái, không bị lock-in.

Cài bằng bunx shadcn-ui@latest add button -- không phải bun add.

Backend#

NextJS API Routes#

Backend endpoints nằm cạnh frontend, chung deployment, shared types. Đủ xài cho CRUD và các operations thông thường.

FastAPI (Python)#

Khi cần Python -- chủ yếu là ML libraries (scikit-learn, HDBSCAN) -- thì dùng FastAPI. Tự động tạo API docs, async support tốt, type hints giúp AI generate code chính xác.

Pattern của mình: NextJS frontend → NextJS API → FastAPI → ML Processing, rồi trả kết quả ngược lại.

User → NextJS Frontend → NextJS API → FastAPI → ML Processing
                                   ↓
                              Trả kết quả

Database#

Supabase#

Open-source Firebase alternative xây trên PostgreSQL thật (không proprietary). Mình dùng vì nó gom nhiều thứ vào một chỗ:

Free tier hào phóng, row-level security có sẵn -- đủ dùng cho phần lớn projects.

better-auth#

Authentication library cho TypeScript. Mình dùng thay Supabase Auth vì linh hoạt hơn, hoạt động với bất kỳ database nào, session management và customization tốt hơn.

AI & Machine Learning#

Claude (Anthropic)#

LLM chính cho agents. Follow complex instructions tốt nhất, code generation xuất sắc, reasoning mạnh. Khi cần AI "hiểu và làm theo" yêu cầu phức tạp thì Claude là lựa chọn đầu tiên.

OpenAI#

Mình dùng OpenAI chủ yếu cho embeddings (text-embedding-3-small) -- model embedding tốt nhất hiện tại, ổn định, nhanh.

Phân vai: OpenAI cho embeddings, Claude cho generation.

Agent Frameworks#

SEO Data Providers#

DataForSEO#

API cho SERP data, rankings, SEO metrics. SERP data toàn diện, có data AI Overviews, giá cạnh tranh, docs tốt. Đây là provider chính của mình.

SerpAPI#

Google Search API. Đơn giản hơn DataForSEO cho basic searches, trả tiền theo lượt, hỗ trợ nhiều search engines.

Deployment#

Railway#

Platform-as-a-Service -- deploy từ GitHub không cần config. Hỗ trợ NextJS, FastAPI, PostgreSQL, HTTPS tự động, quản lý env vars. Giá hợp lý.

GitHub Push → Railway phát hiện → Build → Deploy → Live

Push code lên GitHub là Railway tự build và deploy. Không cần setup CI/CD riêng.

Cloudflare#

DNS, CDN, quản lý domain. DNS propagation nhanh, DDoS protection, SSL miễn phí, caching static assets. Mọi domain mình đều quản lý qua Cloudflare.

Công Cụ Phát Triển#

Claude Code#

AI coding assistant chạy trên terminal/VS Code. Hiểu toàn bộ project context, đọc/viết files trực tiếp, chạy commands được. Đây là development partner chính của team -- xem chi tiết ở Cách Sử Dụng Claude Code.

Git + GitHub#

Version control và code hosting. Chuẩn industry, collaboration features tốt, GitHub Actions cho CI/CD, issue tracking. Chi tiết ở Cách Sử Dụng Git.

Chọn Stack Cho Project Mới#

Khi bắt đầu project mới, hỏi theo thứ tự:

1. Web app? → NextJS + Supabase + Tailwind + Shadcn
2. Cần ML? → Thêm FastAPI backend
3. Cần AI agent? → Thêm Claude API + memory storage
4. Cần SEO data? → Thêm DataForSEO hoặc SerpAPI

Stack Mặc Định Theo Loại Sản Phẩm#

Tham Khảo Nhanh#