Month 1 Advanced React Patterns, Custom Hooks & Strict TypeScript Weeks 1–4 • 8 Live Sessions
  • Session 1-2: Advanced component composition: Compound components, render props, polymorphic components, and strict TypeScript prop contracts.
  • Session 3-4: Mastering React lifecycle & hooks: Writing resilient custom hooks, deep dive into useCallback, useMemo, and debugging unneeded re-renders.
  • Session 5-6: Building scalable Design Systems: Tailoring reusable UI kits with Tailwind CSS, CVA (Class Variance Authority), and accessible Radix UI primitives.
  • Session 7-8 (Live Hand-Holding): Custom UI Kit Lab — Building and documenting a production-ready, accessible design system containing data tables, modals, and dynamic form controls.
Month 2 Server State Synchronization, Caching & Client Architecture Weeks 5–8 • 8 Live Sessions
  • Session 9-10: Decoupling Client State from Server State: Predictable global state management using Zustand and state machines.
  • Session 11-12: Enterprise data fetching with TanStack Query: Stale-while-revalidate, optimistic mutations, infinite queries, and automated cache invalidation.
  • Session 13-14: High-performance forms: Complex validation pipelines using React Hook Form coupled with Zod schema inference.
  • Session 15-16 (Live Hand-Holding): Real-Time SaaS Dashboard Lab — Architecting an interactive analytics dashboard featuring dynamic filters, debounced searches, and optimistic record updates.
Month 3 Content Sites with Astro, Islands Architecture & Web Performance Weeks 9–12 • 8 Live Sessions
  • Session 17-18: Zero-JS architecture with Astro 5+: Static Site Generation (SSG), dynamic routes, Content Collections, and Zod schemas.
  • Session 19-20: Astro Islands Architecture: Selectively hydrating React components with client:load, client:visible, and client:idle.
  • Session 21-22: Web Vitals engineering: Eliminating Layout Shifts (CLS), optimizing Largest Contentful Paint (LCP), asset bundling, and SEO OpenGraph cards.
  • Session 23-24 (Final Capstone & Architecture Defense): Performance Optimization Defense — Launching a blazing-fast content platform achieving a 100/100 Lighthouse performance score with integrated interactive React widgets.