Pinterest System
System design for Pinterest with masonry layout and media feed optimizations
Design a Pinterest-like system with masonry layout and optimized media feed.
R - Requirements
Key Questions:
- How many pins? (millions, billions)
- Masonry layout? (yes, variable heights)
- Pin types? (images, videos, articles)
- Collections/boards? (yes)
- Real-time updates? (new pins from followed users)
Common Answers:
- Billions of pins
- Masonry layout (Pinterest signature)
- Multiple pin types
- Collections/boards
- Real-time feed updates
A - Architecture
Masonry Layout Flow:
Pinterest Architecture:
Architecture Decisions:
- SSR/ISR for pin pages (SEO) - Pre-render individual pin pages
- Client-side for feed browsing - Fast scrolling, virtualized masonry
- Masonry layout algorithm (column-based or CSS Grid) - Column-based for control, CSS Grid for simplicity
- Image CDN for serving pins - Multiple sizes, formats, edge caching
Relevant Content:
- Pre-rendering - SSR/ISR
- Real-Time Architecture - Feed updates
D - Data Model
State Management:
- Pin metadata (normalized cache)
- Feed state (paginated, cursor-based)
- Board/collection state
- Masonry layout positions
Caching:
- Pin cache (CDN + client cache)
- Feed cache (SWR pattern)
- Layout cache (save calculated positions)
Relevant Content:
- Caching Patterns - Feed cache
- Data Fetching Strategies - Pagination
I - Interface
Talking Points:
- Masonry layout implementation - Column-based algorithm, CSS Grid, or library
- Media feed optimizations - Virtualization, lazy loading, progressive images
Features:
- Masonry grid (variable height pins)
- Pin cards (image, title, metadata)
- Infinite scroll
- Board/collection view
- Lightbox viewer
Relevant Content:
- Virtualized List - Feed virtualization
- Progressive Image Loading - Image optimization
- Layout Shift Prevention - CLS
O - Optimizations
Performance:
- Masonry layout optimization (calculate positions efficiently)
- Virtualized feed (only render visible pins)
- Image optimization (multiple sizes, formats, lazy load)
- Progressive loading (LQIP, blur-up)
Layout:
- Layout shift prevention (reserve space, aspect-ratio)
- Smooth scrolling (60fps)
- Position caching (save calculated positions)
Relevant Content:
- Asset Optimization - Image optimization
- List Animation Performance - Smooth scrolling
- Paint Optimization - Reduce paint
Implementation Checklist
- Masonry layout algorithm (column-based or CSS Grid)
- Virtualized feed (only render visible pins)
- Infinite scroll
- Image optimization (sizes, formats)
- Progressive loading (LQIP, blur-up)
- Layout shift prevention (dimensions, aspect-ratio)
- Position caching (save calculated positions)
- Smooth scrolling (60fps)
- Real-time feed updates
- Board/collection management
Common Pitfalls
❌ Rendering all pins → Performance issues, memory problems
✅ Virtualized feed, lazy loading, infinite scroll
❌ Recalculating layout on every render → Janky, slow
✅ Cache calculated positions, only recalculate on resize
❌ No image optimization → Slow load, poor UX
✅ Multiple sizes, WebP/AVIF, progressive loading
❌ Layout shifts → Poor CLS score
✅ Reserve space, aspect-ratio, skeleton screens