πŸͺ TechCookies
ConceptsPracticeSD challengesPricingNextJS Q&A
Log inStart free
πŸͺ TechCookies
ConceptsPracticeSD challengesPricingPrivacyTerms
Β© 2026 TechCookies
Concepts
β—ˆA/B Testing SystemsPro
β—ˆAdaptive Bitrate Streaming (HLS/DASH)Pro
β—ˆAnalytics PipelinesPro
β—‰Append-Only Audit Tables
β—ˆAsync Job Processing FundamentalsPro
β—ˆAsync Processing PipelinesPro
β—ˆAudio Streaming ArchitecturePro
β—ˆAuthentication FundamentalsPro
β—ˆAuthorisation and RBACPro
β—‰Caching
β—ˆCanvas and WebGL RenderingPro
β—‰Back-of-Envelope Estimation
β—‰CDN Caching
β—‰Circuit Breakers
β—‰Client-Side Caching
β—ˆConsistent hashingPro
β—ˆConflict-Free Replicated Data Types (CRDTs)Pro
β—ˆCross-Tab SynchronisationPro
β—‰Database Constraints as Data Guards
β—‰Database Indexes: Making Queries Fast
β—‰Relationships and Foreign Keys
β—ˆDatabases & storagePro
β—ˆDead-Letter QueuesPro
β—ˆAt-Least-Once vs Exactly-Once DeliveryPro
β—ˆDelta SyncPro
β—ˆDistributed Payment ArchitecturePro
β—ˆDrag-and-Drop ArchitecturePro
β—ˆEnd-to-End Encryption in the BrowserPro
β—ˆEdge Computing and CDN ArchitecturePro
β—ˆMicrocontroller and Embedded ConstraintsPro
β—‰Event-Driven Architecture
β—‰Exponential Backoff and Retry
β—‰Failure Modes in Distributed Systems
β—ˆFile API and File System Access APIPro
β—ˆFile Security and DeduplicationPro
β—‰Frontend Architecture Patterns
β—ˆGeolocation and Permissions APIPro
β—ˆGeospatial QueriesPro
β—‰Graceful Degradation and Fallbacks
β—ˆGrid Layout and Widget SystemsPro
β—‰Idempotency
β—ˆIndexedDB for Browser-Side StoragePro
β—‰Infinite Scroll and Pagination
β—ˆIntersection Observer APIPro
β—ˆIP-Based LocalisationPro
β—ˆKafka Deep DivePro
β—ˆLast-Write-Wins Conflict ResolutionPro
β—‰Lazy Loading Images and Media
β—‰Virtualisation and Large Lists
β—‰Load balancing
β—ˆMessage Queue FundamentalsPro
β—ˆMessage queuesPro
β—ˆObject Storage (S3-Compatible)Pro
β—ˆLogging and ObservabilityPro
β—ˆOffline-First ArchitecturePro
β—ˆOffline-Capable Hardware SystemsPro
β—ˆOperational Transform (OT)Pro
β—ˆPassword SecurityPro
β—ˆPayment Integration FundamentalsPro
β—ˆPresence and AwarenessPro
β—ˆProvider Adapter PatternPro
β—ˆQueue-per-Channel PatternPro
β—ˆRate Limiting AlgorithmsPro
β—ˆRate Limiting in PracticePro
β—‰Server State with React Query
β—‰Read Replicas and Write Scaling
β—ˆReal-Time Location TrackingPro
β—ˆReal-Time State ManagementPro
β—‰Redis Deep Dive
β—‰REST API Design Principles
β—ˆScheduled Jobs and CronPro
β—‰Schema Design Fundamentals
β—ˆServer-Sent Events (SSE)Pro
β—ˆService WorkersPro
β—ˆSQS and Managed QueuesPro
β—ˆState Machines on the FrontendPro
β—‰Stateless Service Design
β—‰Synchronous vs Asynchronous Communication
β—ˆThird-Party API ResiliencePro
β—ˆThree-Way MergePro
β—ˆTime-Series and Columnar DatabasesPro
β—‰Vertical vs Horizontal Scaling
β—ˆVideo Processing PipelinesPro
β—ˆWeb Audio APIPro
β—ˆWeb Crypto APIPro
β—ˆWeb Workers for Heavy ComputationPro
β—ˆWebhooks: Receiving External EventsPro
β—ˆWebRTCPro
β—ˆWebSocket ArchitecturePro
β—‰WebSockets vs SSE vs Polling
β—ˆWhen to Use NoSQLPro
β—ˆWorker Pool PatternPro
β—ˆYjs in PracticePro
β—‰State Management with Zustand
SD challenges
↗real-time chat UI (Messenger / Slack)Pro↗notification center (Slack / Gmail)View all →
System design β€Ί Concepts β€Ί Frontend Architecture Patterns
β—‰Frontend Architecture PatternsFree~30 min Β· avg 65%
On this page:What is itKey conceptsAdvanced patternsSD challenges
What is Frontend Architecture Patterns?

Overview

Container/presenter split, Context vs global store, and when to lift or push state.

Key Points

  • Study the core concepts before attempting related system design challenges.
  • Apply these patterns in practice to build intuition for trade-offs.
  • Connect this concept to adjacent topics for a holistic understanding.

When to Apply

Use this concept when designing systems that require the capabilities described above. Consider the trade-offs carefully against simpler alternatives before committing to the added complexity.

Key concepts
Advanced patterns
πŸ”’
Pro content
Advanced patterns and interview tips are on the Pro plan.
Unlock Pro β†’
βŠ—
Ready to apply this?
Design a real-time chat UI (Messenger / Slack) β€” a challenge that uses frontend architecture patterns heavily.
β–Ά Attempt SD challenge
πŸ“ NotesFrontend Architecture Patterns
Sign in to save notes across sessions.