Social Network Profile System
System design for user profiles with timeline, connections, and activity
Design a social network profile system (LinkedIn, Facebook profile) with user info, timeline, and connections.
R - Requirements
Key Questions:
- Profile sections? (about, experience, education, posts, connections)
- Timeline? (posts, activity, chronological)
- Privacy settings? (public, friends only, private)
- Connections/followers? (mutual connections, follow/unfollow)
- Activity feed? (posts, comments, likes, shares)
Common Answers:
- Multiple sections (about, experience, education, posts)
- Timeline with posts and activity
- Privacy controls (public, friends, private)
- Connections/followers system
- Activity feed (posts, comments, likes)
A - Architecture
Profile Data Flow:
Timeline & Activity Flow:
Architecture Decisions:
- SSR/ISR for profile pages (SEO important) - Pre-render for search engines
- Client-side for interactivity (posts, connections) - Fast interactions
- Real-time for activity updates (new posts, likes) - Live activity feed
- Privacy system (filter content based on relationship) - Frontend + backend validation
Relevant Content:
- Pre-rendering - SSR/ISR
- Real-Time Architecture - Activity updates
D - Data Model
Talking Points:
- Profile data structure - User info, sections, privacy settings
- Timeline/activity feed - Posts, comments, likes, chronological order
- Connections system - Friends, followers, mutual connections, privacy
State Management:
- Profile data (user info, sections)
- Timeline posts (paginated, cursor-based)
- Connections (friends, followers, mutual)
- Privacy settings (visibility per section)
- Activity feed (posts, comments, likes)
Caching:
- Profile cache (normalized, by user ID)
- Timeline cache (SWR pattern)
- Connections cache (friends list, mutual connections)
Relevant Content:
- News Feed System - Timeline patterns
- Caching Patterns - Profile cache
- Data Fetching Strategies - Pagination
I - Interface
Talking Points:
- Profile header - Cover photo, profile picture, name, bio, action buttons
- Profile sections - About, experience, education, skills, projects
- Timeline/activity feed - Posts, comments, likes, chronological
- Connections widget - Friends list, mutual connections, follow/unfollow
Features:
- Profile header (cover photo, profile pic, name, bio)
- Profile sections (about, experience, education)
- Timeline (posts, activity, infinite scroll)
- Connections widget (friends, followers, mutual)
- Privacy controls (edit visibility)
- Activity feed (posts, comments, likes)
Relevant Content:
- News Feed System - Timeline patterns
- File Upload Component - Profile picture upload
O - Optimizations
Performance:
- Image optimization (profile pictures, cover photos)
- Virtualized timeline (for long activity feeds)
- Lazy load sections (load on scroll)
- Prefetch connections (on hover)
Privacy:
- Privacy filtering (hide content based on relationship)
- Permission checks (frontend + backend)
Relevant Content:
- Progressive Image Loading - Profile images
- Virtualized List - Timeline
- Prefetching Strategies - Connections
Implementation Checklist
- Profile header (cover photo, profile pic, name, bio)
- Profile sections (about, experience, education)
- Timeline (posts, activity, infinite scroll)
- Connections widget (friends, followers, mutual)
- Privacy controls (edit visibility per section)
- Activity feed (posts, comments, likes)
- Image optimization (profile pictures, cover photos)
- Virtualized timeline (long feeds)
- Privacy filtering (hide content based on relationship)
- Real-time updates (new posts, likes)
Common Pitfalls
❌ No privacy filtering → Show private content to wrong users
✅ Filter content based on relationship, backend validation
❌ Loading all timeline → Performance issues
✅ Virtualize timeline, infinite scroll, pagination
❌ No image optimization → Slow load, poor UX
✅ Multiple sizes, WebP/AVIF, progressive loading
❌ No real-time updates → Stale data
✅ WebSocket/SSE for activity updates, optimistic UI