Design Pinterest (Masonry Feed, Infinite Scroll, Image Pipeline) — Frontend System Design Interview Guide
Design a production-grade Pinterest-like discovery experience: a masonry grid of pins, fed by an infinite-scroll personalized feed, with rich-image performance constraints, board organization, save/like interactions, search, and notifications. The product is image-heavy, scroll-heavy, and personalization-heavy — every design decision is dominated by perceived performance and recommendation quality.
Difficulty Note: Hard. The hard parts are: a stable masonry layout that does not jump under image load, an infinite scroll loop that keeps memory bounded, an image pipeline that delivers the right bytes at the right size, and an interaction model (save/like) that feels instant under personalized re-ranking.
Key Challenges:
- Masonry layout without cumulative layout shift (CLS)
- Infinite scroll with windowing/recycling on a non-uniform grid
- Responsive image delivery (srcset, AVIF/WebP, LQIP/blur-up)
- Optimistic save/like under server re-ranking
- Feed pagination with stable cursors despite ranking churn
- Board pages with mixed pin sizes and reorder UX
- Search + autocomplete under high keystroke volume
- Offline/poor-network resilience for the image stream
Real-World Complexity:
Pinterest at scale is a personalization product wearing image-grid clothing. The frontend has to keep the perceived-quality bar high while the backend reshuffles ranking on every interaction. Cumulative layout shift, scroll restoration, and image bandwidth dominate the user-visible experience.
Pinterest is a personalized image-discovery product. The frontend job is to deliver a fast, never-jumpy masonry grid driven by a paginated personalized feed, with an image pipeline that picks the right bytes for each viewport, and an interaction model (save/like/follow) that feels instant under server re-ranking. The fundamental insight: layout, image bytes, and pagination are the three dominant cost centers — not state management. Get those right and everything else is additive.
HLD interview focus: Requirements, architecture, tradeoffs, data flow, and scaling decisions. Low-level implementation snippets are collected in the final optional section and are only needed when explicitly asked.