Design a Performant Frontend News Feed
Company: Rippling
Role: Frontend Engineer
Category: System Design
Difficulty: medium
Interview Round: Onsite
# Design a Performant Frontend News Feed
Design a React news feed with rich text, mentions and hashtag hover cards, pagination, offline behavior, virtualization, and clear application/feed/feed-item component boundaries.
### Constraints & Assumptions
- Feed items have stable IDs and may update.
- Long feeds must not render every item.
### Clarifying Questions to Ask
- Cursor or offset pagination?
- What offline actions are supported?
### What a Strong Answer Covers
- Normalized data, cursors, safe rich text, hover data, caching, virtualization, and render control.
### Follow-up Questions
- How is scroll position restored?
- How are optimistic actions reconciled?
Quick Answer: Design a React news feed with rich text, mentions and hashtag hover cards, pagination, offline behavior, virtualization, and clear application/feed/feed-item component boundaries. Connect requirements and APIs to data modeling, consistency, scaling, failure recovery, observability, and the important design trade-offs.