30% offEnding soon
FSD-043Frontend system design Premium

Design a Photo-Sharing Feed

Design an image-first social feed with responsive media, resumable uploads, stable layout, bounded prefetch, moderation, and accessible continuous reading.

Advanced 65 min read

A photo-sharing feed is a receipt-bound sequence of stable post placements whose media geometry, authorized variants, and interaction state can progress independently without moving the reader or downloading an unbounded wall of pixels.

A picture may be the largest object on the screen, yet the pixels are only one part of the system. The feed has to decide which posts belong to the current session, reserve each frame before bytes arrive, choose an image variant for the actual rendered slot, and release decoded surfaces after they leave the useful window. A carousel adds a second navigation model inside every article. Captions, alt text, reactions, comments, moderation labels, and upload state can all change without changing the post's identity.

Publishing introduces a separate lifecycle. A local draft can contain edits, crop instructions, alt text, locations, tags, and several large files. Those files may need multipart transfer and background retry. The feed should show a truthful pending state without claiming that a temporary preview is already a durable, shareable post.

The design works best when it separates four kinds of truth: the feed receipt owns order, the post projection owns authorized metadata, the media manifest owns immutable variants, and the browser owns transient presentation such as the current carousel slide and reading anchor.

Clarify the photo product

Ask whether posts contain one photo, a carousel, short clips, mixed media, or collaborative collections. Define maximum item count, source dimensions, accepted formats, editing operations, alt-text requirements, privacy, audience changes, sensitive-media reveal rules, and whether a post can replace media after publication.

Clarify the feed itself. Is it chronological, ranked, or a mixture? Can new posts arrive live? Must returning from a detail route restore the exact card and slide? Does the product need offline drafts, background upload, cross-device draft recovery, or sharing before processing finishes?

Set measurable budgets for first useful content, bytes fetched ahead, decoded image memory, mounted articles, upload concurrency, and placeholder stability. “Load quickly” is too vague to guide prefetch or failure behavior.

The public interview prompt

Design a browser-based photo-sharing feed. It supports ranked and following feeds, single-photo posts, carousels, captions, reactions, comments, saves, follows, moderation labels, optimistic actions, and continuous loading. Creators can edit and publish several large photos over an unreliable connection.

Explain:

  • post, placement, media-asset, variant, upload, and operation identity;
  • receipt-bound cursor pagination, deduplication, refresh, and scroll restoration;
  • responsive image manifests, aspect-ratio reservation, placeholders, and decoding;
  • viewport-aware loading, prefetch, memory eviction, and degraded modes;
  • carousel navigation, routing, focus, and accessible descriptions;
  • draft persistence, multipart upload, checksums, processing, and publish reconciliation;
  • moderation, private media, signed delivery, cache partitioning, and security;
  • telemetry, testing, performance budgets, and reversible rollout.

What the premium solution covers

The full solution builds an image-first feed around explicit receipts and resource ledgers. It follows one post from metadata through preview, responsive variant selection, decode, and presentation; separates media upload completion from post publication; and explains how carousels, moderation, accessibility, restoration, and optimistic actions compose. It includes a frame-checked animation, three high-resolution decision diagrams, and a deterministic six-input media-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 photo-sharing feed mainly an image optimization problem?
Image delivery is central, but the feed also needs stable post identity, receipt-bound pagination, policy projection, upload reconciliation, scroll anchoring, accessible descriptions, and explicit resource budgets.
Should the browser request the original photo and resize it with CSS?
No. The media service should produce immutable, revisioned variants. The browser declares the rendered slot with sizes and lets srcset or picture select an appropriate candidate.
How do we prevent photos from shifting the feed while they load?
Return trusted width and height metadata with the post projection, reserve the exact aspect ratio before fetching pixels, and keep that geometry stable across placeholder, preview, and final variants.
How should large photo uploads survive a weak connection?
Persist a draft and upload receipt, split large assets into checksum-verified parts, retry parts independently, complete the upload once, then publish a post that references finalized media assets.
How much media should the feed prefetch?
Use a byte and decode budget tied to distance, visibility, connection evidence, and user intent. Fetch metadata first, preview nearby content, and avoid decoding a long hidden tail.
Which accessibility model fits an infinite photo feed?
Use a labeled feed of articles only when the complete WAI-ARIA feed contract is implemented. Every meaningful image needs an appropriate text alternative, focused articles must remain mounted, and a visible load-more path should remain available.