Overview — Master Frontend
"Không hời hợt, nghiên cứu sâu."
Lộ trình này không phải checklist công nghệ để "học cho xong". Đây là hệ thống rèn luyện để bạn trở thành người mà team tìm đến khi production gặp vấn đề lúc 2 giờ sáng — định nghĩa của Senior 5+.
Khóa học gồm những gì?
| Khái niệm | Mô tả |
|---|---|
| 8 Stage | 0 (Foundation) → 1 (Tooling) → 2–7 (6 Project thực chiến) → 8 (Consolidation) |
| 133+ module | Mỗi module có kiến thức, Spiral 3 vòng, Exit Criteria cụ thể |
| 6 Project | SaaS Landing, E-commerce Checkout, Admin Dashboard, Social Feed, Design System, Legacy Migration |
| 0 timeline cứng | Không "hoàn thành trong 3 tháng". Chỉ có thứ tự và Exit Criteria. |
Core Loop — Vòng xoắn ốc vĩnh cửu
Bạn không bao giờ "xong". Sau mỗi Project (Stage 2–7), bắt buộc viết ít nhất 1 ADR và 1 War Story trước khi sang Stage tiếp theo. Sau Stage 8, quay lại Stage 0 với góc nhìn mới — lần này đọc source code thay vì tutorial.
Spiral Learning — 3 Vòng cho mọi module
Deliberate Practice — 4 hoạt động bắt buộc mỗi tuần
| Hoạt động | Tần suất | Mục đích |
|---|---|---|
| Source Code Reading | 2–3 giờ/tuần | Đọc source Zustand, TanStack Query, Radix, React Fiber, V8 blog |
| Edge Case Lab | 1 buổi/tuần | "Điều gì xảy ra nếu...", viết test cho edge case, simulate failure |
| War Story Documentation | 1 bài/tuần | Bối cảnh → Ràng buộc → Lựa chọn → Quyết định → Trade-off → Bài học |
| Teach Back | 1 buổi/tuần | Giải thích cho junior tưởng tượng hoặc viết blog kỹ thuật |
Milestone đánh giá năng lực
- Milestone 1: Debug được 1 bug production thực mà không cần Google
- Milestone 2: Review PR của người khác, tìm ra lỗi security/performance họ không thấy
- Milestone 3: Viết ADR với ít nhất 3 lựa chọn đã cân nhắc, mỗi lựa chọn có rủi ro cụ thể
- Milestone 4: Tự implement 1 thư viện nhỏ (giống Zustand, Virtual Scroll, hoặc 1 phần React)
- Milestone 5: Xử lý được incident 2 giờ sáng (simulate) — quyết định rollback/feature flag/fix ngay trong 10 phút
Cấu trúc 8 Stage
Stage 0 — Foundation
| STT | Module |
|---|---|
| 1 | V8 Engine |
| 2 | Event Loop |
| 3 | Rendering Pipeline |
| 4 | CSS Deep Dive |
| 5 | Browser Storage |
| 6 | Web Components |
| 7 | JavaScript Core |
| 8 | TypeScript Advanced |
| 9 | HTTP/2/3 |
| 10 | API Design |
| 11 | Debugging Methodology |
Stage 1 — Build & Tooling
| STT | Module |
|---|---|
| 1 | Bundler (Webpack/Vite) |
| 2 | Bundle Analysis |
| 3 | Package Manager (pnpm) |
| 4 | Monorepo |
| 5 | Git Workflow |
| 6 | Git Advanced |
Stage 2 — Project 1: SaaS Landing + Blog + Newsletter
| STT | Module |
|---|---|
| 1 | React Fiber |
| 2 | Next.js App Router & Caching |
| 3 | Tailwind & shadcn/ui |
| 4 | Accessibility (WCAG AA) |
| 5 | Animation |
| 6 | Mobile |
| 7 | SEO + i18n |
| 8 | Form Engineering |
| 9 | Security |
| 10 | Authentication (Auth) |
| 11 | Testing |
| 12 | Core Web Vitals |
| 13 | CI/CD |
Stage 3 — Project 2: E-commerce Checkout Flow
| STT | Module |
|---|---|
| 1 | TanStack Query + Zustand |
| 2 | XState Checkout Wizard |
| 3 | Stripe Integration |
| 4 | Error Boundary & Resilience |
| 5 | PWA Offline Cart |
| 6 | Caching Patterns |
| 7 | Animation UX |
| 8 | Mobile Checkout |
| 9 | E2E Testing |
Stage 4 — Project 3: Admin Dashboard (Enterprise)
| STT | Module |
|---|---|
| 1 | Redux Toolkit & Saga |
| 2 | Chart & D3 |
| 3 | Virtual Scroll & Web Workers |
| 4 | Data Normalization & SSE |
| 5 | Turborepo & Storybook |
| 6 | BFF & tRPC |
| 7 | Architecture Patterns |
| 8 | RBAC & Feature Flags |
| 9 | OpenTelemetry |
| 10 | Canary Deploy |
Stage 5 — Project 4: Real-time Social Feed
| STT | Module |
|---|---|
| 1 | WebSockets & Real-time |
| 2 | Optimistic Update |
| 3 | Animation Nâng Cao |
| 4 | Mobile Gesture |
| 5 | AI Integration & Function Calling |
| 6 | File Upload |
| 7 | Dynamic SEO |
Stage 6 — Project 5: Design System + Component Library
| STT | Module |
|---|---|
| 1 | Design Tokens & Style Dictionary |
| 2 | Radix Primitives & Shadow DOM |
| 3 | Combobox & Data Grid |
| 4 | Storybook & Chromatic |
| 5 | Micro-frontends |
| 6 | Web Components Interop |
| 7 | Dark Mode |
| 8 | Component Testing |
Stage 7 — Project 6: Legacy Migration (jQuery → React)
| STT | Module |
|---|---|
| 1 | Migration Strategy |
| 2 | Web Components Interop |
| 3 | Supply Chain Security |
| 4 | AI Verify Workflow |
| 5 | Production Ops |
| 6 | Incident Response |
| 7 | Soft Skills & Team Dynamics |
Stage 8 — Tổng hợp & Sẵn sàng phỏng vấn
| STT | Module |
|---|---|
| 1 | Portfolio Site |
| 2 | RADIO Framework |
| 3 | Mock Interview |
| 4 | Live Coding |
| 5 | Security Audit |
| 6 | Behavioral Interview |
| 7 | Đàm phán lương |
| 8 | CV Strategy |
Checkpoint tự đánh giá (Mỗi 3 tháng)
| Câu hỏi | Nếu trả lời "Không" → Quay lại |
|---|---|
| Tôi có giải thích được Event Loop cho junior không? | Stage 0 |
| Tôi có vẽ được Browser Rendering Pipeline không? | Stage 0 |
| Tôi có giải thích được HTTP/2 vs HTTP/3 không? | Stage 0 |
| Tôi có debug được hydration mismatch không cần Google? | Stage 2 |
| Tôi có audit được WCAG AA không? | Stage 2 |
| Tôi có thiết kế được caching strategy cho e-commerce không? | Stage 3 |
| Tôi có thiết kế được News Feed cho 1M user không? | Stage 4–8 |
| Tôi có setup được OpenTelemetry trace xuyên suốt không? | Stage 4 |
| Tôi có xử lý được incident 2 giờ sáng không? | Stage 7 |
| Tôi có dạy lại được 1 junior không? | Toàn bộ — Teach Back |
| Tôi có review PR và tìm ra lỗi security/performance không? | Deliberate Practice |
| Tôi có viết được ADR với 3 lựa chọn đã cân nhắc không? | Stage 4–8 |
Quy tắc cuối cùng
- Không sang module sau khi chưa đạt Exit Criteria.
- Không học vội để "kịp timeline".
- Không so sánh với người khác. Chỉ so sánh với chính mình 3 tháng trước.
- Mỗi checkbox phải giải thích được cho người khác. Nếu không, chưa hiểu sâu.
Học xong khóa Master Frontend, bạn không chỉ "sẵn sàng phỏng vấn Senior". Bạn đã xây được nền móng để học (Backend & Ecosystem) và (DevOps) một cách tự nhiên — vì bạn hiểu cả máy tính, trình duyệt, network, framework, lẫn cách một sản phẩm thực sự được xây dựng và vận hành.