30% offEnding soon
FSD-054Frontend system design Premium

Design a Personalized Content Reader

Design an offline-capable reader with a durable queue, semantic reading positions, cross-device sync, adaptable typography, and explainable recommendations.

Advanced 62 min read

A content reader is a journey with a bookmark, not a stack of pixels. The train may cross devices and lose the network, but the ticket still names the article revision and the place the reader meant to keep.

The interview is about more than cards and infinite scroll. It covers queue identity, atomic offline storage, semantic progress, cross-device conflicts, accessible typography, background behavior, recommendation provenance, privacy, and failure recovery.

Clarify the reading contract

Ask which content types are supported, whether publishers permit offline media, how many items readers save, how often devices reconnect, whether annotations exist, and which preferences sync. Quantify article and image weight, queue size, daily progress events, device count, conflict rate, cache budget, and recommendation candidate size.

Measure save success, offline-open success, incomplete pack cleanup, resume accuracy, manual repositioning, merge conflicts, sync lag, text reflow defects, cache eviction recovery, recommendation satisfaction, accessibility, battery use, and deletion correctness.

The public interview prompt

Design a personalized reading product for articles and long-form content. Readers can save items, build and reorder a queue, download selected content, resume across devices, adjust typography and themes, and receive useful recommendations.

Explain:

  • article, revision, queue item, offline pack, progress anchor, device, mutation, and recommendation identity;
  • local-first writes, IndexedDB and Cache Storage ownership, atomic downloads, quota, eviction, and cleanup;
  • semantic position capture, reflow, revision mapping, history, and cross-device conflict resolution;
  • typography, zoom, reflow, focus, landmarks, reduced motion, and accessible controls;
  • candidate generation, eligibility, ranking, deduplication, explanations, experiments, and privacy;
  • sync protocol, retries, backpressure, hidden tabs, observability, security, testing, and rollout.

What the premium solution covers

The complete solution uses an event-backed local queue, verified offline packs, and semantic progress anchors. A reading railway animation shows one article traveling through queue, offline, reading, and sync states. A composing stick, bookmark sextant, and recommendation compass give typography, position recovery, and discovery their own reader-specific visual forms. A deterministic lab turns queue shape and device activity into storage and sync pressure.

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

What is the core reading-position invariant?
Persist article revision and a semantic block anchor, plus a small intra-block progress value. Treat raw scroll pixels as a local hint because fonts, widths, ads, and media reflow.
How should an offline queue be stored?
Keep normalized queue and sync records in IndexedDB, immutable article and media responses in Cache Storage, and a verified manifest that commits a download only when required artifacts are present.
How should multiple devices merge reading progress?
Merge idempotent events by article revision and logical time. A meaningful later semantic anchor may advance progress, while explicit unread or restart actions require their own intent.
Should typography preferences change URLs?
Usually no. Font scale, measure, leading, and theme are reader preferences. Store them locally and optionally sync them, while ensuring content still reflows and browser zoom works.
How can recommendations remain trustworthy?
Filter by availability, duplication, safety, and download rights before ranking; expose a real reason such as Continue, Related, Saved topic, or Explore; and keep the main reading surface stable.
What happens when an article changes after download?
Retain the readable downloaded revision, label that an update exists, map the semantic anchor when possible, and replace the local pack atomically only after the new revision verifies.