Stage 4 — Project 3: Admin Dashboard
Triết lý cốt lõi: Đóng vai Staff. Viết RFC, thiết kế API, set perf budget, mentor team. Cross-team contract.
Không còn là "implement feature", mà là thiết kế hệ thống, set policy, mentor team.Phase: SIMULATE (5:95 | 15:85 | 20:80)
Teaching Model: 5% Teaching / 95% Questioning
Deliverable: Enterprise dashboard, RBAC, SSE, virtual scroll 10K+, Web Workers, Turborepo, canary deploy, OpenTelemetry + 1 ADR + 1 RFC mẫu
Mục tiêu
Đóng vai Staff Engineer. Tự quyết định architecture pattern, data flow, API contract, performance budget, deploy strategy. Mentor = interviewer/feedback provider.
- RFC & ADR: Viết trước khi code. Architecture pattern, data flow, API contract, trade-off rõ ràng.
- Performance Budget as Policy: Set budget cho team, không chỉ optimize 1 page. Có metric, có enforcement.
- Cross-team contract: Thiết kế API với backend, set policy cho team, review code ở mức "bảo vệ kiến trúc".
- Mentoring: Review = bảo vệ kiến trúc + grow người khác. Không fix hộ, hỏi câu hỏi để Junior tự tìm đáp án.
Tại sao Stage 4 tồn tại
- Bối cảnh thực tế: Staff không viết nhiều code nhất, nhưng viết quyết định quan trọng nhất. 1 RFC sai có thể khiến team mất 3 tháng refactor.
- Hậu quả nếu bỏ qua: Bạn sẽ mãi là Senior implement feature, không bao giờ own architecture. Không biết viết RFC, không biết set perf budget, không biết mentor.
- Output của Stage 4: 1 enterprise dashboard production-ready, với RBAC, SSE realtime, virtual scroll 10K+ rows, Web Workers, Turborepo monorepo, canary deploy, OpenTelemetry observability, và khả năng viết RFC/ADR, set policy, mentor team.
Danh sách module
State Management & Data
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.1.1 Redux Toolkit & RTK Query | configureStore, createSlice, RTK Query, State normalization | Foundation | SIMULATE | ⬜ |
| 4.1.2 Redux Saga & Normalization | call, put, takeLatest, Cancellation, createSelector, Polling | Application | SIMULATE | ⬜ |
| 4.4.1 Data Normalization & Offline Sync | Normalizr, RTK Entity Adapter, Optimistic concurrency, Flat state | Application | SIMULATE | ⬜ |
Charts & Visualization
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.2.1 Chart Libraries & Recharts | Recharts 5+ types, Data aggregation, Performance, Theme integration | Foundation | SIMULATE | ⬜ |
| 4.2.2 D3.js Custom & Canvas | D3 scale & data join, Chart.js Canvas, Custom interaction, Responsive | Application | SIMULATE | ⬜ |
Performance & Threading
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.3.1 Virtual Scroll | Windowing, react-window, react-virtuoso, Dynamic height, 60fps scroll | Application | SIMULATE | ⬜ |
| 4.3.2 Web Workers & Threading | new Worker(), scheduler.yield(), SharedArrayBuffer, OffscreenCanvas | Application | SIMULATE | ⬜ |
Realtime & Streaming
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.4.2 Realtime & Streaming | SSE, WebSocket vs SSE vs Long Polling, ReadableStream, NDJSON | Application | SIMULATE | ⬜ |
| 4.4.3 Pagination & Conflict Resolution | Cursor pagination, useInfiniteQuery, Conflict resolution, CRDT cơ bản | Application | SIMULATE | ⬜ |
| 4.9.1 SSE & Real-time Metrics | EventSource, Auto-reconnect, last-event-id, Connection limit | Application | SIMULATE | ⬜ |
| 4.9.2 Role-based UI & Real-time Update | Admin vs user view, Real-time role revoke, Data filtering | Application | SIMULATE | ⬜ |
Monorepo & Tooling
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.5.1 Turborepo & Workspaces | turbo.json pipeline, pnpm workspaces, Remote caching, Task dependencies | Application | SIMULATE | ⬜ |
| 4.5.2 Storybook & Chromatic | Storybook CSF 3, Chromatic visual regression, MDX docs, Package publish | Application | SIMULATE | ⬜ |
API & Backend Contract
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.6.1 BFF with Next.js | Route Handler aggregate API, Auth proxy, Next.js vs standalone BFF | Application | SIMULATE | ⬜ |
| 4.6.2 tRPC & API Comparison | tRPC router & procedure, REST vs GraphQL vs tRPC, Type-safe end-to-end | Application | SIMULATE | ⬜ |
Architecture & Patterns
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.7.1 Frontend Architecture Patterns | Feature-Sliced Design, Atomic Design, Vertical Slice, DDD Frontend | Foundation | SIMULATE | ⬜ |
| 4.7.2 Folder Structure & Boundaries | Barrel exports, ESLint import rules, Public API, Circular dependency | Application | SIMULATE | ⬜ |
Security & Access Control
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.8.1 RBAC & Multi-tenancy | Permission matrix, Route/UI/API guard, Multi-tenancy, Audit log | Application | SIMULATE | ⬜ |
| 4.8.2 Feature Flags & Experimentation | LaunchDarkly/Unleash, Dark Launch, Progressive rollout, Kill switch | Application | SIMULATE | ⬜ |
Observability
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.10.1 Observability Fundamentals | Logs, Metrics, Traces, RUM, Correlation ID, RED method | Foundation | SIMULATE | ⬜ |
| 4.10.2 OpenTelemetry & Alerting | @opentelemetry/sdk-trace-web, Context propagation, Session Replay, Alerting | Application | SIMULATE | ⬜ |
Deploy & Release
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.11.1 Deploy Strategies | Canary deploy, Blue-Green, Feature flag deploy, Rollback drill | Application | SIMULATE | ⬜ |
| 4.11.2 Release Workflow & Changesets | Git Flow / Trunk Based, Changesets versioning, Preview deploy, Automated release | Application | SIMULATE | ⬜ |
Accessibility
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.12.1 Data Table Accessibility | Semantic table, aria-sort, Pagination aria-label, Keyboard navigation | Foundation | SIMULATE | ⬜ |
| 4.12.2 Screen Reader & jest-axe | NVDA/VoiceOver/TalkBack, jest-axe CI, sr-only, Live regions | Application | SIMULATE | ⬜ |
Staff Skills
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 4.13 RADIO Practice #1 | RADIO framework, Mock interview, Scale 100 → 1M users, Record & review | Mastery | SIMULATE | ⬜ |
| 4.14 Mentoring via Code Review | Review = bảo vệ kiến trúc + grow người khác. Architecture drift | Mastery | SIMULATE | ⬜ |
| 4.15 Performance Budget as Policy | Set budget cho team, không chỉ optimize 1 page. SizeLimit, Lighthouse CI, Cost analysis | Mastery | SIMULATE | ⬜ |
Stage 4 Staff Checkpoint
Tự đánh giá trước khi sang Stage 5. 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ó viết được 1 RFC cho 1 feature không? (architecture pattern, data flow, API contract) | 4.13, 4.7.1 |
| 2 | Tôi có thiết kế được API contract với backend không? (BFF hoặc tRPC) | 4.6.1, 4.6.2 |
| 3 | Tôi có set được performance budget cho team không? (có metric, có enforcement) | 4.15 |
| 4 | Tôi có lead được 1 canary deploy + rollback drill không? | 4.11.1 |
| 5 | Tôi có review code ở mức "bảo vệ kiến trúc" + mentor 1 Junior không? | 4.14 |
| 6 | Tôi có viết được ADR cho 1 architectural decision không? | 4.7.1, 4.15 |
Nguyên tắc vàng
- Staff viết trước khi code: RFC, ADR, Runbook. Không code rồi mới giải thích.
- Performance Budget = Policy: Set cho team, không chỉ optimize 1 page. Có metric, có enforcement, có cost analysis.
- Review = Bảo vệ kiến trúc + Grow người khác: Không fix hộ. Hỏi câu hỏi để Junior tự tìm đáp án. Phát hiện architecture drift sớm.
- Cross-team contract: FE owns API shape. Thiết kế với backend, không nhận passively.