Stage 5 — Project 4: Real-time Social Feed
Triết lý cốt lõi: Cross-team. Convince backend, PM. AI integration. Real-time + AI + Animation nâng cao.
Không còn là "viết code trong team FE", mà là lead cross-team, convince stakeholder, own AI strategy.Phase: SIMULATE (5:95 | 15:85 | 20:80)
Teaching Model: 5% Teaching / 95% Questioning
Deliverable: Real-time social feed, AI summarize, animation nâng cao, mobile gesture, dynamic OG, INP < 200ms + AI Governance
Mục tiêu
Cross-team ownership. Convince backend và PM về technical decision. Integrate AI vào product một cách có trách nhiệm — có cost analysis, có fallback, có governance.
- Cross-team: Lead discussion với backend về API contract, real-time strategy, AI integration. Không chờ assign, tự propose.
- AI Governance: Mỗi AI feature có cost per request, rate limit, fallback strategy, và "when NOT to use AI".
- Real-time + Animation: WebSocket/SSE/Long Polling đúng context, không over-engineer. Animation nâng cao với
layoutId, View Transitions API, nhưng vẫn respectprefers-reduced-motion. - Staff Lens: Viết RFC, thiết kế strategy, convince team — không chỉ implement.
Tại sao Stage 5 tồn tại
- Bối cảnh thực tế: AI integration không phải "gọi API OpenAI rồi render". Có cost, có latency, có hallucination, có rate limit. Staff phải own decision — không phải PM.
- Hậu quả nếu bỏ qua: Bạn sẽ integrate AI mà không tính cost, không có fallback, không biết khi nào dùng WebSocket vs SSE. Team mất tiền, user mất trải nghiệm.
- Output của Stage 5: 1 real-time social feed với AI summarize, animation nâng cao, mobile gesture, dynamic OG. Có RFC cho AI integration, có DR cho real-time strategy, có cost analysis.
Danh sách module
Real-time
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 5.1 WebSockets & Real-time | Socket.io, Reconnect, Exponential backoff, WebSocket vs SSE vs Long Polling | Foundation | SIMULATE | ⬜ |
| 5.2 Optimistic Update Nâng Cao | TanStack Query + WebSocket, Rollback logic, Race condition like/unlike/like | Application | SIMULATE | ⬜ |
Animation & Motion
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 5.3 Animation Nâng Cao & Motion | Framer Motion layoutId, AnimatePresence mode, View Transitions API | Application | SIMULATE | ⬜ |
Mobile
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 5.4 Mobile Web Real-time | Pull-to-refresh, Swipe-to-dismiss, Virtual keyboard, Mobile INP | Application | SIMULATE | ⬜ |
AI Integration
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 5.5.1 AI Integration Fundamentals | LLM API streaming, Vercel AI SDK, Prompt engineering, Abort controller | Foundation | SIMULATE | ⬜ |
| 5.5.2 AI Advanced — Function Calling & MCP | Function Calling, MCP, Structured Output Zod, Retry malformed JSON | Application | SIMULATE | ⬜ |
File Upload & SEO
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 5.6 File Upload & Web Workers | Drag-drop, Preview, Progress bar, Cancel upload, Image compress Worker | Application | SIMULATE | ⬜ |
| 5.7 Dynamic SEO | Meta tags động, @vercel/og, Canonical URLs, Sitemap động | Application | SIMULATE | ⬜ |
Staff Skills
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 5.8 RADIO Practice #2 | News Feed / Autocomplete scale, Real-time + AI, Mock interview, Record & review | Mastery | SIMULATE | ⬜ |
Stage 5 Staff Checkpoint
Tự đánh giá trước khi sang Stage 6. Nếu trả lờ "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 RFC cho AI integration không? (cost, latency, fallback strategy) | 5.5.1, 5.5.2 |
| 2 | Tôi có thiết kế được real-time strategy không? (WebSocket vs SSE vs Long Polling, có DR) | 5.1 |
| 3 | Tôi có tính được cost impact của AI API không? (per request, rate limit, fallback) | 5.5.1 |
| 4 | Tôi có lead được cross-team discussion với backend về API contract không? | 5.8 |
Nguyên tắc vàng
- AI = Tool, không phải Magic: Mỗi AI feature phải có cost analysis, latency budget, fallback strategy, và "when NOT to use AI". Không integrate AI vì "trendy".
- Real-time = Right Tool: WebSocket không phải lúc nào cũng đúng. SSE, Long Polling, hoặc polling đơn giản có thể tốt hơn. Viết DR với trade-off rõ ràng.
- Cross-team = Propose, không chờ: Không chờ backend/PM assign. Tự propose RFC, tự lead discussion, tự convince.
- Animation = Accessible:
prefers-reduced-motionkhông phải optional. Animation nâng cao phải degrade gracefully.