Stage 3 — Project 2: E-commerce Checkout Flow
Triết lý cốt lõi: Own feature end-to-end. Cost analysis xuất hiện. Mentor là consultant. FE owns API contract.
Không chỉ "nhận API rồi render", mà thiết kế API shape, tính cost, chịu trách nhiệm decision.Phase: BRIDGE (3.1–3.6) → SIMULATE (3.7–3.9)
Teaching Model: 20% Teaching / 80% Questioning
Deliverable: 1 E-commerce PWA, auth, Stripe test, offline cart, animation UX, mobile, coverage > 80% + API Contract Design + Cost Analysis
Mục tiêu
Own feature end-to-end. Từ state management, form engineering, payment integration, offline resilience đến API contract design và cost analysis.
- End-to-end ownership: FE không chỉ render, mà thiết kế API shape, caching strategy, error handling, rollback plan.
- Cost analysis: Mỗi quyết định kỹ thuật có cost impact — CDN, server compute, Stripe fee, bundle size.
- Mentor = consultant: Không được gợi ý step-by-step. Được hỏi câu hỏi để tự tìm đáp án.
- Staff Lens: Review PR ở mức "bảo vệ kiến trúc" + mentor Junior.
Tại sao Stage 3 tồn tại
- Bối cảnh thực tế: Junior chờ backend design API rồi implement. Staff thiết kế API contract, tính cost, và bảo vệ kiến trúc.
- Hậu quả nếu bỏ qua: Bạn sẽ không bao giờ hiểu tại sao caching strategy A tốn $500/tháng hơn strategy B; không biết tính Stripe fee impact; không thiết kế được state machine cho checkout flow phức tạp.
- Output của Stage 3: 1 E-commerce PWA production-ready, với offline cart, Stripe payment, animation UX, mobile optimized, coverage > 80%, và khả năng viết API contract + cost analysis.
Danh sách module
State Management
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 3.1.1 TanStack Query — Server State | queryKey, staleTime vs gcTime, Prefetching, Optimistic updates | Foundation | BRIDGE | ⬜ |
| 3.1.2 Zustand — Client State | Store pattern, Slice pattern, Middleware persist, Server vs Client state | Foundation | BRIDGE | ⬜ |
| 3.2 State Machine with XState | States, transitions, guards, Checkout wizard, useMachine | Application | BRIDGE | ⬜ |
Form Engineering
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 3.3.1 Form Engineering — Multi-step & Field Arrays | Multi-step validation, useFieldArray, Cross-field validation, Dirty state | Application | BRIDGE | ⬜ |
| 3.3.2 Form Engineering — i18n & Currency | next-intl, Intl.NumberFormat, RTL, Currency rounding | Application | BRIDGE | ⬜ |
Payment
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 3.4.1 Stripe Integration & Test Mode | Stripe Checkout, Elements, Test cards, Webhook payment_intent.succeeded | Foundation | BRIDGE | ⬜ |
| 3.4.2 Payment Security & Error Handling | PCI compliance, 3DS, Payment error UX, Refund flow | Application | BRIDGE | ⬜ |
Resilience & Error Handling
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 3.5.1 Error Boundary & Graceful Degradation | react-error-boundary, Retry logic, Circuit breaker cơ bản | Foundation | BRIDGE | ⬜ |
| 3.5.2 Resilience Patterns | Exponential backoff + jitter, Circuit breaker, Queue & retry offline | Application | BRIDGE | ⬜ |
PWA & Offline
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 3.6.1 PWA & Service Worker | next-pwa, Cache strategies, Web App Manifest, Install prompt | Foundation | BRIDGE | ⬜ |
| 3.6.2 Background Sync & Offline Cart | Background Sync API, IndexedDB, Conflict resolution, Offline indicator | Application | BRIDGE | ⬜ |
Caching Patterns (SIMULATE)
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 3.7.1 Caching Patterns | Cache Aside, Read/Write Through, Stampede, Request coalescing | Application | SIMULATE | ⬜ |
| 3.7.2 Cache Invalidation & Problems | TTL, Event-based, Penetration, Avalanche, Cache warming | Application | SIMULATE | ⬜ |
Animation & Mobile UX (SIMULATE)
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 3.8.1 Animation UX — Add to Cart & Transitions | Add-to-cart animation, FLIP, Page transition, prefers-reduced-motion | Application | SIMULATE | ⬜ |
| 3.8.2 Mobile Checkout Optimization | Swipe to delete, Virtual keyboard, Safe area, Mobile INP | Application | SIMULATE | ⬜ |
Testing (SIMULATE)
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 3.9.1 Testing — Cart Logic & MSW | Cart unit test, MSW mock Stripe, Async test, Race condition | Application | SIMULATE | ⬜ |
| 3.9.2 E2E Testing — Full Checkout Flow | Playwright full flow, Cross-browser, Mobile viewport, Offline test | Application | SIMULATE | ⬜ |
API Contract Design (SIMULATE)
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 3.10 API Contract Design (BFF Perspective) | Staff owns API shape. BFF, Cursor pagination, Idempotency key, Rate Limit | Mastery | SIMULATE | ⬜ |
Stage 3 Staff Checkpoint
Tự đánh giá trước khi sang Stage 4. 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ó tính được cost impact của caching strategy không? (CDN vs Server vs Client) | 3.7.1 |
| 2 | Tôi có viết được API contract cho 1 endpoint không? (BFF perspective) | 3.10 |
| 3 | Tôi có thiết kế được state machine cho checkout flow không? (XState) | 3.2 |
| 4 | Tôi có tính được cost impact của Stripe integration không? (fee + webhook cost) | 3.4.1 |
| 5 | Tôi có review PR ở mức "bảo vệ kiến trúc" + mentor Junior không? | 3.10 |
Nguyên tắc vàng
- FE owns API contract: Không chờ backend design API. Bạn thiết kế shape, pagination strategy, idempotency key, rate limit.
- Cost analysis là bắt buộc: Mỗi quyết định kỹ thuật phải có cost impact. Stripe fee, CDN cost, server compute, bundle size → $.
- Offline = first-class: Cart phải hoạt động offline. Conflict resolution phải có strategy.
- Mentor = consultant: Không được gợi ý step-by-step. Được hỏi câu hỏi để tự tìm đáp án.