Vibe coding với Next.js

Biến CEO, product owner và junior dev thành người vibe code ở TẦM CHUYÊN GIA: dùng Claude Code dựng một web bán hàng online có ví điện tử bằng Next.js + PostgreSQL + Redis - khách tạo tài khoản, nạp tiền qua quét QR SePay, mua hàng thì trừ số dư; có trang quản trị (admin dashboard) quản lý hàng/kho/giao dịch/số dư và phân quyền Casbin. Tính năng cấp senior: Better-auth (Google/Zalo/mật khẩu, quên mật khẩu), email giao dịch, idempotency, hàng đợi BullMQ, khoá số dư (optimistic/pessimistic lock) chống trừ lố. Bí quyết: bộ Skills/Subagents chuyên gia (OWASP, WCAG, SEO, shadcn-react, Tailwind, Prettier, data integrity) làm hàng rào cho AI viết đúng chuẩn; kèm tài liệu BA mẫu, kết nối GitHub để vibe trên web/điện thoại, rồi tự chủ deploy lên VPS riêng + tên miền. Nói thẳng: đây là khoá DEMO - sản phẩm chạy được nhưng chưa hoàn hảo, có lúc vẫn cần thuê dev chuyên nghiệp để đi tiếp; giá trị lớn nhất là bạn TỰ CHỦ, hiểu sản phẩm và biết đâu là core value.

Lộ trình học

1. 1 Vibe coding là gì & ai làm được "Vibe coding" (thuật ngữ Andrej Karpathy nêu đầu 2025) và làn sóng dùng AI agent để xây sản phẩm mà không cần là lập trình viên: làm được gì một mình và đâu là giới hạn. Định hướng cả khoá: dựng bằng Next.js + PostgreSQL rồi TỰ CHỦ deploy lên VPS riêng kèm tên miền riêng (không phụ thuộc nền tảng nào). Ghi công Anthropic, cài Claude Code và mở phiên đầu tiên. Cơ bản · 18′
2. 2 Nghĩ như người làm sản phẩm Kỹ năng cốt lõi không phải gõ code mà là MÔ TẢ chính xác: đi từ ý tưởng tới spec mà AI hiểu được - PRD gọn, user story, cắt phạm vi thành MVP, và tiêu chí "xong" (definition of done). Vì sao "mô tả mơ hồ thì kết quả mơ hồ" (garbage in, garbage out). Kèm một tài liệu BA (business analysis) mẫu cho dự án web bán hàng - tải về repo của bạn qua R2 rồi chỉnh theo nghiệp vụ riêng, để dự án bài bản như dân chuyên nghiệp. Cơ bản · 22′
3. 3 Sản phẩm số chạy thế nào Mô hình tinh thần cho người không code, nhìn qua lăng kính một app Next.js + PostgreSQL: frontend vs backend, database, hosting/deploy, domain là gì; repo/file/thư mục; commit/branch/PR nghĩa là gì khi nhìn lướt. Kèm sơ đồ "giải phẫu một app Next.js đã deploy". Cơ bản · 20′
4. 4 Dựng app Next.js đầu tiên Build-along: dùng Claude Code dựng khung một web bán hàng online bằng Next.js (ví dụ xuyên suốt cả khoá) và chạy ở máy mình (localhost) - chiến thắng đầu tiên cầm được. Hiểu cấu trúc một dự án Next.js ở mức nhìn lướt, và thực hành vòng lặp: mô tả rõ ràng, AI dựng, xem kết quả, rồi chỉnh. Vận dụng · 26′
5. 5 GitHub & vibe trên web/điện thoại Đưa code lên GitHub để lưu trữ an toàn và có lịch sử: tạo repository, hiểu commit/branch/PR ở mức dùng được. Kết nối Claude Code với GitHub và uỷ quyền truy cập (OAuth) để vibe coding mọi lúc - ngay trên web (claude.ai/code) hay điện thoại, không cần mở máy tính. Vì sao có version control là tấm lưới an toàn cho người vibe. Vận dụng · 22′
6. 6 Thêm tính năng & sửa khi hỏng Lặp để sản phẩm lớn dần: yêu cầu thay đổi, đọc lướt diff để biết AI đổi gì, và khi AI làm hỏng thì khôi phục (rewind/checkpoint), gỡ lỗi bằng cách mô tả triệu chứng cho AI. Khi nào nên dừng và mô tả lại từ đầu thay vì chữa tiếp. Vận dụng · 22′
7. 7 Lưu dữ liệu với PostgreSQL Cho sản phẩm biết nhớ thông tin: thiết kế mô hình dữ liệu cho web bán hàng - tài khoản, sản phẩm, kho, đơn hàng, ví/số dư và lịch sử giao dịch - lưu vào PostgreSQL qua Drizzle ORM (mô tả bảng bằng TypeScript, type-safe), nối vào app Next.js ở mức khái niệm; chuỗi kết nối để trong biến môi trường (env), không hardcode. Trung thực về quyền riêng tư và dữ liệu người dùng - đủ để ship mà không gây hại. Vận dụng · 24′
8. 8 Tăng tốc & chịu tải với Redis Tối ưu hạ tầng để sản phẩm nhanh và chịu được đông người: caching với Redis. Vì sao đọc từ cache (trong bộ nhớ) nhanh hơn nhiều việc hỏi PostgreSQL mỗi lần; cache cái gì cho đáng, vòng đời cache (TTL) và làm mới khi dữ liệu đổi (invalidation); nhờ Claude Code thêm Redis vào app Next.js. Redis sẽ được script cài sẵn khi dựng VPS ở bài sau. Vận dụng · 22′
9. 9 Dạy AI luật riêng: CLAUDE.md Dạy AI luật riêng của business bạn qua file CLAUDE.md: ghi quy ước, ngữ cảnh sản phẩm và ràng buộc để Claude bám đúng thay vì đoán mò. Lấy ví dụ web bán hàng: mô tả miền nghiệp vụ (sản phẩm, đơn, thanh toán), quy tắc code và chuẩn chất lượng - để mọi phiên vibe sau đều nhất quán, không phải nhắc lại từ đầu. Vận dụng · 22′
10. 10 Bộ Skills & Subagents như chuyên gia Trang bị "đồ nghề" để AI làm việc theo chuẩn chuyên gia: tải về và cài bộ Skills/Subagents của Mèo - rà soát bảo mật OWASP, kiểm tra a11y theo WCAG, tối ưu SEO (để Google tìm thấy sản phẩm), dựng giao diện với shadcn-react + Tailwind CSS, tự format/lint bằng Prettier, và giữ toàn vẹn dữ liệu (data integrity). Vì sao có hàng rào này thì người không-code vẫn ship được ở tầm senior. (Bộ skills tải qua R2, một cú bấm.) Nâng cao · 28′
11. 11 Đăng nhập với Better-auth Trọn vòng tài khoản khách bằng Better-auth: đăng ký, đăng nhập username/mật khẩu, OAuth qua Google và Zalo, và luồng quên mật khẩu (gửi email đặt lại). Khái niệm session, băm mật khẩu (password hashing), vì sao TUYỆT ĐỐI đừng tự chế phần xác thực. Cho Subagent bảo mật rà soát trước khi mở cho người dùng. Nâng cao · 26′
12. 12 Nạp tiền QR qua SePay & idempotency Cho khách nạp tiền vào ví bằng cách quét mã QR qua SePay: luồng tạo yêu cầu nạp - khách quét QR chuyển khoản - SePay gửi webhook xác nhận - cộng số dư. Vì sao cần idempotency (chống xử lý trùng) để một lần chuyển khoản không bị cộng tiền hai lần dù webhook gửi lại nhiều lần; xử lý trạng thái giao dịch an toàn. Tiền bạc là chỗ sai một ly đi một dặm. (Kèm affiliate SePay - công khai minh bạch.) Nâng cao · 26′
13. 13 Hàng đợi BullMQ & khoá số dư Xử lý việc nặng và nhạy cảm đúng cách: hàng đợi (queue) với BullMQ (trên nền Redis) để chạy nền - gửi email giao dịch (biến động số dư, đặt lại mật khẩu), cập nhật đơn - không bắt khách chờ và tự thử lại khi lỗi. Và bài toán số dư tài khoản khách: dùng khoá lạc quan (optimistic lock) hay khoá bi quan (pessimistic lock) để tránh trừ lố khi nhiều yêu cầu chạy cùng lúc (race condition). Nâng cao · 28′
14. 14 Trang quản trị & phân quyền Casbin Dựng trang quản trị (admin dashboard) cho web bán hàng: quản lý tài khoản, hàng & kho, giao dịch nạp tiền và số dư khách. Tách quyền rạch ròi giữa khách thường (trang mua hàng) và admin bằng Casbin: vai trò (role), chính sách (policy) và vì sao authorization (được làm gì) khác authentication (bạn là ai). Subagent bảo mật rà soát để admin không lọt ra ngoài. Nâng cao · 26′
15. 15 Metrics, audit log & báo cáo Audit log mọi action admin & auth event; metrics báo cáo toàn diện: sức khoẻ hệ thống, rủi ro user/business/hàng, tiền vào ra (đối soát SePay) và cảnh báo khi vượt ngưỡng. Nâng cao · 26′
16. 16 Deploy tự chủ trên VPS riêng Trái tim của khoá: đưa sản phẩm lên VPS của RIÊNG bạn - tự chủ trọn hạ tầng, rẻ hơn hẳn khi đông người dùng và không bị khoá vào nền tảng nào. Một lệnh curl duy nhất tải script (tự host trên meohamhoc.vn) rồi tự cài cả máy chủ - Nginx, Node, PostgreSQL, Redis, và SSL/HTTPS miễn phí bằng certbot (Let's Encrypt, tự gia hạn) - cùng một công cụ dòng lệnh thêm/bớt site (cảm hứng từ hostman). Trung thực về đánh đổi: tự chủ và tiết kiệm, đổi lại bạn nhận trách nhiệm vận hành. (Kèm affiliate VPS - công khai minh bạch, bạn không tốn thêm gì.) Nâng cao · 30′
17. 17 Mua tên miền & trỏ về VPS Cho sản phẩm một địa chỉ riêng chuyên nghiệp: mua tên miền (domain) qua nhà đăng ký, trỏ DNS (bản ghi A) về VPS vừa dựng, rồi cấp chứng chỉ SSL/HTTPS miễn phí cho tên miền bằng certbot (Let's Encrypt). Phân biệt domain với hosting, và mẹo chọn tên miền. (Kèm affiliate nhà đăng ký tên miền.) Vận dụng · 18′
18. 18 Trung thực: chi phí & khi nào cần thuê người Bài "tỉnh táo" giữ đúng tinh thần Mèo: chi phí khi sản phẩm lớn lên (AI, VPS, tên miền), sở hữu mã nguồn (IP), nợ kỹ thuật (technical debt). Nói thẳng: những gì dựng trong khoá là một DEMO chạy được chứ chưa phải sản phẩm hoàn hảo - có lúc vẫn cần thuê kỹ sư chuyên nghiệp để đi tiếp; và có nền tảng managed (PaaS) làm thay phần vận hành (đổi lại đắt hơn, phụ thuộc nhà cung cấp). Giá trị lớn nhất khoá để lại: bạn TỰ CHỦ, hiểu sản phẩm của mình và biết đâu là core value - luôn kiểm chứng, không tin mù quáng kết quả AI. Vận dụng · 20′
19. 19 Dự án cuối khoá: ship web bán hàng 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á. Nâng cao · 34′