30% offEnding soon
FSD-042Frontend system design Premium

Design a Microblog Timeline

Design a following timeline with stable post identity, cursor snapshots, threads, reposts, optimistic publishing, moderation, and accessible infinite reading.

Advanced 63 min read

A microblog timeline is a receipt-bound sequence of stable post placements, not an array of rendered cards. The browser must preserve post, conversation, viewer-action, policy, and reading identity while pages, counters, labels, and live inventory change independently.

A short post looks simple until it becomes part of a timeline. The same record may appear because its author was followed, because another account reposted it, because it belongs to a thread, or because an algorithm recommended it. A reply needs conversation context. A quote post contains new speech and a reference to older speech. An edit, deletion, block, moderation label, or changed handle may alter what the viewer is allowed to see without changing every other timeline entry.

The frontend therefore needs several small, explicit contracts. The server owns eligible inventory and authoritative order. Content records have stable IDs and revisions. Placements explain why a record appears. Viewer actions reconcile through operation IDs. The browser owns the current reading anchor, local draft state, focus, and bounded media work.

Clarify the timeline contract

Ask whether the product offers a following timeline, a ranked home timeline, custom feeds, lists, or all of them. Define whether replies are included, collapsed, or shown only when accounts in the conversation are followed. Clarify repost, quote, pin, edit, delete, block, mute, sensitive-content, and regional-policy behavior.

Determine the consistency promise. Does refresh produce a new snapshot? Can the user return from a detail route to the exact post and offset? Are handles mutable while account IDs remain stable? Can a post be edited, and does its public record ID remain constant? Define live arrival, offline draft, optimistic publish, media upload, and accessibility expectations before drawing components.

The useful promise is narrow: accepted pages belong to one timeline receipt, visible cards keep stable identity, and newer inventory never steals the reader's position.

The public interview prompt

Design a browser-based microblog timeline. It supports following and ranked feeds, text and media posts, replies, reposts, quote posts, reactions, bookmarks, deletes, moderation labels, live arrivals, and continuous loading. Users can compose while offline or on an unreliable network.

Explain:

  • stable account, record, placement, session, and operation identity;
  • timeline snapshots, opaque cursors, deduplication, and refresh;
  • reply roots, parents, reposts, quotes, and deleted records;
  • normalized projections and revision-aware hydration;
  • optimistic publishing, reactions, retries, and draft recovery;
  • live inventory, counter events, moderation changes, and scroll anchoring;
  • media upload, rendering, prefetch, and playback budgets;
  • accessible feed semantics, focus, routing, and restoration;
  • caching, security, telemetry, testing, and rollout.

What the premium solution covers

The full solution builds the timeline from identity and receipts upward. It models conversations without recursive card state, separates a repost action from quoted speech, and traces a first page through skeleton selection, hydration, policy labeling, merge, and presentation. It includes a frame-checked animation, three high-resolution decision diagrams, and a deterministic six-input timeline-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 microblog timeline just a chronological array of posts?
No. Even a chronological timeline needs a snapshot receipt, stable record identity, opaque cursors, policy projection, deduplication, and a reading anchor. A ranked timeline adds algorithm and experiment identity.
Should replies, reposts, and quote posts share one ID?
No. A post record has its own identity. A repost is an actor action that points to a post, a quote is a new post that embeds another record, and a reply carries root and parent references. Their timeline placements also need separate entry IDs.
How should newly published posts appear?
Create a client operation and temporary record, render a clearly pending card, then map it to the canonical server URI and revision. Rejection keeps the draft and explains the failure instead of silently removing the user's text.
Should live posts be inserted immediately above the reader?
Usually not. Buffer inventory behind a new-posts notice and preserve the current post and viewport offset. Counter or moderation updates can reconcile in place when their revisions are compatible.
How are deleted or moderated posts represented?
Use explicit tombstone or policy states long enough to preserve thread shape, focus, and navigation. Forbidden text and media must not be sent to the browser, while an authorized reason-specific placeholder may remain.
Which accessibility model fits the timeline?
Use a labeled feed containing article elements only if the complete WAI-ARIA feed contract is implemented. Keep focused articles mounted, expose useful position information, manage aria-busy correctly, and provide a visible load-more fallback.