Photo Sharing System
System design for photo sharing with browsing, editing, and uploading
Design a photo sharing system (Instagram, Flickr, Google Photos) with browsing, editing, and uploading.
R - Requirements
Key Questions:
- How many photos? (thousands, millions)
- Photo editing? (filters, crop, adjust)
- Upload size limits? (10MB, 50MB per photo)
- Albums/collections? (yes/no)
- Real-time updates? (new photos from followed users)
Common Answers:
- Millions of photos
- Basic editing (filters, crop)
- 10-50MB per photo
- Albums/collections
- Real-time feed updates
A - Architecture
Photo Upload Flow:
Photo Browsing Architecture:
Architecture Decisions:
- SSR/ISR for photo pages (SEO) - Pre-render individual photo pages
- Client-side for feed browsing - Fast scrolling, virtualized grid
- Image CDN for serving photos - Multiple sizes, formats, edge caching
- Real-time for feed updates (WebSocket/SSE) - New photos from followed users
Relevant Content:
- Pre-rendering - SSR/ISR
- Real-Time Architecture - Feed updates
D - Data Model
State Management:
- Photo metadata (normalized cache)
- Feed state (paginated, cursor-based)
- Upload queue (pending, uploading, completed)
- Edit state (filters, adjustments)
Caching:
- Photo cache (CDN + client cache)
- Feed cache (SWR pattern)
- Upload queue (IndexedDB for offline)
Relevant Content:
- File Upload Architecture - Upload design
- Caching Patterns - Feed cache
I - Interface
Talking Points:
- Photos browsing - Grid layout, infinite scroll, lightbox
- Photos editing - Filters, crop, adjust (client-side or server-side)
- Photos uploading - Progress, chunking, compression
Features:
- Photo grid (masonry or uniform)
- Lightbox viewer (fullscreen)
- Upload interface (drag & drop, progress)
- Edit interface (filters, crop tools)
- Feed (infinite scroll)
Relevant Content:
- File Upload Component - Upload patterns
- Virtualized List - Grid virtualization
- Progressive Image Loading - Image optimization
O - Optimizations
Performance:
- Image optimization (multiple sizes, formats, lazy load)
- Virtualized grid (for large photo collections)
- Progressive loading (LQIP, blur-up)
- CDN strategy (edge caching, multiple regions)
Upload:
- Chunked uploads (for large photos)
- Client-side compression (reduce file size)
- Concurrent uploads (limit 3-5 simultaneous)
Relevant Content:
- Asset Optimization - Image optimization
- File Chunking - Chunked uploads
- Image Compression - Client-side compression
- Layout Shift Prevention - CLS
Implementation Checklist
- Photo grid (masonry or uniform)
- Infinite scroll feed
- Lightbox viewer
- Upload interface (drag & drop, progress)
- Chunked uploads (large photos)
- Image compression (client-side)
- Photo editing (filters, crop)
- Image optimization (sizes, formats)
- Virtualized grid (large collections)
- Real-time feed updates
Common Pitfalls
❌ Loading all photos → Performance issues, memory problems
✅ Virtualized grid, lazy loading, infinite scroll
❌ No image optimization → Slow load, poor UX
✅ Multiple sizes, WebP/AVIF, progressive loading
❌ No upload progress → Users don't know status
✅ Show progress, chunked uploads, retry on failure
❌ Layout shifts → Poor CLS score
✅ Image dimensions, skeleton screens, aspect-ratio