UIREADY.dev
30% offEnding soon
FSD-044Frontend system design Premium

Design a Short-Video Feed

Design a short-video feed with one playback owner, adaptive streaming, bounded preload, stable gestures, captions, moderation, and honest telemetry.

Advanced 68 min read

A short-video feed is a receipt-bound sequence of clips controlled by one playback lease in the browser. Visibility proposes a candidate, but only the current generation-checked lease may attach scarce media resources, emit sound, advance watch time, or commit playback state after a first frame is ready.

The screen looks simple because one clip fills most of it. Underneath, several timelines compete. Ranked inventory may change while the user swipes. A manifest may offer many resolutions and bitrates. Network segments arrive out of order. The browser may reject autoplay, evict buffered media, suspend a background tab, or struggle to decode a high-quality rendition. Likes and follows should not remount the player. Captions and moderation state can change without changing the clip identity.

Treating every card as an independent autoplay component creates races. Two observers can decide that their item is visible. An old play() promise can settle after the user has moved on. Several nearby clips can download and decode at once. Audio can escape from a recycled element. Watch telemetry can count time that never reached the screen.

The design becomes tractable when the feed owns order, the media manifest owns immutable playback choices, and one browser coordinator owns the playback lease and resource ledgers.

Clarify the video product

Ask what "short" means, whether clips loop, whether the first session begins muted, and how sound preference persists. Define captions, transcripts, audio description, playback speed, scrubbing, sharing, comments, live inventory, advertisements, age gates, sensitive-content reveals, picture-in-picture, casting, and offline behavior.

Clarify navigation. Is a vertical swipe the only movement, or must Page Up, Page Down, arrow keys, buttons, and assistive technology reach every clip? Does a route identify the clip, the feed placement, or both? Must returning from a detail page restore the exact playback time and mute state?

Set product budgets before picking APIs: time to poster, time to first frame, startup stalls, rebuffer ratio, bytes fetched but never viewed, active decoders, decoded surfaces, battery impact, mounted feed items, and restoration error. "Instant video" does not explain which work should win when the connection or device cannot satisfy every candidate.

The public interview prompt

Design a browser-based, full-screen short-video feed. It supports ranked clips, vertical navigation, adaptive streaming, captions, mute and sound controls, reactions, follows, comments, saves, sharing, moderation labels, optimistic actions, continuous loading, and returning to an earlier clip.

Explain:

  • placement, clip, manifest, rendition, playback-session, lease, and operation identity;
  • receipt-bound pagination, refresh, deduplication, and scroll restoration;
  • eligibility, playback ownership, autoplay rejection, first-frame confirmation, and handoff;
  • adaptive rendition selection, segment buffering, preloading, decoder limits, and eviction;
  • gesture arbitration, keyboard navigation, focus, captions, transcripts, and reduced motion;
  • background tabs, interruptions, network changes, policy removals, and degraded modes;
  • authorized delivery, signed media, cache partitioning, analytics correctness, and privacy;
  • testing, observability, performance budgets, rollout, and an evolution path.

What the premium solution covers

The full solution builds the feed around a generation-checked playback lease. It separates ranked inventory from media readiness, follows one clip from poster to first frame and safe handoff, and defines explicit ledgers for segments, decoders, audio, and watch evidence. It also covers adaptive quality, gesture ownership, accessibility, moderation, restoration, failures, and measurement. The teaching media uses a vertical player viewport, a cumulative filmstrip ruler, a decoder-seat map, a touch-trajectory field, and a deterministic six-input playback-pressure lab.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

  • Detailed, beginner-friendly explanation
  • Production failure modes and trade-offs
  • Mobile-friendly architecture diagrams
  • Senior and staff-level interview signals
Unlock Premium

Frequently asked questions

Is a short-video feed just an infinite list of video elements?
No. The feed needs stable ranked inventory plus a playback coordinator that grants one item the right to attach media, decode frames, emit sound, report watch time, and prewarm bounded neighbors.
Should every visible video element autoplay?
No. Visibility makes an item eligible, but one explicit playback lease decides the owner. The browser must handle play() rejection and should never infer successful playback from intent alone.
How many videos should the browser preload?
Preload metadata and posters broadly, but admit segments through one byte, time, decoder, and connection budget. Usually the active item receives the full startup buffer while one likely neighbor receives limited preparation.
How should adaptive quality work in the feed?
The manifest offers aligned renditions. The player chooses a conservative startup rendition from measured throughput, viewport size, decoder capability, and recent stalls, then switches only at safe segment boundaries.
What happens when the user swipes before a video is ready?
The old playback lease is revoked immediately, its sound is silenced, and the new candidate shows a poster or explicit loading state. A late event from the old generation cannot reclaim the screen or emit analytics.
What accessibility support does a short-video feed require?
Every operation must have a keyboard and button path, captions and transcripts must be available when speech matters, controls need accessible names and visible focus, and reduced-motion or autoplay preferences must be respected.