Problem
Design the frontend for a News Feed that shows a personalized, infinitely scrolling list of posts (text, images, video), with likes, comments, and shares.
Discussion areas
- Requirements: infinite scroll, create post, like/comment/share, real-time updates, optimistic UI.
- Data model:
Post { id, author, content, media, counts, viewerState }; normalized store keyed by id. - Feed loading: cursor-based pagination (not offset) to avoid duplicates/skips as the feed changes.
- Rendering: list virtualization/windowing for performance; lazy-load images/video;
IntersectionObserverfor visibility + autoplay. - Real-time: WebSocket/SSE or polling for new posts; "new posts" pill instead of disruptive insertion.
- Optimistic updates: like/comment update UI immediately, reconcile/rollback on failure.
- Caching/offline: normalized cache, stale-while-revalidate, service worker.
- Performance: code splitting, image CDN + responsive
srcset, prefetch next page, Web Vitals. - Accessibility & resilience: keyboard nav, error/empty/loading states, retry.