System Design Playground

A staged practice tool that mimics a real frontend system design interview: requirements, architecture diagram, deep-dive, and self-review. Free to use, pick a problem below to start.

Design a News Feed

You are designing the client-side architecture for a social feed, similar to the main timeline in a product like LinkedIn or Twitter. Users scroll an endless list of posts containing text, images, and engagement actions (like, comment, share).

Foundational4 stages

Design an Autocomplete Search Box

You are designing the client architecture for a search box that suggests matches as the user types, similar to a site search or command palette.

Foundational5 stages

Design a Notification System (Toasts + Inbox)

You are designing the client architecture for in-app notifications: transient toasts for real-time events, plus a persistent inbox the user can review later.

Intermediate4 stages

Design an Infinite Scroll Product Listing

You are designing the client architecture for an e-commerce product listing page: a grid of product cards (image, price, rating) that loads more items as the user scrolls, similar to Amazon or a marketplace search results page.

Foundational4 stages

Design a Drag-and-Drop Kanban Board

You are designing a Kanban board (like Trello) where cards can be dragged between columns and reordered within a column, both with a mouse and via keyboard.

Intermediate5 stages

Design a Virtualized List for 100k Rows

You are designing a scrollable list component that can render 100,000 rows without putting 100,000 DOM nodes on the page, similar to a large log viewer or a spreadsheet-like grid.

Intermediate5 stages

Design a Rich Text Editor

You are designing a rich text editor toolbar and content area: bold/italic/underline, headings, lists, and links, similar to a scoped-down Notion or Google Docs editing surface.

Advanced5 stages

Design a Resumable File Upload System

You are designing the client architecture for uploading large files (up to 2GB video files) from a browser, similar to uploading a video to YouTube Studio or a file to Google Drive.

Intermediate4 stages

Design a Date Picker Component

You are designing a date picker component: a text input that opens a calendar popover for selecting a single date, used across a form-heavy product.

Foundational5 stages

Design a Multi-Step Form Wizard

You are designing a multi-step form wizard (e.g. a job application or onboarding flow) that spans several screens with a progress indicator, back/next navigation, and validation.

Foundational5 stages

Design a Shopping Cart & Checkout Flow

You are designing the client architecture for a shopping cart and multi-step checkout flow for an e-commerce site: cart drawer, shipping details, payment, and order confirmation.

Intermediate4 stages

Design a Video Player with Custom Controls

You are designing a custom video player UI on top of the native `<video>` element: play/pause, seek bar, volume, playback speed, and fullscreen, similar to a YouTube-style player.

Intermediate5 stages

Design a Collaborative Document Editor

You are designing the client architecture for a real-time collaborative text editor, similar to Google Docs: multiple users can type in the same document simultaneously and see each other's changes and cursors live.

Advanced4 stages

Design an Image Gallery with Lazy Loading & Lightbox

You are designing an image gallery grid: hundreds of thumbnails that load lazily as the user scrolls, opening into a full-screen lightbox with next/previous navigation.

Foundational5 stages

Design a Dashboard with Real-Time Widgets

You are designing the client architecture for a customizable analytics dashboard made of independent widgets (charts, KPI tiles, tables), similar to a Grafana or internal admin dashboard.

Intermediate4 stages

System Design Playground

How it works

Design a News Feed

Design an Autocomplete Search Box

Design a Notification System (Toasts + Inbox)

Design an Infinite Scroll Product Listing

Design a Drag-and-Drop Kanban Board

Design a Virtualized List for 100k Rows

Design a Rich Text Editor

Design a Resumable File Upload System

Design a Date Picker Component

Design a Multi-Step Form Wizard

Design a Shopping Cart & Checkout Flow

Design a Video Player with Custom Controls

Design a Collaborative Document Editor

Design an Image Gallery with Lazy Loading & Lightbox

Design a Dashboard with Real-Time Widgets