Track your progress through the React Fundamentals Cycle. Check off each challenge as you complete it.
- 01 — Project Setup & Dev Tooling Vite + TypeScript, project structure, strict mode
- 02 — JSX & Component Fundamentals Header, Sidebar, MainContent, Footer composition
- 03 — Props & TypeScript Interfaces Typed props, ProjectCard, data flow
- 04 — Rendering Lists & Conditional Rendering
.map()with keys, status badges, empty states, overdue indicator - 05 — State with useState StatusFilter, derived filtered list, project counts
- 06 — Event Handling & Forms AddProjectForm, controlled inputs, validation
Milestone: Static app with local state, forms, and filtering.
- 07 — Component Composition & Children Card, Modal (createPortal), PageLayout containers
- 08 — Side Effects with useEffect Document title, keyboard shortcuts (Cmd+K), toast notifications
- 09 — Custom Hooks useDocumentTitle, useKeyboardShortcut, useProjectFilters
- 10 — Client-Side Routing React Router, pages, Link, useParams, 404 handling
- 11 — The Master-Detail Pattern Side-by-side layout, nested routes, task list
- 12 — Context API ThemeContext, AuthContext, dark mode toggle
- 13 — useReducer & Complex State Task reducer, discriminated unions, status workflow transitions
- 14 — Data Fetching Fundamentals MSW mock API, useFetch hook, loading/error/success states
- 15 — Server State with TanStack Query useQuery, query keys, caching, background refetching
Milestone: Routed app with master-detail, custom hooks, and API data.
- 16 — Mutations & Optimistic Updates useMutation, optimistic UI, rollback on error, undo delete
- 17 — Global Client State with Zustand UI state store, selectors, filter persistence across navigation
- 18 — Redux Toolkit (Alternate) createSlice, typed hooks, Immer, DevTools comparison
- 19 — Performance Optimization React.memo, useMemo, useCallback, profiling with DevTools
- 20 — Error Boundaries ErrorBoundary class component, isolation zones, recovery UI
- 21 — Unit Testing Components Vitest + React Testing Library, userEvent, renderWithProviders
- 22 — Testing Async Operations MSW in tests, loading/error states, mutation + cache testing
Milestone: Full CRUD, state management, error handling, and test suite.
- 23 — Suspense & Lazy Loading React.lazy, Suspense boundaries, skeleton loaders
- 24 — Accessibility Fundamentals Focus traps, ARIA attributes, keyboard navigation, contrast
- 25 — Deployment & Production Build Environment variables, bundle analysis, static hosting config
- 26 — Capstone Team assignment dropdown, dashboard with stats, real-time polling
Milestone: Complete TaskFlow — code-split, accessible, tested, and deployable.
Use this space for anything you want to remember — patterns that clicked, gotchas you hit, or concepts to revisit.