A2Z Frontend
Master the path. Own the panel.
216 topics curated for top product company frontend loops—structured module guides with interview questions and panel-ready solutions for senior panels.
Free · 150 topics · Module-wise guides & solutions
Built for senior loops
Frontend interviews at top companies
One structured path from JavaScript fundamentals to system design—aligned with how Google, Meta, Amazon, and similar panels run senior frontend loops.
- Senior frontend engineer
- Staff / principal track
- React & TypeScript depth
- Top product company loops
- Machine coding rounds
- Frontend system design
How the track is organised
Three phases, ten modules
Follow the recommended order—each module builds on the last, aligned with how top product companies structure senior frontend interviews.
Core stack
Language, types, and the frameworks every panel assumes you know deeply
- JavaScript fundamentals, async & design patterns
- TypeScript generics, unions & strict typing
- React hooks, performance & state management
- Next.js rendering modes, caching & Server Actions
Platform & craft
Browser internals, security, and how strong teams ship production UI
- Rendering pipeline, Web Vitals & optimisation
- XSS, CSRF, auth flows & OAuth PKCE
- Bundlers, monorepos & internal web architecture
The interview room
Live coding and frontend system design under time pressure
- 45-minute UI builds—tabs, lists, autocomplete
- Frontend system design—feeds, RBAC, wizards, real-time UI
Full curriculum
Every module, in prep order
Each row opens a module guide—topics grouped by category with interview questions and solutions.
| # | Module | Interview focus | Topics | |
|---|---|---|---|---|
| 01 | JavaScript The floor for every round—closures, event loop, async, utilities, and patterns panels still drill. Event loop & closuresPolyfills & patterns | The floor for every round—closures, event loop, async, utilities, and patterns panels still drill. Event loop & closuresPolyfills & patterns | 29 | Open |
| 02 | TypeScript Types you defend in a staff loop—generics, strict mode, unions, and production API shapes. Generics & utility typesConditional & mapped types | Types you defend in a staff loop—generics, strict mode, unions, and production API shapes. Generics & utility typesConditional & mapped types | 10 | Open |
| 03 | React Hooks, Fiber, render perf, and state trade-offs—beyond todo-app answers. Reconciliation & hooksZustand vs React Query | Hooks, Fiber, render perf, and state trade-offs—beyond todo-app answers. Reconciliation & hooksZustand vs React Query | 29 | Open |
| 04 | Next.js SSR modes, App Router, streaming, caching—ship React and explain why. SSR / SSG / ISRServer Actions & cache | SSR modes, App Router, streaming, caching—ship React and explain why. SSR / SSG / ISRServer Actions & cache | 7 | Open |
| 05 | Browser & Performance URL → pixel, V8, networking, Core Web Vitals—senior “what happens when…” rounds. Rendering pipelineLCP, INP, CLS | URL → pixel, V8, networking, Core Web Vitals—senior “what happens when…” rounds. Rendering pipelineLCP, INP, CLS | 12 | Open |
| 06 | Security XSS, CSRF, token storage, OAuth PKCE—gaps that fail otherwise strong candidates. XSS & CSRFAuth in SPAs | XSS, CSRF, token storage, OAuth PKCE—gaps that fail otherwise strong candidates. XSS & CSRFAuth in SPAs | 6 | Open |
| 07 | Build Tools & Architecture Bundlers, ESM, monorepos, feature flags—how top teams ship and scale frontends. Vite vs WebpackPlatform & observability | Bundlers, ESM, monorepos, feature flags—how top teams ship and scale frontends. Vite vs WebpackPlatform & observability | 13 | Open |
| 08 | Machine Coding 45-minute UI builds—tabs, virtual lists, autocomplete—clean code under clock pressure. Accessible componentsState & edge cases | 45-minute UI builds—tabs, virtual lists, autocomplete—clean code under clock pressure. Accessible componentsState & edge cases | 100 | Open |
| 09 | Frontend System Design The final 10 FSD patterns—e-commerce, chat, docs, feed, video, Jira, drive, dashboard, design system, micro-frontends. Real interviewer promptsFull architecture walkthroughs | The final 10 FSD patterns—e-commerce, chat, docs, feed, video, Jira, drive, dashboard, design system, micro-frontends. Real interviewer promptsFull architecture walkthroughs | 10 | Open |
Based on the senior frontend prep sheet (PDF)· 216 guided topics
Every topic page includes
- The exact interview question from the sheet
- Structured guide with concept breakdown
- Panel-ready solution you can defend live
- Follow-ups interviewers ask next
Pair guides with live practice
After a module clicks, pressure-test in the machine coding editor—same timed UI builds top companies run.
Machine coding practice
JavaScript and React challenges in the browser—write code, run tests, and track progress on your profile.
- Interview-style UI problems with starter templates
- Automated tests in the live editor
- Profile dashboard for solved challenges