08 · Engineering craft
Architecture
Structuring frontends that survive scale and many engineers.
How to structure apps that many engineers and many teams touch. The Staff-level differentiator.
Component & app structure
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Component architecture & composition | 🟡 | 1h | #components #patterns |
patterns.dev ⭐ |
| Container vs presentational | 🟢 | 30m | #patterns |
patterns.dev ⭐ |
| Atomic Design | 🟢 | 45m | #design-systems |
Atomic Design (Brad Frost) ⭐ |
| Feature-based / feature-sliced structure | 🟡 | 45m | #structure |
Feature-Sliced Design ⭐ |
| MVC / MVVM in the frontend | 🟡 | 45m | #patterns |
MDN: MVC ⭐ |
| Clean architecture / layering | 🔴 | 1h | #architecture |
The Clean Architecture ⭐ |
| Domain-Driven Design (frontend) | 🔴 | 1.5h | #ddd |
DDD reference ⭐ |
| Dependency injection | 🟡 | 45m | #patterns |
patterns.dev ⭐ |
| State architecture (where state lives) | 🔴 | 1h | #state #architecture |
State management ⭐ |
Scaling to many teams
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Micro-frontends | 🔴 | 2h | #micro-frontends #scale |
martinfowler.com: micro frontends ⭐ |
| Module Federation | 🔴 | 1.5h | #micro-frontends #bundling |
Module Federation ⭐ |
| Monorepos (Nx / Turborepo) | 🔴 | 1.5h | #monorepo #scale |
Turborepo ⭐ |
| Design systems | 🔴 | 1.5h | #design-systems |
Design Systems Handbook ⭐ |
| Component libraries & API design | 🟡 | 1h | #components #design-systems |
react.dev ⭐ |
| Design tokens | 🟡 | 45m | #design-systems #theming |
W3C: design tokens ⭐ |
| Plugin / extension systems | 🔴 | 1h | #extensibility |
VS Code extension API ⭐ |
| Versioning & release strategy | 🟡 | 45m | #tooling |
Changesets ⭐ |
Delivery & cross-cutting
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Rendering strategy selection (CSR/SSR/SSG/ISR) | 🔴 | 1h | #rendering |
web.dev: rendering on the web ⭐ |
| Backend-for-Frontend (BFF) | 🟡 | 45m | #api #architecture |
samnewman.io: BFF ⭐ |
| Build tooling (Vite/Webpack/esbuild) | 🟡 | 1h | #bundling #tooling |
Vite ⭐ |
| Error handling & observability | 🟡 | 45m | #reliability |
Sentry docs ⭐ |
| Feature flags & experimentation | 🔴 | 1h | #architecture |
martinfowler.com ⭐ |
| Internationalization architecture | 🟡 | 45m | #i18n |
FormatJS ⭐ |
| CI/CD for frontend | 🟡 | 45m | #tooling |
GitHub Actions ⭐ |
❓ Rapid-fire architecture interview questions
Real architecture questions asked at the SDE-2 / senior / staff level. Answer out loud, then verify above.
- What are micro-frontends and when would you use (or avoid) them?
- What is Module Federation?
- Monorepo vs polyrepo — trade-offs?
- How do you design a reusable component library API?
- What is a design system and what does it include?
- What are design tokens?
- How do you structure a large frontend codebase (feature-based/FSD)?
- What is a Backend-for-Frontend (BFF)?
- How do you decide CSR vs SSR vs SSG for a project?
- What is dependency injection on the frontend?
- How do you share state across micro-frontends?
- How do you version and release shared packages?
- What is atomic design?
- How do you enforce architectural boundaries in a codebase?
- How do you roll out changes safely with feature flags?
Related: 06-react · 13-state-management · 18-design-patterns · 19-build-your-own
Missing something? Add a row.