🧋 Học lập trình Full-stack qua dự án Yotea

Giáo trình 36 bài, đi từ con số 0 đến làm chủ toàn bộ website bán trà sữa Yotea — từ dòng app.use() đầu tiên cho tới lúc tự tay thêm một chức năng hoàn chỉnh và deploy.

👋 Giáo trình này dành cho ai?

Yêu cầu tối thiểu: biết dùng máy tính, biết mở terminal, biết HTML/CSS cơ bản. Mọi thứ còn lại giáo trình sẽ dạy.

🏗️ Dự án Yotea là gì?

Một website bán trà sữa hoàn chỉnh gồm 2 phần chạy song song:

┌─────────────────────────┐        HTTP/JSON        ┌──────────────────────────┐        ┌────────────┐
│      yotea-fe           │  ───────────────────▶   │       yotea-be           │  ───▶  │  MongoDB   │
│  React 18 + Redux       │                         │  Express + Mongoose      │        │  yotea     │
│  http://localhost:3000  │  ◀───────────────────   │  http://localhost:8080   │  ◀───  │  :27017    │
└─────────────────────────┘                         └──────────────────────────┘        └────────────┘
     Người dùng nhìn thấy                              Xử lý nghiệp vụ + bảo mật            Lưu dữ liệu

Phía khách hàng: xem thực đơn, lọc/tìm kiếm sản phẩm, xem chi tiết, chọn mức đá – mức đường, thêm giỏ hàng, đặt hàng, bình luận, đánh giá sao, yêu thích sản phẩm, đọc tin tức, xem hệ thống cửa hàng, gửi liên hệ, quản lý tài khoản và lịch sử đơn hàng.

Phía quản trị: dashboard, CRUD sản phẩm – danh mục – tin tức – slider – tài khoản, duyệt đơn hàng, kiểm duyệt bình luận, xử lý liên hệ.

🗺️ Lộ trình 36 bài

Phần 0 · Khởi động

Hiểu bức tranh tổng thể và dựng được môi trường chạy dự án.

Phần 1 · Backend cơ bản

Xây được một API CRUD hoàn chỉnh bằng Express + Mongoose.

Phần 2 · Backend nâng cao

Những kỹ thuật khiến API trở nên "thật": lọc dữ liệu, quan hệ, bảo mật, tài liệu.

Phần 3 · Frontend cơ bản

Hiểu bộ khung React của dự án và cách nó nói chuyện với backend.

Phần 4 · Quản lý state

Redux — nơi dữ liệu dùng chung của toàn ứng dụng sinh sống.

Phần 5 · Từng chức năng, từ đầu đến cuối

Mỗi bài đi trọn một chức năng: giao diện → Redux → API → controller → database.

Phần 6 · Nâng cao & hoàn thiện

Từ "chạy được" lên "làm nghề được".

📐 Mỗi bài học có gì?

🎯 Sau bài này bạn sẽ    →  mục tiêu rõ ràng, đo được
📋 Cần chuẩn bị          →  kiến thức/công cụ tiên quyết
1. Lý thuyết             →  giải thích bằng ví dụ đời thường trước
2. Soi code thật         →  trích nguyên văn code dự án, kèm đường dẫn:số dòng
3. 🛠️ Tự tay làm          →  từng bước gõ code, có file mới để bạn tự viết
4. ✅ Kiểm chứng          →  chạy thế nào, phải thấy kết quả gì
5. 🐞 Lỗi thường gặp      →  bảng lỗi ↔ nguyên nhân ↔ cách sửa
6. 📝 Bài tập             →  có lời giải gấp lại, đừng mở vội
📌 Tóm tắt               →  chốt kiến thức trong 5 gạch đầu dòng

🚀 Bắt đầu ngay

Chưa cài gì cả? Nhảy thẳng vào Bài 02 — Cài đặt môi trường để có dự án chạy được trên máy trong ~20 phút, rồi quay lại Bài 01 để hiểu mình vừa chạy cái gì.

Muốn hiểu trước rồi mới làm? Bắt đầu từ Bài 01 — Tổng quan dự án Yotea.

💡 Lời khuyên để học hiệu quả

1. Gõ lại, đừng copy-paste. Ngón tay nhớ lâu hơn con mắt.
2. Làm hết phần "Tự tay làm" trước khi sang bài mới — kiến thức các bài xếp chồng lên nhau.
3. Bí quá 15 phút thì đọc mục "Lỗi thường gặp", chưa ra thì mở lời giải, nhưng phải gõ lại.
4. Mở song song 2 cửa sổ: một bên giáo trình, một bên VS Code.
5. Đừng bỏ qua các hộp ⚠️. Dự án này là bài tập lớn của sinh viên nên có nhiều chỗ làm chưa chuẩn — biết chỗ sai và biết vì sao sai chính là lúc bạn lên trình.