Stage 2 — Project 1: SaaS Landing + Blog + Newsletter
Triết lý cốt lõi: Product thinking + System constraint.
Mỗi War Story có 2 options thực sự, trade-off đau. A11y không phải checklist, là user constraint.Phase: BRIDGE (20:80 | 40:60 | 50:50)
Teaching Model: 40% Teaching / 60% Questioning
Deliverable: 1 SaaS Landing + Blog + Newsletter live, WCAG 2.1 AA, INP < 200ms, Lighthouse > 90, CI/CD, Sentry, auth, PWA + 2 Decision Records
Mục tiêu
Áp dụng nền tảng vào product, bắt đầu chịu trách nhiệm decision. Không chỉ "làm feature", mà hiểu tại sao làm feature đó theo cách này.
- Product thinking: Mỗi quyết định kỹ thuật có user impact và business impact.
- System constraint: A11y, performance, security không phải "bonus", là requirement.
- War Story: Mỗi module có tình huống thực tế với 2 options đều khả thi, trade-off đau.
- Staff Lens: Bắt đầu review code ở mức "bảo vệ kiến trúc", không chỉ tìm bug.
Tại sao Stage 2 tồn tại
- Bối cảnh thực tế: Junior code xong feature nhưng không nghĩ đến screen reader, không test race condition, không đo INP. Staff phải "sửa sau".
- Hậu quả nếu bỏ qua: Bạn sẽ viết code "chạy được" nhưng không production-ready. Không hiểu tại sao INP cao, tại sao form bị race condition, tại sao deploy lỗi không rollback được.
- Output của Stage 2: 1 product live, measurable (Lighthouse, INP, coverage), với CI/CD, monitoring, và khả năng viết DR cho trade-off thực tế.
Danh sách module
React Core & Performance
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.1.1 React Core: Fiber & Reconciliation | Fiber architecture, Reconciliation, Render vs Commit, React 19 | Foundation | BRIDGE | ⬜ |
| 2.1.2 React Performance: Memoization | useMemo, useCallback, React.memo, Profiler, React Compiler | Application | BRIDGE | ⬜ |
Next.js App Router
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.2.1 Next.js App Router & RSC | File-based routing, Server vs Client Component, Hydration mismatch | Foundation | BRIDGE | ⬜ |
| 2.2.2 Next.js Caching Strategy | 4 loại cache, revalidatePath vs revalidateTag, ISR | Application | BRIDGE | ⬜ |
CSS & UI
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.3.1 CSS Modern & Tailwind Config | Tailwind config, Container Queries, :has(), size-adjust, CLS | Foundation | BRIDGE | ⬜ |
| 2.3.2 shadcn/ui & Component Patterns | Radix Primitives, Compound Components, cn() utility | Application | BRIDGE | ⬜ |
Accessibility
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.4.1 Accessibility Fundamentals | WCAG 2.1/2.2 AA, Semantic HTML, <button> vs <a>, Form labels | Foundation | BRIDGE | ⬜ |
| 2.4.2 Accessibility Advanced — Keyboard & Screen Reader | Roving tabindex, Focus trap, Screen reader, prefers-reduced-motion | Application | BRIDGE | ⬜ |
Animation
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.5.1 CSS Transitions & FLIP | CSS Transitions, FLIP technique, will-change, prefers-reduced-motion | Foundation | BRIDGE | ⬜ |
| 2.5.2 Framer Motion & View Transitions | AnimatePresence, layoutId, View Transitions API | Application | BRIDGE | ⬜ |
Mobile Web
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.6.1 Mobile Web Fundamentals | Viewport, Safe area, Touch Events, Responsive Images | Foundation | BRIDGE | ⬜ |
| 2.6.2 Mobile Web Advanced — Keyboard & Gesture | Virtual Keyboard, Passive listeners, content-visibility, INP | Application | BRIDGE | ⬜ |
SEO & i18n
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.7 SEO Technical + i18n | Meta tags, JSON-LD, Sitemap, next-intl, locale routing | Application | BRIDGE | ⬜ |
Form Engineering
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.8.1 Form Engineering with react-hook-form | RHF + Zod + Server Action, Cross-field validation, aria-invalid | Foundation | BRIDGE | ⬜ |
| 2.8.2 Form Advanced — Auto-save & Race Condition | Auto-save draft, Race condition, Optimistic update, Progressive enhancement | Application | BRIDGE | ⬜ |
Security
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.9.1 Browser Security — SOP & iframe | Same Origin Policy, iframe sandbox, CSP, COOP/COEP | Foundation | BRIDGE | ⬜ |
| 2.9.2 Frontend Security — XSS & CSRF | XSS types, DOMPurify, SameSite cookie, Trusted Types | Application | BRIDGE | ⬜ |
Auth
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.11.1 Auth Fundamentals — Session & JWT | Session vs JWT, Cookie attributes, Token storage, Logout | Foundation | BRIDGE | ⬜ |
| 2.11.2 Auth Advanced — PKCE & Refresh Token | Refresh Token Rotation, PKCE, Silent Refresh, Multi-tab sync | Application | BRIDGE | ⬜ |
Testing
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.12.1 Testing Fundamentals | Vitest + Testing Library, userEvent, Query priority, Mock | Foundation | BRIDGE | ⬜ |
| 2.12.2 Testing Advanced — Async & Integration | waitFor, MSW, Playwright E2E, Race condition test | Application | BRIDGE | ⬜ |
Performance & Observability
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.13.1 Core Web Vitals & Performance Budget | LCP, INP, CLS, size-limit, Lighthouse budget | Foundation | BRIDGE | ⬜ |
| 2.13.2 LoAF API & Real-world Measurement | LoAF API, web-vitals, Lighthouse CI, RUM vs lab data | Application | BRIDGE | ⬜ |
CI/CD & Deploy
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.14.1 CI/CD Fundamentals | GitHub Actions, Caching, Artifact, Environment secrets | Foundation | BRIDGE | ⬜ |
| 2.14.2 Preview Deploy & Changesets | Preview URL, Semantic Versioning, Changesets, Bundle size check | Application | BRIDGE | ⬜ |
| 2.15.1 Deploy & Custom Domain | Vercel deploy, Custom domain, Cloudflare, Environment parity | Foundation | BRIDGE | ⬜ |
| 2.15.2 Observability Nền tảng | Sentry, Source map, Health check, Error classification | Application | BRIDGE | ⬜ |
Operations & Architecture
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 2.16.1 Incident Response & On-call Runbook | Staff lead incident. Incident response flow, Runbook, On-call | Application | BRIDGE | ⬜ |
| 2.16.2 Feature Flags as Architecture Guardrails | Dùng FF để bảo vệ kiến trúc, không chỉ release. Dark Launch, Kill Switch | Application | BRIDGE | ⬜ |
Stage 2 Staff Checkpoint
Tự đánh giá trước khi sang Stage 3. Nếu trả lời "Không" ở bất kỳ câu nào, quay lại module tương ứng.
| # | Câu hỏi | Module |
|---|---|---|
| 1 | Tôi có giải thích được Fiber architecture cho Junior không? (không dumbing down) | 2.1.1 |
| 2 | Tôi có viết được 1 Decision Record cho trade-off thực tế không? (ví dụ: A11y fix phá animation) | 2.4.1, 2.5.1 |
| 3 | Tôi có tính được cost impact của INP > 200ms không? (business metric) | 2.13.1 |
| 4 | Tôi có lead được 1 mock incident với runbook không? | 2.16.1 |
| 5 | Tôi có review code ở mức "bảo vệ kiến trúc" không? (không chỉ tìm bug) | 2.16.2 |
| 6 | Tôi có thiết kế được feature flag strategy cho 1 feature không? | 2.16.2 |
Nguyên tắc vàng
- A11y = constraint, không phải checklist: Nếu component không dùng được bằng keyboard, chưa merge.
- Performance = measurable: Không nói "nhanh hơn", mà nói "INP giảm từ 280ms xuống 150ms". Không có metric = không biết có improve không.
- Mỗi War Story có 2 options đều khả thi: Không có đáp án "đúng" duy nhất. Có trade-off, có cost, có user impact.