Lesson 1Form handling and validation (controlled vs uncontrolled, libraries: Formik, React Hook Form, VeeValidate)Put in place strong form handling and validation. Compare controlled and uncontrolled inputs, utilise libraries like Formik, React Hook Form, and VeeValidate, and create validation, error messages, and submission processes for complex forms in local applications.
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)Discover how to use modern UI libraries while upholding strong accessibility. Examine Tailwind, Material UI, and Chakra, then apply ARIA roles, focus management, and keyboard navigation to build inclusive, production-ready interfaces for Zimbabwean users.
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 tradeoffsAssess and justify your choice of frontend framework. Compare React, Vue, and Svelte architectures, ecosystem maturity, performance, and learning curves to pick and defend the best option for each project in our context.
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 tools for performant frontends. Compare Webpack, Vite, and Rollup, set up code splitting and tree-shaking, and optimise asset handling, caching, and source maps to deliver fast, maintainable production bundles locally.
Comparing Webpack, Vite, and Rollup setupsCode splitting and dynamic importsTree-shaking and dead code eliminationOptimising 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 for components, integration tests across routes and APIs, and how to choose between Jest, Vitest, Cypress, and Testing Library for reliable, maintainable test suites in Zimbabwean development.
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 for local and cloud setups. Learn to manage environment variables, .env files, build-time injection, and feature flags to safely toggle functionality across development, staging, and production in our local scene.
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 for single-page apps. Learn folder conventions for components, pages, services, and hooks, and how to organise shared utilities, tests, and styles to keep large codebases discoverable and maintainable for Zimbabwean teams.
Organising 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, timeoutsImplement robust API integration patterns on the client. Compare REST and GraphQL clients, configure Axios or Fetch, handle errors and retries, and design timeouts, cancellation, and normalisation for resilient data fetching layers in local apps.
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. Compare localStorage, sessionStorage, and cookies, design refresh token flows, and implement HttpOnly cookies, CSRF defences, and logout strategies that protect users in real Zimbabwean 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 for complex frontends. Explore local state, Context, Redux, Pinia, MobX, and React Query, and learn patterns for caching, normalisation, and avoiding unnecessary re-renders in large applications here.
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 configuration, nested routes, lazy loading, and route guards that enforce authentication and authorisation while keeping navigation fast and accessible for local users.
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
