Lesson 1Form handling and validation (controlled vs uncontrolled, libraries: Formik, React Hook Form, VeeValidate)Put together strong form handling and validation. Look at controlled versus uncontrolled inputs, use tools like Formik, React Hook Form, and VeeValidate, and plan validation, error messages, and submission for tricky 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 modern UI libraries while keeping good accessibility. Check out Tailwind, Material UI, and Chakra, then use ARIA roles, focus management, and keyboard navigation to build interfaces that everyone can use in real projects.
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 tradeoffsWeigh up and explain your choice of frontend framework. Compare React, Vue, and Svelte on structure, tools available, speed, and ease of learning so you pick and stand by the best one for each job.
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 handlingGet good at modern build tools for fast frontends. Compare Webpack, Vite, and Rollup, set up code splitting and tree-shaking, and handle assets, caching, and source maps to make quick, easy-to-maintain 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 a solid testing plan for the client side. Learn unit tests for components, integration tests over routes and APIs, and pick between Jest, Vitest, Cypress, and Testing Library for tests that work and last.
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 up reliable frontend setups for local work and cloud. Manage environment variables, .env files, build-time injection, and feature flags to switch features safely across 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)Plan scalable structures for single-page apps. Learn folder setups for components, pages, services, and hooks, and organise shared tools, tests, and styles to keep big codebases easy to find things in and maintain.
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 in strong API connection patterns on the client. Compare REST and GraphQL clients, set up Axios or Fetch, manage errors and retries, and plan timeouts, cancellation, and data normalisation 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 approachesGet secure frontend authentication patterns. Compare localStorage, sessionStorage, and cookies, plan refresh token flows, and use HttpOnly cookies, CSRF protection, and logout plans that keep users safe in 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 management choices for complex frontends. Check local state, Context, Redux, Pinia, MobX, and React Query, and learn ways for caching, normalisation, and avoiding extra 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 guards that check authentication and permissions while keeping navigation quick and open to all.
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
