Practice Problems

Master frontend system design and AI Frontend architecture through 18 curated problems. Design, get feedback, improve.

FE System DesignBeginner

Design a Reusable Component Library

Design a shared frontend component library with theming, versioning, and developer-experience trade-offs.

API DesignThemingVersioning
40 min
View details
FE System DesignBeginner

Infinite Scroll News Feed

Design a high-performance infinite feed with virtualization, cursor pagination, caching, and scroll restoration.

VirtualizationPaginationMemory Management
40 min
View details
FE System DesignBeginner

Client-Side Search with Autocomplete

Design an accessible autocomplete system with debouncing, caching, offline fallback, and race-condition handling.

DebouncingCachingAccessibility
45 min
View details
FE System DesignIntermediate

Real-Time Notification Center

Design a real-time notification system with multi-tab sync, read-state updates, and resilience during notification storms.

WebSocketsSSECross-Tab Sync
45 min
View details
AI for FrontendIntermediate

RAG-Powered Smart FAQ

Design a retrieval-augmented FAQ experience with chunking, relevance evaluation, and grounded answer generation.

RAGEmbeddingsChunking
50 min
View details
FE System DesignIntermediate

Dynamic Form Builder

Design a configurable form builder with schema persistence, validation, and intelligent defaults.

Schema DesignConditional LogicValidation
45 min
View details
FE System DesignAdvanced

Micro-Frontend Architecture

Design a micro-frontend platform with independent deploys, shared foundations, and healthy ownership boundaries.

Module FederationOwnership BoundariesShared State
50 min
View details
FE System DesignAdvanced

Offline-First PWA

Design an offline-first progressive web app with service workers, sync, caching, and conflict resolution.

Service WorkersIndexedDBSync
50 min
View details
FE System DesignAdvanced

Collaborative Whiteboard

Design a real-time collaborative whiteboard with CRDTs, presence, undo/redo, and large-session performance.

CRDTsPresenceUndo/Redo
55 min
View details
AI for FrontendBeginner

On-Device Image Classifier

Design a browser-based image classification system using TensorFlow.js with model loading strategies, Web Worker inference, and graceful degradation.

TensorFlow.jsTransfer LearningWeb Workers
45 min
View details
AI for FrontendIntermediate

AI-Powered Smart Search

Design a semantic search experience using browser-side embeddings, vector similarity, and hybrid keyword fallback.

EmbeddingsCosine SimilarityHybrid Search
50 min
View details
AI for FrontendIntermediate

Streaming AI Chat UI

Design a production streaming chat interface with token buffering, cancellation, markdown rendering, and error recovery.

SSEAbortControllerToken Buffering
50 min
View details
AI for FrontendBeginner

Browser Sentiment Dashboard

Design a real-time sentiment analysis dashboard that runs inference in the browser using ML models, with visualization and batch processing.

Sentiment AnalysisTransformers.jsBatch Inference
40 min
View details
AI for FrontendIntermediate

Client-Side Embedding Search

Design an entirely client-side semantic search system using browser embedding APIs, IndexedDB vector storage, and approximate nearest neighbor retrieval.

Client-Side EmbeddingsIndexedDBANN Search
50 min
View details
AI for FrontendIntermediate

AI Content Moderation Pipeline

Design a content moderation system that combines client-side pre-screening with server-side classification, human review queues, and trust & safety UX.

Content ClassificationModeration APIsHuman-in-the-Loop
45 min
View details
AI for FrontendIntermediate

AI-Powered Form Auto-Fill

Design an intelligent form system that uses LLM extraction to auto-populate fields from unstructured text, with confidence scoring and user override.

Structured OutputLLM ExtractionConfidence Scoring
45 min
View details
AI for FrontendAdvanced

Conversational UI Agent

Design a tool-calling conversational agent that can take actions in your app — searching, creating, updating — through natural language with approval gates and rollback.

ReAct PatternTool CallingAgent Loops
55 min
View details