System Design Visualizer
Frontend architecture patterns, backend infrastructure, authentication flows, and real-time communication deep-dives
Component Architecture Patterns
Frontend architecture has evolved through several eras. Each pattern solves the problems of its predecessor while introducing new trade-offs.
Presentational + Container
Classic (2015–2019)
Separate data-fetching containers from UI-only presentational components. Containers handle state/logic and pass props down.
Pros
✓ Clear separation of concerns
✓ Easy to test presentational components
✓ Reusable UI primitives
Cons
✗ Container nesting can get deep
✗ Outdated with hooks
✗ Lots of prop drilling
Hooks-Based
Modern (2019+)
Replace containers with custom hooks. Components call hooks directly for data/state. Logic is composed via hook composition.
Pros
✓ No wrapper hell
✓ Co-located logic
✓ Easy to compose
✓ Tree-shakeable
Cons
✗ Can lead to large components
✗ Hook dependency arrays
✗ Testing requires mock hooks
Feature-Sliced / Domain-Driven
Scalable (2021+)
Organize code by feature/domain, not by type. Each feature folder contains its own components, hooks, utils, types, and tests.
Pros
✓ Scales to large teams
✓ Encapsulated features
✓ Clear ownership
✓ Easy code-splitting
Cons
✗ Shared code duplication
✗ Cross-feature coupling risk
✗ Steeper onboarding
Server Components (RSC)
Next-gen (2023+)
Components render on the server by default. Only interactive pieces are client components. Blurs the line between frontend and backend.
Pros
✓ Zero client JS for static parts
✓ Direct DB/API access
✓ Streaming
✓ Reduced bundle size
Cons
✗ New mental model
✗ Framework-dependent
✗ Limited to React ecosystem