Curriculum section

Machine Coding

Typeahead, Drag-n-Drop, Virtualization, Analytics SDK — production-grade implementations.

18 topics18 detailed guidesInterview-focused explanations

Coverage18Topics in this track, each wired into the same detail-page system.

Depth18Topic guides with structured content sections and analytics-ready detail views.

FocusRealBuilt for actual interview study flow, not decorative curriculum cards.

Next stepPick oneOpen a topic, study deeply, and the analytics layer will start tracking evidence.

Topic library

Choose a topic to continue the section in the same premium learning flow used across the app.

Structured detail pages · mapped metadata

Typeahead / Autocomplete

Debouncing, abort controllers, keyboard navigation, and caching.

UIPerformanceNetwork

Explore pattern

Virtualized List

Rendering 10,000+ items smoothly using windowing and Intersection Observer.

DOMPerformanceScroll

Explore pattern

Nested Comments (Reddit)

Recursive rendering, n-ary trees, state management for infinite depth.

RecursionStateDOM

Explore pattern

Drag and Drop Flow

Kanban board logic. HTML5 Drag API vs Pointer Events polyfill.

EventsStateMouse

Explore pattern

Frontend Analytics SDK

Beacon API, request buffering, offline sync, no main-thread blocking.

PerformanceNetworkWeb APIs

Explore pattern

File Explorer Component

Tree data structures, lazy loading, state preservation on collapse.

TreeRecursionState

Explore pattern

Star Rating System

Hover states, fractional ratings, RTL support, full ARIA accessibility.

A11yCSSRTL

Explore pattern

Virtualized Infinite Scroll

IntersectionObserver, DOM recycling, memory leak prevention for 100k items.

PerformanceDOMIntersectionObserver

Explore pattern

Modal / Dialog Component

Focus trapping, scroll locking, portal rendering, ESC to close, backdrop click, and a11y (aria-modal).

A11yFocus TrapPortalEvents

GoogleMetaAtlassianStripe

Explore pattern

Image Carousel / Slider

Touch/swipe, infinite loop, autoplay, lazy loading images, indicator dots, keyboard nav.

TouchAnimationLazy LoadCSS

AmazonFlipkartAirbnbPinterest

Explore pattern

Multi-Step Form Wizard

Step validation, state persistence across steps, progress bar, conditional steps, draft save.

StateValidationUXForms

StripeRazorpayUberAirbnb

Explore pattern

Real-time Polling Dashboard

Long polling vs SSE vs WebSocket, auto-refresh, error retry, exponential backoff, stale data indicator.

PollingSSEWebSocketReal-time

UberCoinbaseBloombergDatadog

Explore pattern

Undo/Redo Text Editor

Command pattern, history stack, Ctrl+Z/Y, rich text operations, cursor position restore.

Command PatternStackStateEvents

Google DocsNotionFigmaAtlassian

Explore pattern

Toast Notification System

Auto-dismiss timer, stacking/queue, swipe to dismiss, different types (success/error/info), max visible.

QueueAnimationTimerA11y

VercelStripeSlackGitHub

Explore pattern

Spreadsheet (Mini Excel)

Cell rendering, formula evaluation, dependency graph, cell references (A1:B5), lazy recalc.

GridFormulaDAGPerformance

Google SheetsMicrosoftNotionCoda

Explore pattern

Implement Debounce & Throttle

Build from scratch. Leading/trailing edge, cancel, flush, and requestAnimationFrame throttle.

ClosuresTimerPerformanceCore JS

GoogleMetaAmazonUber

Explore pattern

Image Lazy Loading

IntersectionObserver, placeholder blur-up, progressive loading, srcset handling, error fallback.

IntersectionObserverPerformanceUX

PinterestInstagramAmazonFlipkart

Explore pattern

Accordion & Tab Component

Single/multi expand, keyboard nav (Arrow keys), ARIA roles, animated height transitions, URL sync.

A11yAnimationARIAState

AtlassianShopifyGitHubStripe

Explore pattern