Module 15 — System Design & Behavioral

1. Clarify: user là ai, scale, offline cần không, security/compliance có gì đặc biệt?
2. Scope: chốt MVP trước, nói rõ phần chưa design sâu.
3. Architecture: screen/state/API/storage/sync/monitoring.
4. Trade-off: vì sao chọn giải pháp này, đổi lại mất gì.
5. Failure modes: mạng yếu, token hết hạn, conflict, crash, retry, rollout.

• Hiểu bản chất: system design mobile là trade-off giữa UX, network, storage, security, release và failure modes.
• Thấy bug thật: design chỉ có tool name nhưng thiếu offline, retry, conflict, monitoring, rollout.
• Debug: hỏi requirement, bóc scope, tìm bottleneck/failure mode trước khi chọn tool.
• Fix: trình bày MVP, architecture, trade-off, failure handling và future work.
• Áp dụng playground: viết design note 1-2 trang cho auth/product/cart/offline/release.

Yêu cầu

Users tạo/sửa/xóa notes, sync across devices, hoạt động offline.

Key Decisions

Local Storage: WatermelonDB hoặc SQLite cho structured data, MMKV cho settings/metadata.

Sync Strategy:

• Optimistic local-first: Write local immediately → queue sync operations → sync khi có network
• Sync queue: Mỗi mutation (create/update/delete) → push vào queue → retry với exponential backoff
• Last-write-wins: Simple conflict resolution — latest timestamp wins. Hoặc field-level merging cho complex cases

Conflict Resolution:

• Version vector hoặc timestamp-based
• Field-level merge: nếu user A edit title, user B edit body → merge both changes
• Conflict UI: hiện diff cho user resolve manually (nếu cần)

Architecture:

UI Layer → Repository → Local DB (source of truth)
                      → Sync Engine → Remote API
                      
Sync Engine:
  - NetworkMonitor → trigger sync khi reconnect
  - OperationQueue → ordered mutations
  - ConflictResolver → merge/overwrite strategy

End-to-end Flow

Backend                    Push Service              Device
   |                           |                        |
   |-- Send notification ---→ |                        |
   |   (FCM/APNs payload)     |                        |
   |                           |-- Deliver to device -→|
   |                           |                        |-- Display notification
   |                           |                        |-- User taps
   |                           |                        |-- Deep link → open screen

Key Components

• Token management: Register device token → store in backend → refresh on app update
• FCM (Android) + APNs (iOS): Platform push services
• Notification types: Data-only (app handles display) vs Notification (system displays)
• Foreground handling: react-native-push-notification, custom in-app banner
• Deep linking: notification.data.url → navigate to specific screen
• Notification preferences: per-channel opt-in/out, quiet hours
• Analytics: delivered → opened → action rate

Architecture

UI (FlatList inverted)
  ↕
Chat Store (Zustand/Redux)
  ↕
Message Service
  ├── WebSocket Client (real-time)
  ├── REST API (history, media upload)
  └── Offline Queue (pending messages)
  
Local DB: SQLite/WatermelonDB (message history cache)

Key Decisions

• Real-time: WebSocket (bidirectional, persistent connection). Fallback: Long Polling
• Message ordering: Server-assigned timestamps + sequence numbers
• Offline: Queue outgoing messages → send khi reconnect → optimistic UI (hiện message ngay)
• Delivery status: Sent → Delivered → Read (3 checkmarks pattern)
• Pagination: Load older messages on scroll up — cursor-based pagination
• Media: Upload to S3/CloudStorage → send URL in message
• Typing indicator: Throttled WebSocket events

Token Flow

Login → Server returns {accessToken, refreshToken}
  ↓
accessToken: short-lived (15min), stored in memory
refreshToken: long-lived (30 days), stored in Keychain/Keystore
  ↓
API call → attach accessToken in Authorization header
  ↓
401 Unauthorized → use refreshToken to get new accessToken
  ↓
refreshToken expired → force logout

Key Decisions

• Token storage: accessToken → memory (React state/context). refreshToken → Keychain (iOS) / Keystore (Android). TUYỆT ĐỐI KHÔNG AsyncStorage
• Token refresh: Axios interceptor + request queue (xem Module 07)
• Biometrics: Face ID/Touch ID/Fingerprint để unlock stored credentials
• Multi-device: Server track device sessions, allow revoke per device
• Social login: OAuth2 flow → exchange auth code cho tokens

Multi-layer Cache

Memory Cache (LRU, ~50 items)
  ↓ miss
Disk Cache (react-native-fast-image, ~500MB)
  ↓ miss
CDN / Remote Server

Key Decisions

• Images: react-native-fast-image (tự động memory + disk cache)
• API data: React Query (staleTime, gcTime, persist to MMKV)
• Cache invalidation: Time-based (staleTime) + event-based (invalidateQueries)
• Prefetch: Prefetch next page images khi user scroll gần cuối
• Cache size limit: LRU eviction policy, disk quota

Phân loại State

Project Structure (Feature-based)

src/
├── features/
│   ├── auth/
│   │   ├── screens/
│   │   ├── hooks/
│   │   ├── api/
│   │   └── store/
│   ├── products/
│   ├── cart/
│   └── profile/
├── shared/
│   ├── components/
│   ├── hooks/
│   ├── utils/
│   └── api/
├── navigation/
└── app/