News Feed System

Design a social media feed (Twitter, Facebook) with posts, interactions, and real-time updates.

R - Requirements

Key Questions:

• How many posts per page? (20, 50, infinite scroll)
• Real-time updates needed? (new posts, likes, comments)
• Post types? (text, image, video, link)
• Interactions? (like, comment, share, retweet)
• Scale? (1M, 10M, 100M+ users)

Common Answers:

• 20-50 posts initially, infinite scroll
• Real-time for new posts and interactions
• Multiple post types with rich media

Talking Points:

• Feed interactions - Like, comment, share, retweet with optimistic UI
• Feed pagination approaches - Cursor-based vs offset, infinite scroll
• Post composer - Rich text, media upload, mentions, hashtags

A - Architecture

Data Flow:

Interaction Flow:

Architecture Decisions:

• Rendering: SSR/ISR for SEO (initial load), CSR for interactivity
• Real-time: WebSocket for live updates (new posts, likes, comments)
• Infinite scroll vs pagination (infinite scroll for feeds, cursor-based)
• Microfrontends? (if multiple teams own different sections)

Relevant Content:

• Real-Time Architecture - WebSocket patterns
• Microfrontends - Multi-team scale

D - Data Model

Talking Points:

• Feed pagination approaches - Cursor-based (stable, works with real-time) vs offset-based (simple but inconsistent)
• Feed interactions - Optimistic updates for likes/comments, sync in background

State Management:

• Normalized cache (posts, users, comments by ID)
• Cursor-based pagination (stable, works with real-time)
• Optimistic updates (likes, comments show immediately)
• Real-time sync (WebSocket for new posts/interactions)

Caching:

• Stale-while-revalidate (show cached, update in background)
• Request deduplication (same post ID = same request)

Relevant Content:

• Data Fetching Strategies - Caching, pagination
• Optimistic Updates - Instant feedback
• Caching Patterns - SWR pattern

I - Interface

Talking Points:

• Post composer - Rich text editor, media upload, mentions (@user), hashtags (#tag), character limit

Features:

• Virtualized list (thousands of posts)
• Post cards (text, images, videos)
• Post composer (rich text, media, mentions, hashtags)
• Interaction buttons (like, comment, share)
• Real-time indicators (new posts badge)
• Skeleton loaders
• Pull-to-refresh (mobile)

Accessibility:

• Keyboard navigation
• Screen reader support
• Focus management on new posts

Relevant Content:

• Virtualized List - List component
• Accessibility Patterns - A11y requirements

O - Optimizations

Performance:

• Virtual scrolling (only render visible posts)
• Image optimization (LQIP, progressive loading, WebP/AVIF)
• Code splitting (lazy load post types, interactions)
• Request deduplication (same post = same request)

Real-Time:

• WebSocket connection pooling (reuse connections)
• Throttle updates (batch multiple updates)
• Connection resilience (reconnect on failure)

Visual:

• Layout shift prevention (image dimensions, skeleton screens)
• Smooth animations (like, comment interactions)

Relevant Content:

• Core Web Vitals - Performance metrics
• Progressive Image Loading - Image optimization
• WebSocket Management - Connection handling
• Code Splitting - Bundle optimization

Implementation Checklist

• Infinite scroll with cursor pagination
• Virtual scrolling for large feeds
• Real-time updates (WebSocket)
• Optimistic UI (likes, comments)
• Image optimization (LQIP, formats)
• Code splitting (post types)
• Request deduplication
• Connection resilience
• Layout shift prevention
• Accessibility (keyboard, screen readers)

Common Pitfalls

❌ Rendering all posts → Performance issues
✅ Virtual scrolling + infinite scroll

❌ No optimistic updates → Slow, unresponsive
✅ Show interactions immediately, sync in background

❌ No image optimization → Slow LCP, poor UX
✅ LQIP, WebP/AVIF, progressive loading

❌ Poor real-time → Stale data, missed updates
✅ WebSocket with connection resilience, throttling