Frontend Engineering · 300-level
Frontend Engineering: Production User Interfaces
A staff-level deep dive into shipping frontend that survives production: rendering models, component and state architecture, Core Web Vitals, accessibility, design systems, data fetching, testing, and deploy/DX — each taught as a mechanism with its cost, failure mode, and guardrail.
FEN-3013 creditselectiveno prerequisites
What's inside
Sections & lessons
01
Rendering models
- Choosing a rendering model per route: CSR, SSR, SSGconcept40 min
- Hydration and why it, not first paint, governs interactivityconcept40 min
- Streaming SSR and Suspense boundariesconcept35 min
- React Server Components and the client boundaryconcept45 min
02
Component architecture and state
- Composition over configuration: component APIs that scaleconcept40 min
- State colocation and lifting: where state actually livesconcept40 min
- Server state vs client state: stop putting fetched data in useStateconcept45 min
- Global state without the re-render taxconcept40 min
- Forms: controlled, uncontrolled, and validation at the boundaryconcept40 min
03
Performance and Core Web Vitals
- The three Core Web Vitals and what moves eachconcept40 min
- The JavaScript bundle: splitting, lazy loading, and the cost of shipping JSconcept40 min
- Images and fonts: the biggest LCP leversconcept40 min
- Measuring in the field: lab vs RUM, p75, and the tailconcept35 min
04
Accessibility
- Semantic HTML first: the accessibility tree you get for freeconcept40 min
- Keyboard operability and focus managementconcept40 min
- ARIA and screen readers: when native semantics run outconcept40 min
- Testing accessibility: automated, manual, and the coverage gapconcept35 min
05
Design systems and CSS architecture
- Design tokens and themingconcept40 min
- CSS architecture: utility, modules, and CSS-in-JS by costconcept40 min
- Responsive design and component libraries: build vs buyconcept35 min
06
Data fetching, caching, and mutations
- The client cache: query keys, staleness, and revalidationconcept40 min
- Loading and error states as first-class UIconcept35 min
- Mutations and optimistic updatesconcept40 min
- Race conditions, cancellation, and out-of-order responsesconcept40 min
07
Testing and quality
- The testing pyramid and testing-library philosophyconcept40 min
- Component tests, e2e, and visual regressionconcept40 min
- Avoiding flaky tests and keeping the suite trustedconcept35 min
08
Build, deploy, and developer experience
- Bundlers and end-to-end type safetyconcept40 min
- CI, preview deploys, and the deployment pipelineconcept35 min
- Feature flags and frontend error monitoringconcept40 min
This module ends in a gate you can fail.
That's what makes passing it mean something. Take the DSAT, get placed, and start earning.