Frontend Patterns

Catalog

All patterns

Browse 180 battle-tested frontend architecture patterns, strategies, and techniques covering components, state, performance, accessibility, security, and more.

Looking for something specific?

Use quick search or skim the table to jump straight to a pattern detail page.

ID Pattern Category Added
#001 Single Responsibility Pattern NEW Project Structure 10 Oct 2025
#002 Folder Organization Strategy NEW Project Structure 10 Oct 2025
#003 Barrel Export Pattern NEW Project Structure 10 Oct 2025
#004 Absolute Import Pattern NEW Project Structure 10 Oct 2025
#005 Separation of Concerns Pattern NEW Project Structure 10 Oct 2025
#006 Colocation Pattern NEW Project Structure 10 Oct 2025
#007 Public API Pattern NEW Project Structure 10 Oct 2025
#008 Presentational vs. Container Pattern NEW Component 10 Oct 2025
#009 Composition over Inheritance Pattern NEW Component 10 Oct 2025
#010 Props and Attributes Pattern NEW Component 10 Oct 2025
#011 Default Props Pattern NEW Component 10 Oct 2025
#012 Slot Pattern NEW Component 10 Oct 2025
#013 Render Function Pattern NEW Component 10 Oct 2025
#014 Higher-Order Component Pattern NEW Component 10 Oct 2025
#015 Compound Component Pattern NEW Component 10 Oct 2025
#016 Controlled vs. Uncontrolled Components Pattern NEW Component 10 Oct 2025
#017 Prop Drilling Solution Pattern NEW Component 10 Oct 2025
#018 Component Lifecycle Pattern NEW Component 10 Oct 2025
#019 Pure Component Pattern NEW Component 10 Oct 2025
#020 CSS Modules & Scoped Styles Pattern NEW Styling 10 Oct 2025
#021 Utility-First CSS Pattern NEW Styling 10 Oct 2025
#022 CSS-in-JS Pattern NEW Styling 10 Oct 2025
#023 BEM Class Naming Pattern NEW Styling 10 Oct 2025
#024 Responsive Design Pattern NEW Styling 10 Oct 2025
#025 Design Token Pattern NEW Styling 10 Oct 2025
#026 Theme Provider Pattern NEW Styling 10 Oct 2025
#027 CSS Custom Properties Pattern NEW Styling 10 Oct 2025
#028 Mobile-First Pattern NEW Styling 10 Oct 2025
#029 Style Isolation Pattern NEW Styling 10 Oct 2025
#030 Component State Pattern NEW State Management 10 Oct 2025
#031 State Reducer Pattern NEW State Management 10 Oct 2025
#032 State Lifting Pattern NEW State Management 10 Oct 2025
#033 State Colocation Pattern NEW State Management 10 Oct 2025
#034 Lazy Initialization Pattern NEW State Management 10 Oct 2025
#035 State Batching Pattern NEW State Management 10 Oct 2025
#036 Derived State Pattern NEW State Management 10 Oct 2025
#037 State Synchronization Pattern NEW State Management 10 Oct 2025
#038 Dependency Injection Pattern NEW State Management 10 Oct 2025
#039 Service Locator Pattern NEW State Management 10 Oct 2025
#040 Observer Pattern NEW State Management 10 Oct 2025
#041 Pub/Sub Pattern NEW State Management 10 Oct 2025
#042 Flux Pattern NEW State Management 10 Oct 2025
#043 Single Store Pattern NEW State Management 10 Oct 2025
#044 Multi-Store Pattern NEW State Management 10 Oct 2025
#045 Selector Pattern NEW State Management 10 Oct 2025
#046 Normalized State Pattern NEW State Management 10 Oct 2025
#047 Immutable Update Pattern NEW State Management 10 Oct 2025
#048 Conflict Resolution Pattern NEW State Management 10 Oct 2025
#049 Server State vs Client State Pattern NEW State Management 10 Oct 2025
#050 Controlled Input Pattern NEW State Management 10 Oct 2025
#051 Form Library Integration Pattern NEW State Management 10 Oct 2025
#052 Field-Level Validation Pattern NEW State Management 10 Oct 2025
#053 Form-Level Validation Pattern NEW State Management 10 Oct 2025
#054 Async Validation Pattern NEW State Management 10 Oct 2025
#055 Form State Machine Pattern NEW State Management 10 Oct 2025
#056 Multi-Step Form Pattern NEW State Management 10 Oct 2025
#057 Effect-Based Fetching Pattern NEW Data Fetching 10 Oct 2025
#058 Loading State Pattern NEW Data Fetching 10 Oct 2025
#059 Error Handling Pattern NEW Data Fetching 10 Oct 2025
#060 Request Cancellation Pattern NEW Data Fetching 10 Oct 2025
#061 Stale-While-Revalidate Pattern NEW Data Fetching 10 Oct 2025
#062 Query Caching Pattern NEW Data Fetching 10 Oct 2025
#063 Polling Pattern NEW Data Fetching 10 Oct 2025
#064 Retry Pattern NEW Data Fetching 10 Oct 2025
#065 Pagination Pattern NEW Data Fetching 10 Oct 2025
#066 Infinite Scroll Pattern NEW Data Fetching 10 Oct 2025
#067 Optimistic Update Pattern NEW Data Fetching 10 Oct 2025
#068 Cache Invalidation Pattern NEW Data Fetching 10 Oct 2025
#069 Prefetching Pattern NEW Data Fetching 10 Oct 2025
#070 Parallel Request Pattern NEW Data Fetching 10 Oct 2025
#071 Dependent Query Pattern NEW Data Fetching 10 Oct 2025
#072 Mutation Pattern NEW Data Fetching 10 Oct 2025
#073 GraphQL Query Pattern NEW Data Fetching 10 Oct 2025
#074 REST Response Normalization Pattern NEW Data Fetching 10 Oct 2025
#075 WebSocket Integration Pattern NEW Data Fetching 10 Oct 2025
#076 Server-Sent Events Pattern NEW Data Fetching 10 Oct 2025
#077 Query Deduplication Pattern NEW Data Fetching 10 Oct 2025
#078 Memoization Pattern NEW Performance 10 Oct 2025
#079 Computed Value Pattern NEW Performance 10 Oct 2025
#080 Stable Reference Pattern NEW Performance 10 Oct 2025
#081 Virtual Scrolling Pattern NEW Performance 10 Oct 2025
#082 Code Splitting Pattern NEW Performance 10 Oct 2025
#083 Dynamic Import Pattern NEW Performance 10 Oct 2025
#084 Lazy Loading Pattern NEW Performance 10 Oct 2025
#085 Async Boundary Pattern NEW Performance 10 Oct 2025
#086 Error Boundary Pattern NEW Performance 10 Oct 2025
#087 Skeleton Loading Pattern NEW Performance 10 Oct 2025
#088 Image Optimization Pattern NEW Performance 10 Oct 2025
#089 Font Loading Strategy Pattern NEW Performance 10 Oct 2025
#090 SVG Optimization Pattern NEW Performance 10 Oct 2025
#091 Icon System Pattern NEW Performance 10 Oct 2025
#092 Progressive Image Pattern NEW Performance 10 Oct 2025
#093 Resource Hint Pattern NEW Performance 10 Oct 2025
#094 Critical Asset Preload Pattern NEW Performance 10 Oct 2025
#095 Bundle Size Monitoring Pattern NEW Performance 10 Oct 2025
#096 Tree Shaking Pattern NEW Performance 10 Oct 2025
#097 Route-Based Splitting Pattern NEW Performance 10 Oct 2025
#098 Component Interface Pattern NEW Type Safety and Contracts 10 Oct 2025
#099 Props Contract Pattern NEW Type Safety and Contracts 10 Oct 2025
#100 Event Handler Contract Pattern NEW Type Safety and Contracts 10 Oct 2025
#101 Generic Component Pattern NEW Type Safety and Contracts 10 Oct 2025
#102 Discriminated Union Pattern NEW Type Safety and Contracts 10 Oct 2025
#103 Type Guard Pattern NEW Type Safety and Contracts 10 Oct 2025
#104 Utility Type Pattern NEW Type Safety and Contracts 10 Oct 2025
#105 Literal Union Pattern NEW Type Safety and Contracts 10 Oct 2025
#106 Interface Definition Pattern NEW Type Safety and Contracts 10 Oct 2025
#107 Runtime Validation Pattern NEW Type Safety and Contracts 10 Oct 2025
#108 API Schema Pattern NEW Type Safety and Contracts 10 Oct 2025
#109 Form Data Type Pattern NEW Type Safety and Contracts 10 Oct 2025
#110 Schema Validation Pattern NEW Type Safety and Contracts 10 Oct 2025
#111 Contract Testing Pattern NEW Type Safety and Contracts 10 Oct 2025
#112 Branded Type Pattern NEW Type Safety and Contracts 10 Oct 2025
#113 Client-Side Routing Pattern NEW Routing and Navigation 10 Oct 2025
#114 Nested Route Pattern NEW Routing and Navigation 10 Oct 2025
#115 Route Guard Pattern NEW Routing and Navigation 10 Oct 2025
#116 Route Parameter Pattern NEW Routing and Navigation 10 Oct 2025
#117 Query String Pattern NEW Routing and Navigation 10 Oct 2025
#118 Dynamic Route Pattern NEW Routing and Navigation 10 Oct 2025
#119 Catch-All Route Pattern NEW Routing and Navigation 10 Oct 2025
#120 Route Transition Pattern NEW Routing and Navigation 10 Oct 2025
#121 Navigation Middleware Pattern NEW Routing and Navigation 10 Oct 2025
#122 Deep Linking Pattern NEW Routing and Navigation 10 Oct 2025
#123 History Management Pattern NEW Routing and Navigation 10 Oct 2025
#124 Scroll Restoration Pattern NEW Routing and Navigation 10 Oct 2025
#125 Route Prefetching Pattern NEW Routing and Navigation 10 Oct 2025
#126 Breadcrumb Pattern NEW Routing and Navigation 10 Oct 2025
#127 Link Preloading Pattern NEW Routing and Navigation 10 Oct 2025
#128 Semantic HTML Pattern NEW Accessibility 10 Oct 2025
#129 Keyboard Navigation Pattern NEW Accessibility 10 Oct 2025
#130 Focus Management Pattern NEW Accessibility 10 Oct 2025
#131 Focus Trap Pattern NEW Accessibility 10 Oct 2025
#132 ARIA Pattern NEW Accessibility 10 Oct 2025
#133 Skip Links Pattern NEW Accessibility 10 Oct 2025
#134 Screen Reader Pattern NEW Accessibility 10 Oct 2025
#135 Live Regions Pattern NEW Accessibility 10 Oct 2025
#136 Color Contrast Pattern NEW Accessibility 10 Oct 2025
#137 Reduced Motion Pattern NEW Accessibility 10 Oct 2025
#138 Accessible Animation Pattern NEW Accessibility 10 Oct 2025
#139 Accessible Forms Pattern NEW Accessibility 10 Oct 2025
#140 Component Testing Pattern NEW Testing 10 Oct 2025
#141 Query Strategy Pattern NEW Testing 10 Oct 2025
#142 User Interaction Testing Pattern NEW Testing 10 Oct 2025
#143 API Mocking Pattern NEW Testing 10 Oct 2025
#144 Stateful Logic Testing Pattern NEW Testing 10 Oct 2025
#145 Context Testing Pattern NEW Testing 10 Oct 2025
#146 Snapshot Testing Pattern NEW Testing 10 Oct 2025
#147 Integration Testing Pattern NEW Testing 10 Oct 2025
#148 E2E Testing Pattern NEW Testing 10 Oct 2025
#149 Accessibility Testing Pattern NEW Testing 10 Oct 2025
#150 Visual Regression Pattern NEW Testing 10 Oct 2025
#151 Mock Service Worker Pattern NEW Testing 10 Oct 2025
#152 Test Data Builder Pattern NEW Testing 10 Oct 2025
#153 Error State Testing Pattern NEW Testing 10 Oct 2025
#154 Coverage Strategy Pattern NEW Testing 10 Oct 2025
#155 Linting Pattern NEW Developer Experience 10 Oct 2025
#156 Code Formatting Pattern NEW Developer Experience 10 Oct 2025
#157 Git Hooks Pattern NEW Developer Experience 10 Oct 2025
#158 Commit Message Convention Pattern NEW Developer Experience 10 Oct 2025
#159 Environment Configuration Pattern NEW Developer Experience 10 Oct 2025
#160 Local Development Pattern NEW Developer Experience 10 Oct 2025
#161 Hot Module Replacement Pattern NEW Developer Experience 10 Oct 2025
#162 Debugging Setup Pattern NEW Developer Experience 10 Oct 2025
#163 Performance Profiling Pattern NEW Developer Experience 10 Oct 2025
#164 Structured Logging Pattern NEW Developer Experience 10 Oct 2025
#165 Micro-Frontend Communication Pattern NEW Developer Experience 10 Oct 2025
#166 Feature Toggle Pattern NEW Developer Experience 10 Oct 2025
#167 A/B Testing Pattern NEW Developer Experience 10 Oct 2025
#168 Web Component Wrapper Pattern NEW Developer Experience 10 Oct 2025
#169 Telemetry Pattern NEW Developer Experience 10 Oct 2025
#170 Component Deprecation Strategy Pattern NEW Developer Experience 10 Oct 2025
#171 Documentation as Code Pattern NEW Developer Experience 10 Oct 2025
#172 Content Security Policy (CSP) Pattern NEW Security and Privacy 10 Oct 2025
#173 Input Sanitization Pattern NEW Security and Privacy 10 Oct 2025
#174 Output Encoding Pattern NEW Security and Privacy 10 Oct 2025
#175 Trusted Types Pattern NEW Security and Privacy 10 Oct 2025
#176 Secure Token Storage Pattern NEW Security and Privacy 10 Oct 2025
#177 CSRF Protection Pattern NEW Security and Privacy 10 Oct 2025
#178 SameSite Cookie Pattern NEW Security and Privacy 10 Oct 2025
#179 Subresource Integrity Pattern NEW Security and Privacy 10 Oct 2025
#180 PII Redaction Pattern NEW Security and Privacy 10 Oct 2025

Join the newsletter for launch announcements, new pattern drops, and resources.

No spam. Unsubscribe anytime.