🎓 Master Plan Training Intern — 3 Tháng

Phương pháp: Học qua Mini Project | Mỗi project deploy thực tế | Git workflow từ ngày đầu

📋 Tổng quan

📌 Quy tắc chung (áp dụng cho tất cả projects)

• Mỗi project phải có repository riêng trên GitHub

• Tuân thủ Git workflow: main branch là production, làm việc trên feature branch, tạo PR trước khi merge

• Commit message theo chuẩn: feat:, fix:, chore:, docs:

• Mỗi project phải được deploy trước khi coi là hoàn thành

🗓️ THÁNG 1 — Frontend

Mục tiêu: Nắm vững ReactJS, Tailwind CSS, Vite. Biết deploy lên Vercel. Làm quen Git workflow.

📦 Project 1 — Landing Page Clone

https://templatemo.com/live/templatemo_614_quantix_saas

Mô tả: Clone lại 1 landing page có sẵn bằng React + Tailwind

Topics học được:
- Cài đặt project với Vite
- Cấu trúc thư mục React cơ bản
- JSX syntax
- Components & Props
- Tailwind CSS utility classes
- Responsive design (mobile-first)
- Git: init repo, commit, push, tạo branch, tạo PR
- Deploy lên Vercel lần đầu

📦 Project 2 — Todo App

https://mini-todo-list-junlyvo.vercel.app/

Mô tả: Ứng dụng quản lý công việc với đầy đủ chức năng CRUD, filter, lưu vào localStorage

Topics học được:
- useState — quản lý state cục bộ
- useEffect — side effects, lifecycle
- Event handling (onClick, onChange, onSubmit)
- List rendering với .map()
- localStorage để làm việc với data
- Tailwind: forms, buttons, animations cơ bản
- Git: feature branch workflow

Done Criteria:
- [ ] Thêm, sửa, xóa, đánh dấu hoàn thành todo
- [ ] Filter: All / Active / Completed
- [ ] Data không mất khi refresh trang (localStorage)
- [ ] UI clean, responsive
- [ ] Deployed lên Vercel
- [ ] GitHub repo có PR cho từng feature

📦 Project 3 — GitHub User Search

https://github-user-search-js.vercel.app/

Mô tả: Ứng dụng tìm kiếm thông tin GitHub user theo username, sử dụng GitHub REST API (không cần auth key). UI gồm search bar, card hiển thị avatar, username, bio, số repos/followers/following, ngày tham gia và hỗ trợ dark/light theme.

Topics học được:
- useContext — global state cho theme dark/light
- Custom hooks (useDebounce, useGithubUser)
- Fetch API / Axios với GitHub REST API
- Async/Await, xử lý loading & error states
- Tailwind: dark mode (dark: prefix), theme transition

Done Criteria:
- [ ] Tìm kiếm GitHub user theo username
- [ ] Hiển thị card: avatar, tên, @username, bio, repos, followers, following, ngày join
- [ ] Có loading state khi đang fetch
- [ ] Có error state khi không tìm thấy user (“No results found”)
- [ ] Chuyển đổi dark / light theme, lưu preference vào localStorage
- [ ] Deployed lên Vercel

📦 Project 4 — Quick Blog

Mô tả: Ứng dụng blog mini với đầy đủ authentication, phân quyền user/admin, tích hợp TinyMCE editor và Cloudinary upload ảnh. Đây là project phức tạp nhất tháng 1, tổng hợp toàn bộ kiến thức đã học.

Topics học được:
- React Router v6: multi-page, protected routes, redirect theo role
- useContext + useReducer: auth state toàn cục
- Axios: gọi API thực (GET, POST, DELETE), attach JWT vào headers
- localStorage: lưu token, đồng bộ giữa các tab (storage event)
- Skeleton loading với Tailwind
- TinyMCE: rich text editor tích hợp vào React
- Cloudinary: upload ảnh bìa trực tiếp từ frontend
- Phân quyền route theo role (user / admin)
- Lazy loading / Code splitting theo route
- Dark / light theme toggle

Chức năng chi tiết:

Xác thực:
- Đăng ký tài khoản (email, username, password)
- Đăng nhập / Đăng xuất
- Lưu token vào localStorage, đồng bộ giữa các tab

Trang chủ:
- Hiển thị danh sách bài viết dạng card grid
- Tìm kiếm bài viết theo tiêu đề
- Skeleton loading khi đang tải

Bài viết:
- Xem chi tiết bài viết
- Tạo bài viết mới (tiêu đề, nội dung TinyMCE, tag, ảnh bìa Cloudinary)
- Xóa bài viết (có dialog xác nhận)
- Quản lý bài viết cá nhân (yêu cầu đăng nhập)

Phân quyền:
- User: xem và xóa bài viết của chính mình
- Admin: xem và xóa tất cả bài viết

Quản lý người dùng (chỉ Admin):
- Xem danh sách người dùng
- Xóa người dùng
- Thay đổi role (user ↔︎ admin)

Giao diện:
- Chuyển đổi theme sáng / tối
- Header với menu user (My Posts, User Management, Login, Logout)
- Phân quyền route theo role

⚠️ Lưu ý: Project này call API backend có sẵn (được cung cấp sẵn) — intern tập trung hoàn toàn vào phần Frontend: gọi API, xử lý auth flow, phân quyền và UI.

Done Criteria:
- [ ] Đăng ký / đăng nhập hoạt động, token lưu localStorage
- [ ] Token đồng bộ khi mở nhiều tab (dùng storage event)
- [ ] Trang chủ hiển thị card grid, có skeleton loading
- [ ] Tìm kiếm bài viết theo tiêu đề hoạt động
- [ ] Tạo bài viết với TinyMCE editor và upload ảnh Cloudinary
- [ ] Xóa bài viết có dialog xác nhận
- [ ] User chỉ thấy/xóa bài của mình; Admin thấy/xóa tất cả
- [ ] Trang User Management chỉ Admin truy cập được
- [ ] Dark/light theme toggle, lưu preference
- [ ] Protected routes redirect đúng theo role
- [ ] Deployed lên Vercel

🗓️ THÁNG 2 — Backend

Mục tiêu: Xây dựng REST API với Node.js + Express. Làm việc với MongoDB. Viết Swagger docs và API tests.

📦 Project 5 — Book Management API

Mô tả: API quản lý sách và tác giả — CRUD đầy đủ với MongoDB. Có quan hệ giữa Book và Author, là nền tảng để học Mongoose relationships.

Entities:
- Author: name, bio, nationality, birthYear
- Book: title, description, price, publishedYear, genre, coverImage, author (ref → Author)

Topics học được:
- Node.js cơ bản, CommonJS vs ESModule
- Express: routing, middleware, request/response
- MongoDB Atlas setup
- Mongoose: Schema, Model, validation, ref & populate
- REST API conventions (status codes, naming)
- Query params: filter theo genre, search theo title
- Postman để test API
- Git: backend project structure
- Deploy lên Render (free tier)

Endpoints:

Done Criteria:
- [ ] CRUD đầy đủ cho cả Author và Book
- [ ] GET /books/:id trả về thông tin author đầy đủ (dùng populate)
- [ ] Filter sách theo genre: GET /books?genre=fiction
- [ ] Search sách theo title: GET /books?search=harry
- [ ] Validation dữ liệu đầu vào (title, author required,…)
- [ ] Kết nối MongoDB Atlas thành công
- [ ] Error handling middleware (404, 500,…)
- [ ] Deployed lên Render
- [ ] README có hướng dẫn chạy local và link API

📦 Project 6 — Auth API

Mô tả: API xác thực người dùng với JWT — Register, Login, Protected Routes. Bảo mật với bcrypt, phân quyền RBAC (user/admin), hỗ trợ đổi mật khẩu và đăng xuất.

Topics học được:
- JWT (JSON Web Token): tạo, verify, lưu trữ (LocalStorage / Cookie httpOnly / Memory)
- bcrypt: hash password
- Middleware xác thực (authMiddleware): attach token vào Header Authorization: Bearer <token>
- Role-based access control — RBAC (admin/user)
- Xử lý lỗi có cấu trúc: { message, error, statusCode }
- Xác thực token an toàn, dễ mở rộng & tích hợp

Endpoints:

Response mẫu — Login thành công:

{
  "message": "Đăng nhập thành công",
  "user": {
    "id": "662c8b7f3e9b2d4b7f1a2c3d",
    "name": "Nguyen Van A",
    "email": "user@example.com",
    "role": "user"
  },
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "expiresIn": "1d"
}

Response mẫu — Lỗi:

{
  "message": "Email hoặc mật khẩu không đúng",
  "error": "Unauthorized",
  "statusCode": 401
}

Done Criteria:
- [ ] POST /api/auth/register — đăng ký, hash password bằng bcrypt
- [ ] POST /api/auth/login — trả về JWT + thông tin user
- [ ] GET /api/auth/me — protected route, trả về user info từ token
- [ ] PUT /api/auth/change-password — yêu cầu đăng nhập, verify mật khẩu cũ trước khi đổi
- [ ] POST /api/auth/logout — xóa token phía client
- [ ] Password không được lưu plain text
- [ ] Token hết hạn sau 1 ngày (expiresIn: "1d")
- [ ] Middleware authMiddleware bảo vệ đúng các protected routes
- [ ] Error response có cấu trúc nhất quán (message, error, statusCode)
- [ ] Deployed lên Render

📦 Project 7 — Blog API + Swagger + Testing

Mô tả: API quản lý blog hoàn chỉnh với docs và test coverage

Topics học được:
- CRUD nâng cao: pagination, filtering, sorting
- Swagger / OpenAPI 3.0 với swagger-jsdoc + swagger-ui-express
- Jest + Supertest: unit test và integration test
- Test coverage report
- MongoDB: indexes, aggregation cơ bản
- File upload với Multer (avatar, thumbnail)

Done Criteria:
- [ ] Endpoints: Posts (CRUD), Categories, Tags, Comments
- [ ] Pagination: ?page=1&limit=10
- [ ] Filter: ?category=tech&tag=nodejs
- [ ] Swagger UI accessible tại /api-docs
- [ ] Tất cả endpoints có Swagger documentation
- [ ] Test coverage ≥ 70%
- [ ] Deployed lên Render với Swagger UI live

🗓️ THÁNG 3 — Fullstack + PostgreSQL

Mục tiêu: Kết nối Frontend và Backend. Học PostgreSQL. Hoàn thành Capstone App.

🏸 Project 8 — Badminton Class Booking System (Fullstack)

Mô tả: Ứng dụng quản lý và đăng ký lớp học cầu lông. Admin có thể tạo lớp học, quản lý học viên và giới hạn số lượng học viên trong mỗi lớp. Người dùng có thể xem lịch học, đăng ký tham gia và quản lý các lớp đã đăng ký. Đây là project đầu tiên intern tự kết nối Frontend với Backend do chính mình viết.

Entities:

• User:
  • role: admin | user

• Class
  • title
  • description
  • coachName
  • level (beginner, intermediate, advanced)
  • startDate
  • schedule
  • location
  • maxStudents
  • createdBy (ref → User)

• Enrollment
  • class (ref → Class)
  • user (ref → User)
  • enrolledAt

Chức năng:

Public

• Xem danh sách lớp học sắp khai giảng

• Tìm kiếm lớp học theo tên

• Lọc lớp học theo trình độ

• Xem chi tiết lớp học

User

• Đăng ký tham gia lớp học (yêu cầu đăng nhập)

• Hủy đăng ký lớp học

• Xem danh sách các lớp đã đăng ký

Admin

• Tạo lớp học mới

• Chỉnh sửa thông tin lớp học

• Xóa lớp học

• Xem danh sách học viên của từng lớp

Business Rules

• Không thể đăng ký trùng một lớp học

• Không thể đăng ký khi lớp học đã đủ số lượng học viên

• Chỉ Admin mới được tạo, chỉnh sửa và xóa lớp học

• Mỗi lớp học phải hiển thị số lượng học viên hiện tại và số lượng tối đa

Topics học được:

• Axios: GET, POST, PATCH, DELETE từ React, attach JWT vào headers

• React Query (@tanstack/react-query): caching, refetching, mutations

• Authentication & Authorization (Role-based Access Control)

• CORS configuration

• Environment variables trên cả FE và BE

• Authentication flow end-to-end: login → lưu token → gọi protected API

• Many-to-many relationship qua Enrollment model

• Search, Filter và Pagination

• Loading states, empty states, error boundaries

• Protected Routes

• Deploy FE (Vercel) + BE (Render) và kết nối thực tế

Done Criteria:

• Danh sách lớp học hiển thị đúng, có loading state

• Tìm kiếm và lọc lớp học hoạt động

• Đăng ký / hủy đăng ký lớp học hoạt động, cập nhật realtime qua React Query

• Không thể đăng ký trùng lớp học

• Không thể đăng ký khi lớp học đã đủ chỗ

• User xem được danh sách lớp đã đăng ký

• Chỉ Admin mới được tạo, chỉnh sửa và xóa lớp học

• Danh sách học viên hiển thị chính xác

• CORS được cấu hình đúng

• FE deployed Vercel, BE deployed Render, kết nối hoạt động

• Không có API key hay secret nào bị expose trong code

📦 Project 9 — PostgreSQL Mini App (Expense Tracker)

Mô tả: Ứng dụng theo dõi chi tiêu cá nhân — học SQL và so sánh với MongoDB

Topics học được:
- PostgreSQL: tables, data types, constraints
- SQL cơ bản: SELECT, INSERT, UPDATE, DELETE, JOIN
- Prisma ORM: schema, migrations, queries
- So sánh NoSQL (MongoDB) vs SQL (PostgreSQL): khi nào dùng cái nào
- Transactions
- Database relationships: one-to-many, many-to-many

Done Criteria:
- [ ] Schema có ít nhất 3 tables có quan hệ với nhau
- [ ] Prisma migration chạy thành công
- [ ] CRUD hoạt động qua Prisma
- [ ] Có ít nhất 1 query dùng JOIN
- [ ] Viết ngắn gọn so sánh MongoDB vs PostgreSQL (file NOTES.md)
- [ ] Deployed lên Render (PostgreSQL add-on)

🏆 Capstone Project — E-Commerce Mini

Thời gian: Tuần 3 + Tuần 4

Mô tả: Ứng dụng mua sắm online fullstack hoàn chỉnh — production-ready. Intern tự xây dựng từ database schema đến UI, cover toàn bộ kiến thức 3 tháng.

Tech Stack:
- Frontend: React + Vite + Tailwind + React Query + React Router
- Backend: Node.js + Express + Prisma
- Database: PostgreSQL (primary)
- Deploy: Vercel (FE) + Render (BE + DB)

Entities:
- User: id, email, username, password, role (user/admin)
- Category: id, name, slug
- Product: id, name, description, price, stock, images, categoryId
- Cart / CartItem: userId, productId, quantity
- Order / OrderItem: userId, status, totalPrice, shippingAddress, items

Chức năng:

Khách hàng (User):
- Xem danh sách sản phẩm, filter theo category, search theo tên
- Xem chi tiết sản phẩm
- Thêm / xóa / cập nhật số lượng sản phẩm trong giỏ hàng
- Đặt hàng từ giỏ hàng (nhập địa chỉ giao hàng)
- Xem lịch sử đơn hàng và trạng thái đơn hàng

Admin:
- Quản lý sản phẩm: thêm, sửa, xóa, upload ảnh (Cloudinary)
- Quản lý danh mục
- Xem và cập nhật trạng thái đơn hàng (Pending → Processing → Shipped → Delivered)
- Dashboard: tổng doanh thu, số đơn hàng, sản phẩm bán chạy

Topics tổng hợp:
- Toàn bộ kiến thức 3 tháng
- PostgreSQL: relations, transactions (đặt hàng phải trừ stock atomically)
- Prisma: complex queries, transactions
- React Query: cart state, optimistic updates
- Swagger docs cho toàn bộ API
- README chuyên nghiệp: setup, features, screenshots, live demo

Done Criteria:
- [ ] Đăng ký / đăng nhập hoạt động, phân quyền user/admin đúng
- [ ] Danh sách sản phẩm có filter theo category và search theo tên
- [ ] Giỏ hàng hoạt động: thêm, xóa, cập nhật số lượng, persist khi reload
- [ ] Đặt hàng thành công, stock sản phẩm giảm đúng (dùng transaction)
- [ ] Lịch sử đơn hàng hiển thị đúng trạng thái
- [ ] Admin quản lý được sản phẩm, danh mục, đơn hàng
- [ ] Dashboard admin hiển thị thống kê cơ bản
- [ ] Upload ảnh sản phẩm qua Cloudinary
- [ ] Swagger docs đầy đủ cho toàn bộ API
- [ ] Test coverage ≥ 60% cho backend
- [ ] Responsive trên mobile
- [ ] FE deployed Vercel, BE deployed Render, kết nối hoạt động
- [ ] README đầy đủ: setup, features, screenshots, live demo link
- [ ] GitHub repo clean: không có .env, node_modules

📊 Tổng kết lộ trình

Tuần 1-4   │ Tháng 1 │ Project 1→4           │ Frontend    │ Deploy: Vercel
Tuần 5-8   │ Tháng 2 │ Project 5→7           │ Backend     │ Deploy: Render
Tuần 9-12  │ Tháng 3 │ Project 8→9 + Capstone│ Fullstack   │ Vercel + Render

📝 Git Workflow chuẩn (áp dụng từ Project 1)

# Bắt đầu feature mới
git checkout -b feat/ten-feature

# Commit thường xuyên
git add .
git commit -m "feat: add todo filter by status"

# Push và tạo PR
git push origin feat/ten-feature
# → Tạo Pull Request trên GitHub
# → Review → Merge vào main
# → Vercel/Render tự động deploy