dev-proPRO
OverviewLộ Trình HọcPhỏng VấnAI System
dev-pro— Thực chiến Frontend React, Next.js & Luyện phỏng vấn
contact@dev-pro.online•Code thật. Phỏng vấn thật.
Seri React Mastery8 Lộ trình · Sandbox
Seri React Mastery
8 tracks
T01
React Core Foundations0/7 hoàn thành
T02
React Hooks Mastery0/5 hoàn thành
T03
React Component Architecture & Forms0/4 hoàn thành
T04
React & Compiler: Modern Path0/4 hoàn thành
T05
Form Engineering: RHF + Zod + Server Actions0/2 hoàn thành
T06
Advanced React Performance Patterns0/4 hoàn thành
T07
Enterprise React Testing & Production Readiness0/5 hoàn thành
T08
Production Capstone: TeamBoard0/1 hoàn thành
  • Bài học (1)
  • Capstone: Xây TeamBoard từ Architecture đến Production Gate90m•advanced
Tiến độ React0/32 bài
Production Capstone: TeamBoard
advanced
90 phút
#Capstone
#Next.js
#TanStack Query
#Testing

Capstone: Xây TeamBoard từ Architecture đến Production Gate

Xây dashboard project/task có auth, URL filters, server state, optimistic mutation, accessibility và test pyramid.

Core Mental Model

Capstone không kiểm tra khả năng nhớ API riêng lẻ mà kiểm tra quyết định boundary: dữ liệu ở đâu, ai là source of truth, phần nào server/client, cache được invalidated thế nào và bằng chứng nào chứng minh feature hoạt động.

Key Takeaways & Principles

Sản phẩm: đăng nhập, xem project, lọc task qua URL, tạo/đổi trạng thái task và hiển thị optimistic feedback.
Server Component tải shell/initial data; Client Component chỉ ở interactive leaves; query đọc qua API/RPC, mutation bắt buộc auth/authorization/validation.
Phân loại state: filter/page ở URL, tasks ở TanStack Query cache, dialog state ở local state, form fields ở form state.
Definition of Done gồm accessible states, error/loading/empty UI, automated tests và hai deployment profiles: GitHub Pages static cùng standalone/managed fullstack.