Foundation
Accessibility as a Foundation
Why accessibility must be architectural from day one, not a cosmetic afterthought you retrofit later.
12 mins
Read article
Frontend Patterns
BETA
The Complete
Frontend
Architecture
Reference
180+ production-ready patterns and guides covering every aspect of modern frontend development
Start with Foundations
Not sure which approach?
Browse Guides
Already familiar?
Explore Patterns
Site Structure
How This Site Works
Content organized in three layers, from deep principles to specific techniques
The Why
Foundations
Build on solid principles. Learn the core concepts that underpin great frontend architecture.
View Foundations
The When
Guides
Not sure which pattern to use? Start with a comprehensive guide.
View Guides
The How
Patterns
Atomic, non-opinionated techniques. Short, factual descriptions of specific implementations.
View Patterns
Core Principles
Foundations
Core principles that shape how we think about building for the web.
Expert Knowledge
Guides
Navigate complex decisions with our activity-based guides.
- Icon for Accessible Interaction PlaybookAccessibility NEW
Accessible Interaction Playbook
Guide to delivering inclusive interactive experiences through focus, announcements, and motion control.
Patterns: Skip Links • Focus Management • Keyboard Navigation + 3 moreRead guide - Icon for Choosing a CSS StrategyStyling NEW
Choosing a CSS Strategy
Decision framework for selecting between BEM, CSS-in-JS, Utility-first, and CSS Modules.
Patterns: BEM Class Naming • CSS-in-JS • Utility-First CSS + 5 moreRead guide - Icon for Choosing a Rendering StrategyArchitecture NEW
Choosing a Rendering Strategy
Framework for selecting between SSG, SSR, ISR, CSR, and streaming approaches.
Patterns: Code Splitting • Route-Based Splitting • Lazy Loading + 2 moreRead guide - Icon for Frontend Observability and DiagnosticsDeveloper Experience NEW
Frontend Observability and Diagnostics
How to capture, trace, and debug client behavior with actionable logs, telemetry, and profiling.
Patterns: Telemetry • Structured Logging • Performance Profiling + 2 moreRead guide - Icon for Managing Async UX StatesPerformance NEW
Managing Async UX States
Patterns for shaping resilient loading, error, and optimistic flows across your frontend.
Patterns: Async Boundary • Loading State • Optimistic Update + 2 moreRead guide - Icon for Optimizing Perceived PerformancePerformance NEW
Optimizing Perceived Performance
Practical playbook for keeping interfaces feeling fast with skeletons, preloading, and smart asset delivery.
Patterns: Critical Asset Preload • Route Prefetching • Resource Hint + 2 moreRead guide - Icon for Securing Frontend Data FlowsSecurity and Privacy NEW
Securing Frontend Data Flows
Defense-in-depth checklist for eliminating client-side injection risks and protecting user data.
Patterns: Content Security Policy (CSP) • CSRF Protection • Input Sanitization + 2 moreRead guide - Icon for Testing Confidence LadderTesting NEW
Testing Confidence Ladder
Strategy for stacking unit, integration, visual, and accessibility tests to cover modern frontends.
Patterns: Component Testing • Integration Testing • Stateful Logic Testing + 3 moreRead guide
Full Library
180+ Patterns
Atomic, non-opinionated techniques for implementing specific functionality.
- Icon for Accessibility Browse
Accessibility
Making apps usable for everyone.
- Icon for Component Browse
Component
How to structure, compose, and organize UI components.
- Icon for Data Fetching Browse
Data Fetching
Getting data from APIs, caching, synchronization.
- Icon for Developer Experience Browse
Developer Experience
Making life easier for your team.
- Icon for Performance Browse
Performance
Making apps fast: loading, rendering, runtime performance.
- Icon for Project Structure
Project Structure
Organize folders and files within a project.
- Absolute Import
- Barrel Export
- Colocation + 4 more
- Icon for Routing and Navigation
Routing and Navigation
The flow through an app.
- Breadcrumb
- Catch-All Route
- Client-Side Routing + 12 more
- Icon for Security and Privacy Browse
Security and Privacy
Protecting users and applications.
- Icon for State Management Browse
State Management
Where state lives, how it flows, how to manage it.
- Icon for Styling Browse
Styling
Making apps look their best.
- Icon for Testing Browse
Testing
How to test effectively at scale.
- Icon for Type Safety and Contracts
Type Safety and Contracts
Where state lives, how it flows, how to manage it.
- API Schema
- Branded Type
- Component Interface + 12 more
Stay Updated
Get New Patterns
in Your Inbox
Join thousands of developers receiving weekly insights on frontend architecture patterns