Lesson 1Form handling and validation (controlled vs uncontrolled, libraries: Formik, React Hook Form, VeeValidate)Build strong form handling an validation, mi bredda. Compare controlled an uncontrolled inputs, use libraries like Formik, React Hook Form, an VeeValidate, an design validation, error messages, an submission flows fi complex forms weh work every time.
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 fi use modern UI libraries while keeping strong accessibility, yuh see. Check out Tailwind, Material UI, an Chakra, den apply ARIA roles, focus management, an keyboard navigation patterns fi build inclusive, production-ready interfaces weh everybody can use.
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 tradeoffsEvaluate an justify yuh choice a frontend framework proper. Compare React, Vue, an Svelte architectures, ecosystem maturity, performance, an learning curves so yuh can pick an defend di best option fi each project context wid confidence.
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 modern build tooling fi fast frontends, mi fren. Compare Webpack, Vite, an Rollup, set up code splitting an tree-shaking, an optimize asset handling, caching, an source maps fi deliver quick, maintainable 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 examplesDevelop a solid client-side testing strategy. Learn unit testing fi components, integration tests cross routes an APIs, an how fi choose between Jest, Vitest, Cypress, an Testing Library fi create reliable, maintainable test suites weh catch problems early.
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 environments fi local an cloud setups. Learn fi manage environment variables, .env files, build-time injection, an feature flags so yuh can safely toggle functionality across development, staging, an production widout stress.
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 structures fi single-page apps. Learn folder conventions fi components, pages, services, an hooks, an how fi organize shared utilities, tests, an styles fi keep large codebases easy fi find tings an 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, timeoutsBuild strong API integration patterns pon di client side. Compare REST an GraphQL clients, configure Axios or Fetch, handle errors an retries, an design timeouts, cancellation, an normalization fi resilient data fetching layers weh nuh crash easy.
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 secure frontend authentication patterns good. Compare localStorage, sessionStorage, an cookies, design refresh token flows, an implement HttpOnly cookies, CSRF defenses, an logout strategies weh protect users inna real applications.
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 options fi complex frontends. Check local state, Context, Redux, Pinia, MobX, an React Query, an learn patterns fi caching, normalization, an avoiding unnecessary re-renders inna large applications.
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 wid protected routes. Learn route configuration, nested routes, lazy loading, an route guards weh enforce authentication an authorization while keeping navigation fast an accessible fi 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
