02. Design a News Feed

Difficulty: Medium
Interview Focus: Pagination · Caching · Optimistic UI · Virtualization

Interview Question

Design a news feed that loads posts efficiently, supports likes/comments, and stays performant as the list grows.

Requirements

Functional

• Infinite scroll (or page-based) feed
• Like / unlike a post
• Show comments count and open comments
• Pull-to-refresh or manual refresh
• Handle loading, empty, and error states
• Preserve scroll position when returning to the feed

Non-Functional

• Smooth scrolling with large lists
• Minimize duplicate network work
• Consistent UI under concurrent updates
• Accessible
• Scalable to high feed volume

Solution

1. High-Level Architecture

Feed Screen
    ↓
Feed Store / Cache
    ↓
Pagination Controller
    ↓
Feed API
    ↓
Normalize + Merge
    ↓
Virtualized List

2. Component Design

NewsFeed
├── FeedList (virtualized)
│   └── FeedItem
│       ├── PostHeader
│       ├── PostBody
│       └── PostActions
├── FeedSkeleton
└── FeedError / Empty

Separate list virtualization from post rendering and action handlers.

3. Data Flow

Open Feed
    ↓
Load first page
    ↓
Render window of items
    ↓
User scrolls near end
    ↓
Load next cursor / page
    ↓
Append + dedupe
    ↓
Re-render visible window only

4. Pagination

Prefer cursor-based pagination over offset:

GET /feed?cursor=abc&limit=20
→ { items, nextCursor }

Offset pages shift when new posts arrive; cursors stay stable for append-only feeds.

5. Optimistic Likes

User taps Like
    ↓
Update UI immediately
    ↓
POST /posts/:id/like
    ├── success → keep UI, sync server counts
    └── failure → rollback + toast

Optimistic updates feel instant; always plan a rollback path.

6. Caching & Consistency

• Cache pages / cursors in a feed store
• Normalize posts by id so likes update one source of truth
• Dedupe when merging pages
• On refresh: replace or merge carefully to avoid flicker

7. Virtualization

Only mount rows in (and near) the viewport:

[ offscreen ]
[ visible window ]
[ offscreen ]

Use estimated row height + measured heights for mixed media posts.

8. Performance & Scale

Client: virtualization · request dedupe · image lazy-load · avoid full-list re-renders.

Backend path:

Browser
   ↓
CDN / Edge
   ↓
API Gateway
   ↓
Feed Service
   ↓
Timeline / Ranker + Post Store

Rank and cache timelines; serve media from CDN.

Key Decisions

Interview Q&A

Q1. Offset vs cursor pagination?
Offset breaks when new items insert at the top. Cursors are better for append-only / timeline feeds.

Q2. Why virtualize?
DOM cost grows with every row. Virtualization keeps DOM size near the viewport size.

Q3. How do you handle like races?
Optimistic local update keyed by post id; reconcile with server; rollback on failure; ignore stale responses with a version or request id.

Q4. What do you cache?
Normalized posts, page cursors, and maybe a short TTL on the first page for fast revisit.

Q5. How do you keep scroll position?
Store scroll offset or anchor item id when leaving; restore after cache hydrate.

Q6. How would you scale?
CDN for media, timeline caching, fan-out / fan-in trade-offs on the backend, and client-side virtualization + pagination.

Interviewer Checklist

Pagination · Virtualization · Optimistic UI · Cache consistency · Performance · Accessibility · Scalability · Trade-offs

← Autocomplete · Next: E-commerce →