Frontend Engineering
Build fast, accessible, polished web interfaces with modern React and the wider web platform. Duration sixteen weeks. Target outcome: ship production grade, accessible, performant web apps with React, Next.js, and a strong design sense.
Overview
This track builds a complete modern frontend engineer. It assumes basic programming. You move from the web platform fundamentals through React, state, styling, data, testing, performance, and accessibility, ending with a capstone. Ship a real interface at every stage.
Month 1: The web platform and JavaScript
Week 1: HTML and CSS foundations
0 of 5- plain HTML and CSS
- A responsive, semantic, accessible landing page with no framework
Week 2: Modern JavaScript
0 of 5- modern JavaScript, the browser dev tools
- A small interactive app using fetch and the DOM only
Week 3: TypeScript
0 of 5- TypeScript
- Convert last week's app to TypeScript with strict mode
Week 4: Tooling and the ecosystem
0 of 5- Vite, ESLint, Prettier
- A Vite project scaffold with linting, formatting, and scripts
Month 2: React and state
Week 5: React fundamentals
0 of 5- React
- A multi component app with shared state
Week 6: Advanced React
0 of 5- React
- Extract reusable custom hooks and optimize a slow list
Week 7: State management and data fetching
0 of 4- TanStack Query: server state
- Zustand: light client state
- React Hook Form and Zod: forms and validation
- A data driven app with cached queries, mutations, and a validated form
Week 8: Styling and design systems
0 of 5- Tailwind CSS, shadcn and Radix primitives, Framer Motion
- A small design system with tokens, a themed component set, and dark and light mode
Month 3: Next.js, quality, and performance
Week 9: Next.js and the App Router
0 of 5- Next.js
- A Next.js app with server components, server actions, and streaming
Week 10: Accessibility
0 of 5- axe, the browser accessibility tree
- Make a complex component fully keyboard and screen reader accessible
Week 11: Testing
0 of 5- Vitest, React Testing Library, Playwright
- A test suite covering a component, a flow, and an end to end path
Week 12: Performance
0 of 5- Lighthouse, the React profiler
- Profile and improve an app until Core Web Vitals pass
Month 4: Capstone
Week 13: Real time and advanced data
0 of 3- Add a real time feature with optimistic updates
Week 14 to 16: Capstone
- A production grade frontend: Next.js with server components, cached data and mutations, a themed design system with dark and light mode, full accessibility, a test suite, and passing Core Web Vitals, deployed live
Resource master reference
Books and docs
The official React and Next.js documentation
web.dev for performance and accessibility
MDN for the web platform
Repositories
awesome react and awesome nextjs lists
the shadcn and TanStack documentation
Tools master list
HTML, CSS, TypeScript, Vite, React, Next.js, Tailwind, shadcn, Radix, Framer Motion, TanStack Query, Zustand, React Hook Form, Zod, Vitest, React Testing Library, Playwright, Lighthouse
Interview focus
Explain the difference between server and client components
How does React decide to re render and how do you prevent waste
Server state versus client state and which tool for each
How do you make a custom component accessible
Walk through improving Core Web Vitals
Optimistic updates and how you reconcile failures