This is the same problem as [[frontend-system-design-design-a-news-feed-facebook]] — the principles are identical. Here's a compact recap with one extra deep-dive on Facebook-specific features (reactions, share modal, comments tree).

The architecture (recap)

• Cursor pagination — offset breaks under inserts.
• Infinite scroll via IntersectionObserver sentinel.
• Virtualization for long feeds.
• Memoized post components so liking one doesn't re-render thousands.
• Optimistic likes/reactions/comments with idempotency keys.
• Lazy media with reserved aspect ratios.
• Real-time updates via WebSocket for new likes/comments; "Show N new posts" pill for new posts.
• SSR/SSG for the home page; client-side for subsequent navigation.
• Service worker for shell + offline.
• Per-feed cache keys in React Query so back-nav restores instantly.

Facebook-specific surfaces

Reactions (not just Like)

• Long-press / hover surfaces the reaction picker (👍 ❤️ 😆 😮 😢 😡).
• Each post stores per-reaction counts.
• Optimistic: bump the new reaction, decrement the old one if changing.

Comments tree

• Top-level + replies (one level deep typically).
• Expand "View N more comments" inline.
• Comments themselves are optimistic.
• Long threads — paginate within the post.

Share modal

• Share to: feed, story, message, copy link.
• Each option has its own flow; the modal coordinates.

Live posts

• Live video posts have a different player (HLS + live indicator + reactions floating up).
• Treat as a streaming media variant (see [[frontend-system-design-design-video-streaming-netflix]]).

Privacy controls

• Visibility (public, friends, custom) shown per post.
• "See first" friends ranked higher.
• Audience selectors when posting.

Notifications panel

• Separate surface; pulls from the same event firehose as the feed.

Performance focus

• LCP = first visible post's image (or hero).
• Memoize posts.
• Code-split: stories, marketplace, watch tabs separate from main feed.
• Pre-fetch profile pages on hover.

Accessibility

• Post as <article> with author + date in the accessible name.
• Alt text on images (Facebook auto-generates if missing; user can override).
• Reaction picker is a menu with arrow-key navigation.
• Comments form keyboard-friendly.

Interview framing

"Same playbook as a generic news feed: cursor-pagination, virtualization, memoized posts, optimistic interactions with idempotency, lazy media. What's Facebook-specific is the reactions (multi-emoji, optimistic bump+decrement on change), the comments tree (top-level + one level of replies, inline-expanding pagination), the share modal coordinating multiple destinations, and live video as a streaming variant. Performance focus is the same — LCP on hero, memoize posts, code-split feature tabs. The reusable patterns dominate; the Facebook-specific stuff layers on top."