๐Ÿช TechCookies
HomeDSASystem DesignMy Progress
Free
Log inStart free
TechCookies โ€” Practice ยท Learn ยท PrepareTechCookies โ€” Practice ยท Learn ยท Prepare
ConceptsPracticeSD challengesPricingPrivacyTermsContact
ยฉ 2026 TechCookies
โ† System Design

SD challenges

Full system design prompts. Draw architecture, define APIs, model data, explain tradeoffs.

16 SD challenges in this view require Pro

Each Pro challenge includes diagrams, API design, tradeoffs, and an expert solution. Upgrade to unlock all 31 challenges.

Upgrade to Pro โ†’

Track

Difficulty

Time available

10 free ยท 16 pro

26 challenges found

Frontend System DesignIntermediateโฑ 45 min

Design a browser-based file manager (File API + File System Access API)

File upload, preview, drag-and-drop processing, and local file system access.

file-apifile-system-accessdrag-and-dropresumable-upload+2 more

Concepts (0/1 done)

0%
โ—‹Databases & StorageNot started

Complete all concepts to unlock full AI rubric feedback.

Start 45 min session โ†’
Pro
Frontend System DesignSeniorโฑ 60 min

Design a collaborative whiteboard (Canvas API)

Real-time multi-user drawing surface using Canvas API with sync and undo.

canvas-apireal-timecrdtundo-redo

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignSeniorโฑ 60 min

Design a real-time chat UI (Messenger / Slack)

Real-time messaging UI with typing indicators, read receipts, and optimistic sends.

frontendreal-timewebsocketoptimistic-ui

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignSeniorโฑ 60 min

Design a collaborative document editor (Google Docs)

Real-time multi-user text editor with live cursors, conflict resolution, and offline support.

frontendreal-timecrdtoffline

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Frontend System DesignIntermediateโฑ 30 min

Design cross-tab cart and auth sync (Broadcast Channel API)

Keep cart, auth state, and UI in sync across multiple browser tabs.

broadcast-channelshared-workerstorage-eventcross-tab+1 more

Concepts (0/1 done)

0%
โ—‹Databases & StorageNot started

Complete all concepts to unlock full AI rubric feedback.

Start 30 min session โ†’
Pro
Frontend System DesignSeniorโฑ 60 min

Design a drag-and-drop dashboard builder (Microsoft / Notion)

Widget-based dashboard where users drag, resize, and reorder components with layout persistence.

frontenddrag-and-dropcomponent-systemstate-management

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignSeniorโฑ 60 min

Design end-to-end encrypted notes in the browser (Web Crypto API)

Client-side encryption of notes using Web Crypto API so the server never sees plaintext.

web-cryptoaes-gcmrsa-oaepkey-derivation

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignSeniorโฑ 45 min

Design a frontend data-fetching layer (Fetch API)

Build a robust HTTP client with caching, deduplication, and retry using the Fetch API.

fetch-apicachinghttpabort-controller

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignSeniorโฑ 60 min

Design an infinite canvas for a design tool (Figma / Miro)

Pan-and-zoom infinite canvas with virtualized object rendering, selection, and real-time collaboration.

frontendcanvasperformancereal-time

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Frontend System DesignIntermediateโฑ 30 min

Design a file upload UI

Reusable drag-and-drop file upload component with chunked uploads and retry.

frontendcomponentuxperformance
Start 30 min session โ†’
Frontend System DesignIntermediateโฑ 45 min

Design a location-aware store locator (Geolocation API)

Store finder with live GPS position, map rendering, and distance sorting.

geolocation-apimapsgpspermissions-api+1 more

Concepts (0/2 done)

0%
โ—‹Databases & StorageNot startedโ—‹CachingNot started

Complete all concepts to unlock full AI rubric feedback.

Start 45 min session โ†’
Frontend System DesignIntermediateโฑ 45 min

Design an offline notes app with local-first sync (IndexedDB)

Local-first notes app using IndexedDB as the primary store with cloud backup.

indexeddblocal-firstsyncoffline+1 more

Concepts (0/1 done)

0%
โ—‹Databases & StorageNot started

Complete all concepts to unlock full AI rubric feedback.

Start 45 min session โ†’
Frontend System DesignIntermediateโฑ 45 min

Design infinite scroll with lazy image loading (Intersection Observer)

Virtualized feed with lazy loading using Intersection Observer API.

intersection-observerlazy-loadingvirtualizationperformance+1 more

Concepts (0/2 done)

0%
โ—‹CachingNot startedโ—‹Load BalancingNot started

Complete all concepts to unlock full AI rubric feedback.

Start 45 min session โ†’
Pro
Frontend System DesignSeniorโฑ 45 min

Design a live map with real-time tracking (Uber)

Real-time driver position tracking on a map with smooth interpolation and state management.

frontendreal-timemapswebsocket

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignIntermediateโฑ 45 min

Design a multi-step checkout flow (Shopify / Stripe)

Step-based checkout with form validation, payment integration, and resilient state management.

frontendformsstate-machinepayments

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignSeniorโฑ 45 min

Design a social news feed (Meta)

Infinite-scroll feed with real-time post updates, likes, and virtualized rendering.

frontendvirtualizationreal-timeinfinite-scroll

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Frontend System DesignIntermediateโฑ 30 min

Design a notification center (Slack / Gmail)

In-app notification bell, real-time toast queue, badge counts, and persistent notification history.

frontendreal-timecomponentstate-management+1 more

Concepts (0/1 done)

0%
โ—‹Message QueuesNot started

Complete all concepts to unlock full AI rubric feedback.

Start 30 min session โ†’
Pro
Frontend System DesignSeniorโฑ 60 min

Design an offline-first PWA (Service Worker API)

Architecture for a PWA that works offline using Service Workers and caching strategies.

service-workerpwaofflinecache-api

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Frontend System DesignIntermediateโฑ 30 min

Design a photo grid with lazy loading (Instagram / Pinterest)

Masonry or fixed-grid image feed with virtualization, lazy loading, and a lightbox viewer.

frontendperformancevirtualizationlazy-loading+1 more

Concepts (0/2 done)

0%
โ—‹CachingNot startedโ—‹Load BalancingNot started

Complete all concepts to unlock full AI rubric feedback.

Start 30 min session โ†’
Pro
Frontend System DesignSeniorโฑ 45 min

Design a real-time analytics dashboard

Frontend architecture for a live SaaS metrics dashboard.

frontendreal-timeperformancewebsocket

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Frontend System DesignIntermediateโฑ 30 min

Design a search autocomplete UI (Google)

Accessible autocomplete with debouncing, result caching, and keyboard navigation.

frontendcomponentaccessibilityperformance+1 more

Concepts (0/1 done)

0%
โ—‹CachingNot started

Complete all concepts to unlock full AI rubric feedback.

Start 30 min session โ†’
Frontend System DesignIntermediateโฑ 30 min

Design a shopping cart UI (Amazon)

Persistent shopping cart with optimistic updates, offline support, and cross-tab sync.

frontendstate-managementofflineoptimistic-ui+1 more

Concepts (0/1 done)

0%
โ—‹Databases & StorageNot started

Complete all concepts to unlock full AI rubric feedback.

Start 30 min session โ†’
Pro
Frontend System DesignSeniorโฑ 45 min

Design a video player component (Netflix / YouTube)

Adaptive streaming video player with buffer states, quality selection, and accessibility.

frontendcomponentperformancestreaming

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignIntermediateโฑ 45 min

Design an in-browser audio player with visualizer (Web Audio API)

Audio playback pipeline with waveform visualization using the Web Audio API.

web-audio-apiaudio-contextanalyser-nodestreaming

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignSeniorโฑ 45 min

Design a browser spreadsheet with heavy computation (Web Workers)

Offload formula evaluation and large dataset processing to Web Workers.

web-workersperformancespreadsheetcomlink

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’
Pro
Frontend System DesignSeniorโฑ 60 min

Design a browser-based video call UI (WebRTC API)

Peer-to-peer video/audio calling UI using WebRTC, signaling server, and TURN.

webrtcpeer-connectionsignalingice

Upgrade to Pro to unlock this challenge โ€” includes diagrams, API design, tradeoffs, and expert solution.

Unlock with Pro โ†’