Cracking the Frontend System Design Interview: Designing an Instagram Feed

Contents

• Phase 1: The Scope (Clarify Requirements)
• Functional Requirements
• Non-Functional Requirements (The "Senior" Traits)
• Phase 2: The API Contract
• Pagination Strategy: Cursor vs. Offset
• Phase 3: High-Level Architecture
• Phase 4: Critical Technical Challenges (The Deep Dive)
• 1. Infinite Scroll & Virtualization
• 2. Eliminating Layout Shift (CLS)
• 3. Optimistic UI Updates
• Phase 5: State Management (Normalization)
• Phase 6: Trade-offs & Risks
• Final Summary