← Vibe coding với Next.js

Bài 19 · Nâng cao · 34 phút

Dự án cuối khoá: ship web bán hàng

Biên soạn bởi Nguyễn Anh Tuấn

Capstone: ship một web bán hàng online có ví điện tử hoàn chỉnh của riêng bạn - đăng ký/đăng nhập Better-auth (Google/Zalo/quên mật khẩu), nạp tiền QR qua SePay (idempotency), mua hàng trừ số dư an toàn (khoá chống trừ lố), email giao dịch qua BullMQ, và trang quản trị phân quyền Casbin - đã qua review bảo mật (OWASP) và a11y (WCAG) bằng bộ Subagents, rồi tự deploy lên VPS riêng + tên miền (SSL certbot). Tiêu chí "xong": khách nạp tiền và mua được hàng ở domain của bạn. Ghép mọi kỹ năng cả khoá.

Tới đây mèo con đã học đủ mảnh ghép. Bài cuối này không thêm kiến thức mới - nó là lúc tự ghép tất cả thành một web bán hàng có ví hoàn chỉnh của riêng mình, chạy ở tên miền riêng. Đây là phần thưởng, và cũng là bài kiểm tra thật sự.

Một sản phẩm xong không đo bằng số tính năng, mà bằng một luồng chạy trọn. Đây là đường đi của khách mà mèo con phải làm cho chạy được từ đầu tới cuối:

🔐 Đăng nhậpBetter-auth💳 Nạp tiềnSePay QR🛒 Mua hàngtrừ số dư an toàn✉️ EmailBullMQ🌐 domain riêng · 🔒 HTTPS (certbot) · 🛡️ admin Casbin · ✅ đã review OWASP + WCAG
Khách đăng nhập → nạp tiền (QR SePay) → mua hàng (trừ số dư an toàn) → nhận email biến động - tất cả ở domain riêng có HTTPS, admin Casbin quản lý phía sau.

Chạy được trọn luồng này ở tên miền của mèo con chính là definition of done cho bản MVP.

Đừng đòi Claude dựng cả sản phẩm trong một câu. Dùng đúng bộ công cụ đã học để dựng từng mảng cho chắc:

  • Tài liệu BA + CLAUDE.md: cho Claude ngữ cảnh và luật của business.
  • Plan mode: nhờ Claude lập kế hoạch từ BA, mèo con duyệt rồi mới cho dựng.
  • Skills/Subagents: hàng rào chuẩn chuyên gia (OWASP, WCAG, SEO, shadcn, Prettier, data integrity).
  • Thứ tự: dữ liệu → auth → nạp tiền → mua hàng → email/queue → admin → deploy.

Trước khi cho người ngoài dùng, qua hai cổng bằng bộ Subagents: rà bảo mật (OWASP) cho đăng nhập, nạp tiền, quyền admin; và rà a11y (WCAG) cho giao diện. Tiền và quyền là chỗ sai một ly đi một dặm - đừng bỏ qua bước này.

Trung thực

Đây vẫn là một DEMO chạy được, không phải sản phẩm hoàn hảo. Với dòng tiền lớn hay khi đông khách, một kỹ sư rà lại phần lõi vẫn rất đáng giá. Tự chủ không có nghĩa là làm một mình mãi mãi.

Cuối cùng, tự chủ hạ tầng: deploy lên VPS riêng, trỏ tên miền về và cấp SSL bằng certbot. Sản phẩm giờ sống ở một địa chỉ chuyên nghiệp, HTTPS, do chính mèo con làm chủ - không phụ thuộc nền tảng nào.

Việc cuối là tự mình đóng vai khách và chạy lại trọn luồng ở tên miền: tạo tài khoản, nạp tiền qua QR, mua một món, kiểm số dư bị trừ đúng, và nhận email biến động. Đừng tin là "chắc chạy" - hãy bấm thật và xem.

Tiêu chí 'xong'

Ở tên miền của mèo con (qua HTTPS): một khách nạp tiền và mua được hàng, nhận email biến động, còn admin quản được đơn và số dư. Đạt được điều này là mèo con đã ship một sản phẩm của riêng mình.

Chúc mừng mèo con! Từ người chưa code, mèo con đã tự dựng và làm chủ một web bán hàng có ví, hiểu nó vận hành ra sao và biết đâu là core value. Thứ quý nhất mang về không phải đoạn code, mà là sự tự chủ và tư duy kiểm chứng - luôn bấm thử, luôn rà lại, không tin mù quáng AI.

Cảm ơn & đi tiếp

Cảm ơn mèo con đã đi hết khoá. Nếu sản phẩm này giúp được mèo con, hãy ghé gian hàng Ưu đãi (góp cá 🐟 nuôi Mèo qua các link affiliate, bạn không tốn thêm gì), và tiếp tục học những khoá khác của Mèo Ham Học. Hãy học như thể bạn sẽ tồn tại mãi mãi.

Câu hỏi thường gặp

Các bài trước dạy từng mảng riêng. Capstone là lúc mèo con TỰ GHÉP tất cả thành một sản phẩm chạy được của riêng mình, từ đầu tới khi lên domain. Không có bước mới về kiến thức - mới ở chỗ mèo con tự điều phối cả quy trình.

Cứ MVP trước: làm xong và chạy được lõi - đăng nhập, nạp tiền, mua hàng trừ số dư, email biến động, trang admin - rồi mới tô thêm. Đừng ôm mọi tính năng mơ ước cùng lúc; ship cái chạy được trước.

Definition of done phải KIỂM ĐƯỢC: một khách tạo tài khoản, nạp tiền qua QR, mua một món và bị trừ đúng số dư, nhận email biến động - tất cả ở tên miền của mèo con qua HTTPS. Chạy trọn được luồng đó là xong MVP.

Theo đúng mạch khoá: dữ liệu (PostgreSQL + Drizzle) → đăng nhập (Better-auth) → nạp tiền (SePay + idempotency) → mua hàng (khoá số dư) → email & hàng đợi (BullMQ) → admin (Casbin) → deploy (VPS + domain + SSL). Mỗi mảng xong thì cho subagent bảo mật rà.

Mèo con đã có một sản phẩm của riêng mình và hiểu nó vận hành ra sao. Đi tiếp: mở rộng tính năng theo nhu cầu khách, dọn nợ kỹ thuật dần, và ở chỗ nhạy cảm/quy mô lớn thì cân nhắc thuê kỹ sư - như bài trước đã nói. Quan trọng nhất: luôn kiểm chứng, làm chủ sản phẩm của mình.

Tick những điều em tự tin làm được. Càng lên cao, em càng hiểu sâu.

Tick những điều em tự tin làm được sau khi học bài này. 0/6

Trả lời vài câu để chắc rằng em đã nắm bài.

Câu 1/3 Điểm: 0

Tiêu chí "xong" (definition of done) của capstone là gì?

Bài tập về nhà

  1. 1

    Mốc 1 - Nền dự án & dữ liệu

    Chuẩn bị: tài liệu BA, CLAUDE.md, cài bộ Skills/Subagents, rồi dựng mô hình dữ liệu (PostgreSQL + Drizzle) và generate & migrate.

    ✅ Hoàn thành khi: Repo có CLAUDE.md + .claude/; database có các bảng lõi (tài khoản, sản phẩm, ví, đơn, giao dịch) sau khi migrate.

  2. 2

    Mốc 2 - Đăng nhập

    Gắn Better-auth: đăng ký/đăng nhập email + mật khẩu, Google/Zalo, quên mật khẩu. Cho subagent bảo mật rà.

    ✅ Hoàn thành khi: Tạo được tài khoản, đăng nhập lại được, mật khẩu lưu dạng hash; danh sách phát hiện bảo mật đã xử lý.

  3. 3

    Mốc 3 - Nạp tiền

    Cho nạp tiền qua QR SePay với idempotency; xác thực webhook. Thử gửi webhook trùng mã giao dịch.

    ✅ Hoàn thành khi: Nạp tiền cộng đúng số dư một lần; webhook trùng KHÔNG cộng lần hai; webhook giả bị từ chối.

  4. 4

    Mốc 4 - Mua hàng an toàn

    Cho mua hàng trừ số dư, dùng khoá (optimistic/pessimistic) chống trừ lố. Thử nhiều yêu cầu mua cùng lúc.

    ✅ Hoàn thành khi: Số dư không bao giờ âm hay bị trừ lố; mua đồng thời vẫn ra số dư đúng.

  5. 5

    Mốc 5 - Email & admin

    Gửi email biến động qua hàng đợi BullMQ; dựng admin dashboard + phân quyền Casbin. Thử lọt quyền bằng tài khoản khách.

    ✅ Hoàn thành khi: Khách nhận email biến động; tài khoản khách gọi /admin bị chặn (403); admin quản được hàng/kho/giao dịch.

  6. 6

    Mốc 6 - Deploy & nghiệm thu

    Deploy lên VPS riêng + tên miền + SSL. Cho subagent WCAG rà a11y. Rồi tự chạy lại TRỌN luồng ở domain.

    ✅ Hoàn thành khi: Ở tên miền của mèo con (HTTPS): một khách nạp tiền và mua được hàng, nhận email - tiêu chí "xong" đạt.