System Design Interview: Frontend Architecture Patterns | DevPrep

System Design Interview: Frontend Architecture Patterns | DevPrep

Functional:
- Infinite scroll feed
- Posts with text, images, videos
- Like, comment, share
- Real-time updates

Non-functional:
- Fast initial load (< 2s LCP)
- Smooth scrolling (60fps)
- Offline support
- Accessible

┌─────────────────────────────────────┐
│           App Shell                  │
│  ┌──────────┐  ┌──────────────────┐ │
│  │ Feed List │  │ Detail View      │ │
│  │ ┌──────┐  │  │ ┌──────────────┐│ │
│  │ │Post 1│  │  │ │ Comments     ││ │
│  │ │Post 2│  │  │ │ Related      ││ │
│  │ │Post 3│  │  │ └──────────────┘│ │
│  │ │...   │  │  └──────────────────┘ │
│  │ └──────┘  │                       │
│  └──────────┘                        │
└─────────────────────────────────────┘

// Feed Store
interface FeedState {
  posts: Post[];
  cursor: string | null;
  hasMore: boolean;
  loading: boolean;
}

// API Design
GET /api/feed?cursor=abc&limit=20
// Returns: { posts: Post[], nextCursor: string }

// Caching: TanStack Query with infinite query
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
  queryKey: ["feed"],
  queryFn: ({ pageParam }) => fetchFeed(pageParam),
  getNextPageParam: (lastPage) => lastPage.nextCursor,
});

// WebSocket for live updates
// Server-Sent Events for new post notifications
// Polling as fallback (every 30s)

// Strategy: Optimistic UI
// 1. Update local state immediately
// 2. Send to server
// 3. Reconcile on response