Lesson 1Form handling and validation (controlled vs uncontrolled, libraries: Formik, React Hook Form, VeeValidate)Put strong form handling and checking in place. Compare controlled and uncontrolled inputs, use tools like Formik, React Hook Form, and VeeValidate, and plan validation, error messages, and submission for tough forms.
Controlled vs uncontrolled input strategiesFormik and React Hook Form in practiceVeeValidate and Vue form patternsSynchronous and async validation rulesError messages, UX, and accessibilityLesson 2UI component libraries and accessibility practices (Tailwind, Material, Chakra, ARIA roles, keyboard navigation)Learn to use new UI libraries while keeping good accessibility. Check Tailwind, Material UI, and Chakra, then put ARIA roles, focus control, and keyboard movement to build inclusive, ready-for-work interfaces.
Design systems with Tailwind and utility classesMaterial UI and Chakra component patternsSemantic HTML and ARIA role strategiesFocus management and keyboard navigationColor contrast, theming, and reduced motionLesson 3Choosing a frontend framework and justification (React, Vue, Svelte) and ecosystem tradeoffsCheck and explain why you pick frontend framework. Compare React, Vue, and Svelte setups, how mature dem be, speed, and learning ease so you fit choose and stand by best one for each project.
React, Vue, and Svelte core conceptsEcosystem maturity and community supportPerformance and bundle size tradeoffsTypeScript and tooling integrationDecision frameworks for real projectsLesson 4Build, bundling, and optimization: Webpack/Vite/Rollup, code splitting, tree-shaking, asset handlingMaster new build tools for fast frontends. Compare Webpack, Vite, and Rollup, set code splitting and tree-shaking, and fine-tune asset handling, caching, and source maps to give quick, easy-to-keep production bundles.
Comparing Webpack, Vite, and Rollup setupsCode splitting and dynamic importsTree-shaking and dead code eliminationOptimizing images, fonts, and static assetsCaching, hashes, and source map strategiesLesson 5Client-side tests: unit testing components, integration tests, testing library choices and examplesBuild strong client-side testing plan. Learn unit testing for components, integration tests over routes and APIs, and how to pick between Jest, Vitest, Cypress, and Testing Library for solid, keepable test sets.
Unit testing UI components in isolationIntegration tests for flows and routingUsing Testing Library for user-centric testsChoosing Jest, Vitest, Cypress, or PlaywrightMocking APIs and handling flaky testsLesson 6Local dev and environment configuration: env vars, .env files, feature flags for frontendSet reliable frontend setups for local and cloud. Learn to manage env vars, .env files, build-time injection, and feature flags so you fit switch functions safe over dev, staging, and production.
Managing .env files and build-time variablesSeparating dev, staging, and production configsRuntime configuration and environment safetyImplementing frontend feature flagsSecrets handling and configuration pitfallsLesson 7Project structure and folder conventions for single-page apps (components, pages, services, hooks)Design scalable project setups for single-page apps. Learn folder ways for components, pages, services, and hooks, and how to arrange shared tools, tests, and styles to keep big code easy to find and fix.
Organizing components, pages, and layoutsServices, hooks, and data access layersShared utilities, types, and constantsStructuring tests and story filesRefactoring toward modular boundariesLesson 8API integration patterns: REST vs GraphQL clients, error handling, request retries, timeoutsPut strong API connection ways on client. Compare REST and GraphQL clients, set Axios or Fetch, handle errors and retries, and plan timeouts, cancellation, and normalization for tough data fetching.
Configuring REST clients with Axios or FetchUsing GraphQL clients like Apollo or URQLGlobal error handling and user messagingRequest retries, backoff, and timeoutsCancellation, abort controllers, and cachingLesson 9Authentication on the frontend: storing tokens, refresh flows, and secure cookie approachesUnderstand safe frontend login ways. Compare localStorage, sessionStorage, and cookies, plan refresh token flows, and put HttpOnly cookies, CSRF protection, and logout plans dat protect users for real apps.
Token storage: localStorage vs cookiesImplementing refresh token flows safelyHttpOnly cookies and CSRF protectionHandling logout, revocation, and rotationAuth error handling and user feedbackLesson 10State management options and patterns (local component state, Context, Redux/Pinia/MobX, React Query)Compare state handling choices for tough frontends. Check local state, Context, Redux, Pinia, MobX, and React Query, and learn ways for caching, normalization, and skip needless re-renders in big apps.
Local component state and lifting patternsContext API for cross-cutting concernsRedux, Pinia, and MobX store designServer state with React Query or SWRPerformance tuning and selector patternsLesson 11Routing and protected routes: client-side routing, route guards, lazy loadingBuild reliable client-side routing with protected routes. Learn route setup, nested routes, lazy loading, and route guards dat enforce login and access while keeping movement fast and reachable.
Configuring client-side routers and routesNested routes and layout hierarchiesImplementing lazy loading and code splittingAuth-based route guards and redirectsHandling 404 pages and fallback routes
