System Design
Practice frontend system design with real interview questions — from autocomplete to video players to collaborative editors.
Design Autocomplete / Typeahead Search
System design for building a Google-like autocomplete search component: debouncing, caching, keyboard navigation, race conditions, and mobile considerations.
Design a Social Media News Feed
System design for a Twitter/Facebook-style news feed: infinite scroll, virtualization, optimistic updates, real-time updates, lazy loading, and content ranking.
Design a Real-Time Chat Application
System design for Slack/WhatsApp-style chat: WebSocket management, message ordering, offline support, typing indicators, read receipts, search, and file uploads.
Design an E-Commerce Product Page
System design for an Amazon-style product page: image gallery and zoom, variant selection, pricing, add-to-cart, reviews, related products, SEO, and performance.
Design a Performant Image Carousel
System design for an image carousel/slider: touch/swipe, lazy loading, preloading, responsive breakpoints, autoplay, accessibility, and animation performance.
Design a Video Player
System design for a custom video player like YouTube: controls, progress thumbnails, quality selection, subtitles, keyboard shortcuts, fullscreen, PiP, buffering, and adaptive bitrate (HLS/DASH).
Design a Spreadsheet Application
System design for a spreadsheet like Google Sheets: virtualized grid, cell editing, formulas, undo/redo, selection, copy/paste, column/row resizing, and performance at scale.
Design a Drag-and-Drop Kanban Board
System design for a Kanban board like Trello: drag-drop between columns, reordering, optimistic updates, animations, mobile touch, multi-select, undo, and real-time collaboration.
Design a Frontend Notification System
System design for toasts, badges, and notification center: queue management, auto-dismiss, priority, read/unread, real-time delivery (SSE/WebSocket), filtering, push notifications, and overflow behavior.
Design a Collaborative Document Editor
System design for a collaborative editor like Google Docs: real-time sync (CRDTs vs OT), cursor presence, rich text (contentEditable vs ProseMirror/Tiptap), conflict resolution, offline, version history, comments, and permissions.
Design a Dynamic Form Builder
System design for Typeform/Google Forms–style form builders: schema-driven rendering, field types, validation, conditional logic, multi-step wizard, and submission handling.
Design an Analytics Dashboard
System design for Grafana/Datadog–style dashboards: chart rendering, time range selectors, auto-refresh, responsive grid, widgets, drill-down, and large dataset handling.
Design a File Upload Component
System design for Dropbox-style file upload: drag-and-drop, chunked uploads, progress, retry, pause/resume, thumbnail previews, and cancellation.
Design a Calendar / Scheduling Application
System design for Google Calendar–style apps: day/week/month views, event overlap handling, drag to create/resize, recurring events, timezones, and multi-calendar overlay.
Design a Multi-Step Checkout Flow
System design for Shopify-style checkout: step validation gates, address autocomplete, Stripe Elements, order summary sidebar, form persistence, and mobile optimization.