App thực hành xuyên suốt để học thật, debug thật, ôn phỏng vấn thật
Thực hành xuyên suốt⏱ Làm song song với 15 module📋 Mục tiêu: biến kiến thức thành app chạy được
🎯 Mục tiêu
Project này gom các kiến thức trong tài liệu vào một app nhỏ nhưng đủ giống app đi làm: có auth, navigation, API, cache, form, cart, storage, test, performance và release checklist.
Nguyên tắc: Mỗi module không chỉ đọc xong là tick. Phải áp dụng ít nhất một phần vào playground, gặp lỗi, debug, fix, rồi tự trả lời được câu hỏi phỏng vấn liên quan.
🧭 Vòng lặp học thật
Hiểu bản chất: Concept này giải quyết vấn đề gì trong mobile app?
Thấy bug thật: Nếu dùng sai, app sẽ hỏng ở đâu?
Biết debug: Dùng log/tool/test nào để tìm nguyên nhân?
Biết fix: Sửa tối thiểu, có trade-off rõ.
Trả lời phỏng vấn: Nói được short answer, deep answer, real case, pitfall.
Áp dụng vào playground: Commit nhỏ, có acceptance criteria.
📱 App spec
Feature
Mục tiêu học
Module liên quan
Auth flow
Login/logout, token refresh, reset navigation
05, 07, 11
Product list/detail
API layer, React Query, FlatList, cache
03, 07, 08
Cart
Client state, persist, derived total
06, 11
Profile form
Controlled inputs, validation, keyboard
02, 03, 04, 12
Deep link
Open product/order from URL or notification
05, 14
Offline draft
Queue mutation, retry, conflict note
07, 11, 15
Testing
Login, API error, cart store, smoke E2E
12
Performance
Measure list render, image load, startup tasks
08, 09
Release
CI checklist, sourcemap, OTA decision
13
📦 Milestone theo module
M01 — JS/TS: Define typed API models: User, Product, CartItem, ApiResult<T>, PaginatedResponse<T>. Không dùng any.
M02 — React Core: Build ProductCard, QuantityStepper, ErrorBoundary. Test key ổn định khi add/remove/reorder list.
M04 — Hooks: Viết useDebounce, useKeyboardVisible, useAppStateRefresh. Có cleanup và tránh stale closure.
M05 — Navigation: Tạo Auth stack, Main tabs, Product detail, Cart, Profile. Login/logout dùng reset stack. Deep link product hoạt động khi app cold start.
M12 — Testing: Test LoginForm, cart store, API 401/422/500, navigation login -> home, smoke E2E.
M08 — Performance: Đo render count của ProductCard, optimize FlatList/FlashList, đo before/after. Không tối ưu nếu không có số liệu.
M09 — Animation: Thêm micro-interaction cho add-to-cart hoặc swipe action. Kiểm tra không conflict với FlatList scroll.
M14/M10 — Android & Native: Thêm deep link Android intent-filter, đọc Logcat, mô phỏng native module contract nếu cần.
M13 — CI/CD: Viết release checklist, OTA decision table, CI quality job, sourcemap note.
M15 — System Design: Viết design note cho app: auth, product cache, cart persist, offline draft, monitoring, failure modes.
🐞 Bug lab bắt buộc
Chủ động tạo bug rồi debug. Đây là phần biến kiến thức thành kinh nghiệm.
Bug
Cách tạo
Điều phải học được
Stale closure
Search debounce đọc keyword cũ
Dependency, ref latest callback, cleanup
Concurrent 401
Cho 5 request cùng hết token
Refresh queue, reject queue, logout một lần
Back về Login
Login bằng navigate thay vì reset
Navigation stack là state machine
List re-render quá nhiều
Inline callback/style truyền vào memo item
Stable props, profiler, đo before/after
Keyboard che form
Form dài trên Android màn nhỏ
KeyboardAvoidingView, ScrollView, adjustResize
Cache leak sau logout
Không clear QueryClient
Security boundary khi đổi user
E2E flaky
Dùng sleep cố định
Wait for element, deterministic test data
🎤 Cách ôn phỏng vấn từ playground
Format trả lời mỗi feature
Short answer: nói trong 30 giây.
Deep answer: giải thích mental model và trade-off.
Real case: lấy bug trong Bug lab làm ví dụ.
Debug path: nêu bước tìm nguyên nhân.
Follow-up: chuẩn bị câu hỏi nếu interviewer đào sâu.
✅ Definition of done
📎 Ghi chú
Không cần app lớn. App nhỏ nhưng có bug thật, debug thật, test thật, release thinking thật sẽ giúp phỏng vấn tốt hơn nhiều so với đọc thêm 20 topic rời rạc.