Front-End Engineering
Go from building components to shipping production front-ends: architecture, TypeScript, state, performance, testing, CI and code review.
Leads to: Software Developer, UI Developer, Web / Full-Stack Developer
Before you start
This course builds on React Fundamentals, Accessible & Responsive Interfaces and Git & the Command Line. Take them first if you are new to the topic.
About this course
A mid-level course for software developers and UI developers who already know React, accessible and responsive interfaces, and Git. You start with architecture: how to structure a growing codebase by feature, type props, state and API responses with TypeScript, and choose between local, global, URL and server state. Next you make apps fast: diagnose LCP, CLS and INP with Lighthouse and Chrome DevTools, cut bundle size with code splitting, ship lighter images, and pick the right rendering strategy (CSR, SSR, SSG or ISR) for each page. Then you build quality in at scale with reusable, accessible components, a testing strategy that balances unit, integration and end-to-end tests, and motion that stays smooth and respects reduced-motion settings. Finally you ship like a professional: a GitHub Actions pipeline for lint, typecheck, tests and build, reviewing pull requests for correctness and accessibility, and a capstone app you deploy and present as portfolio work. Every lesson has a reading, free videos and a quiz; many have an in-browser exercise or hands-on steps with real tools on your own machine.
Course content
Module 1
Front-End Architecture
3 lessons · 1h 7mStructure a growing codebase by feature, type props, state and API responses with TypeScript, and choose the right home for each kind of state.
- 12mStructuring a front-end codebaseReading
Organise features, components and utilities so a growing app stays easy to change.
- 35mTypeScript for UIReading
Type props, state and API responses so mistakes show up in your editor instead of in production.
- 20mServer and client stateReading
Choose between local, global and server state, and pick the simplest tool for each.
Module 2
Performance
3 lessons · 2h 1mDiagnose Core Web Vitals, reduce JavaScript and image weight, and choose a rendering strategy for each page.
- 51mCore Web VitalsReading
Diagnose LCP, CLS and INP problems with Lighthouse and Chrome DevTools.
- 50mCode splitting and imagesReading
Reduce JavaScript bundle size and image weight so pages load fast on real phones.
- 20mRendering strategiesReading
Compare client-side rendering, server-side rendering, static generation and incremental regeneration.
Module 3
Quality at Scale
3 lessons · 1h 30mBuild reusable accessible components, plan a balanced test suite, and add motion that is smooth and respects user settings.
- 35mComponent librariesReading
Build a reusable, accessible button with a small, predictable API.
- 20mTesting strategyReading
Plan which behaviour to cover with unit, integration and end-to-end tests.
- 35mMotion with restraintReading
Animate only transform and opacity, keep motion short and purposeful, and respect reduced motion.
Module 4
Shipping
3 lessons · 2h 23mRun lint, typecheck, tests and build in CI, review pull requests like a mid-level developer, and ship a production-ready capstone.
- 50mCI for front-endReading
Set up a GitHub Actions workflow that runs lint, typecheck, tests and a build on every pull request.
- 51mCode review as a mid-level devReading
Review a pull request for correctness, accessibility and maintainability, and give feedback people can act on.
- 42mCapstone: production-ready appReading
Plan, build, test and deploy an accessible, fast React app with CI, then present it as portfolio work.