Month 1 React 19 Foundations, Concurrent Mode & Modern Hook Architecture Weeks 1–4 • 8 Live Sessions
  • Session 1-2: React 19 architecture: Fiber reconciliation, Concurrent Mode, Automatic Batching, and the new useActionState, useFormStatus, and useOptimistic hooks.
  • Session 3-4: Mastering component rendering: Understanding the Virtual DOM commit phase, eliminating closure traps, and effective use of useTransition and useDeferredValue.
  • Session 5-6: Advanced Hook design: Building resilient custom hooks, handling race conditions in async operations, and strict TypeScript generics for reusable hooks.
  • Session 7-8 (Live Hand-Holding): Concurrent Search Filter Lab — Building an interactive high-throughput data list using useTransition that keeps typing responsive at 60 FPS under thousands of filtered records.
Month 2 Enterprise Design Systems, Compound Components & Tailwind CSS Weeks 5–8 • 8 Live Sessions
  • Session 9-10: Advanced component composition patterns: Compound Components, Polymorphic components (using the as prop), and Context API optimization.
  • Session 11-12: Design tokens and Tailwind engineering: Styling scalable component variants with cva (Class Variance Authority) and tailwind-merge.
  • Session 13-14: Accessibility (a11y) & Headless Primitives: Integrating Radix UI / Headless UI primitives for keyboard navigation, focus traps, and screen-reader ARIA roles.
  • Session 15-16 (Live Hand-Holding): Production UI Library Lab — Crafting an accessible, compound Modal Dialog and dynamic Dropdown Menu component package with zero runtime styling overhead.
Month 3 State Architecture, Server Caching & Sub-Second Web Vitals Weeks 9–12 • 8 Live Sessions
  • Session 17-18: Scalable client state with Zustand: Atomic selectors, middleware (persist/immer), and avoiding massive global Context re-renders.
  • Session 19-20: Server-state orchestration with TanStack Query (React Query): Cache keys, optimistic updates, infinite scrolling, and background refetching strategies.
  • Session 21-22: Profiling & Performance: Diagnosing memory leaks with React DevTools Profiler, bundle size code-splitting with dynamic import(), and boosting Core Web Vitals.
  • Session 23-24 (Final Capstone & Architecture Defense): Enterprise SaaS Application Launch — Building and profiling a complete full-featured administrative workspace featuring real-time data synchronization and a 95+ Lighthouse score.