System Design Guide
architectcritical Relevance13 min read
Design LinkedIn Feed Frontend
Architecting a professional feed rendering heterogeneous card layouts (text, articles, videos, interactive polls) with reaction picker widgets.
Architecture Focus:
Heterogeneous cards factoryReaction picker portalScroll preservation
1. Problem Statement
Design a professional social feed that renders diverse post layouts (text, polls, ads, video attachments), manages reaction menus, and tracks viewable impressions.
2. Business Context & User Friction
LinkedIn feeds drive ad revenues. Slow renders or lost scroll states directly lower click-through conversion rates.
3. Requirements Matrix
Functional Requirements
- Render heterogeneous post layouts (polls, ads, document previews).
- Dynamic reaction picker portal showing emotional state cards.
- Real-time updates inside user messaging side widgets.
Non-Functional Requirements
Performance
- Dynamic post card renders under 50ms.
- Maintain layout scroll positions on feed updates.
- Optimized bundle sizes.
Scalability
- Scale feeds rendering to hundreds of mixed-cards components.
- Aggregate multiple post reactions counts.
Accessibility (a11y)
- Screen reader alerts for poll submission mutations.
- Accessible keyboard navigations inside reaction picker overlays.
Security
- Sanitize markdown text imports.
- Block unauthorized iframe executions inside ads slots.
Reliability & Failover
- Show clean card fallbacks if ad APIs fail.
- Optimistic UI updates on post reactions.
Observability
- Track card rendering execution times.
- Log ad impression metrics.
4. Core User Flows
Voting on a poll post
- User scrolls down feed, finding a PollCard.
- User clicks poll option checkbox.
- App updates poll state optimistically and submits vote to API.
- PollCard redraws displaying updated percentages bars.
5. High-Level Design & Layers
The feed maps post objects to dynamic card components using a factory pattern, managing shared actions via event portals and tracking ads impressions.
Frontend Layers
- UI Layer: FeedList, PostCardFactory (PollCard, AdCard, TextCard), ReactionMenu.
- State Layer: Zustand normalized posts cache, messaging context.
- Service Layer: Ads tracker, analytics adapter.
Major Components
- PostCardFactory: Loads and mounts matching card UI layouts dynamically based on post type specs.
- ReactionPortal: Mounts reaction lists next to trigger elements, handling overlays focus.
Data Flow Pipelines
- 1. Feed fetches mixed post objects list.
- 2. PostCardFactory maps models to layouts.
- 3. User actions trigger optimistic states.
- 4. Tracker monitors visible coordinates.
6. Component Architecture & State Boundaries
| Component | Responsibility | State Owned | Dependencies |
|---|---|---|---|
| FeedContainer | Coordinates paginated loads, dynamic card factories, and reaction overlays. | Active posts list, selection arrays | PostCardFactory, ReactionPortal |
7. State Management
Local UI State
- Active picker popover state
- Collapsible text state
Server Query Cache State
- Dynamic posts feed catalog
- Active conversations history
Global/Shared State
- User connection status info
Real-Time & Sync State
- No high-frequency real-time push state required.
8. API Contracts Design
GET/api/v1/posts?page=1
Get Mixed PostsPurpose: Download paginated mixed posts catalog.
Sample Response:
{
"posts": [
{
"id": "p1",
"type": "poll",
"pollData": {}
}
]
}9. Caching Strategy
Browser/HTTP Cache
- Local storage for search history logs.
Edge CDN Caching
- Edge cache static dashboard templates.
Application Cache
- Cache card coordinates lists to preserve scroll offsets.
Invalidation Policies
- Invalidate posts cache on user refresh clicks.
10. System Strategies Checklist
Performance Strategy & Budgets
- Code split heavy card layouts (polls, document viewers).
- Recycle elements inside infinite scroll container.
- Debounce analytics impressions tracking loops.
Inclusive Accessibility Design
- Announce poll results changes using aria-live.
- Trap keyboard focus inside reaction picker popovers.
Security Safeguards & Risks
- Sandbox third-party ad iframe containers.
- Verify authorization tokens.
Telemetry & Production Observability
- Log rendering lag on mixed post items.
- Track ads tracking API drops.
Graceful Failure & Resilience
- Render default text cards if poll details fail to load.
- Show offline warnings.
Deployment, Rollout & CDN topologies
- SSR shells with dynamic CSR modules hydration.
11. Architectural Decisions & Tradeoffs
Decision: Dynamic card factory mounts vs unified card templates
Benefit:
Keeps bundles lean by code splitting rare card types.
Drawback:
Increases runtime client-side component checking checks.
When To Use: When rendering complex feeds with diverse layout types.
12. Interview Answer Framework
How to structure your defense of this architecture during a 45-minute technical system design session:
1. Opening Pitch
Explain that feeds with mixed cards require flexible component factory models. Describe how to separate UI from data schemas.
2. Requirement Clarification Queries
- Should we support ad trackers impressions logging?
- Are reaction menu items customizable?
3. Core High-Level Architecture Block
Propose a FeedContainer linking PostCardFactory, ReactionPortal, and AnalyticsTracker.
4. Strategic Deep Dive Areas
- Detail the PostCardFactory code splitting model.
- Explain scroll position preservation during dynamic content loads.
5. Summary & Defensive Tradeoffs
Conclude with performance evaluations (treeshaking, analytics throttling).
13. Common Pitfalls & Extension Questions
Candidate Mistakes to Avoid
- Importing all cards components layouts in a single bundle, bloating initial load sizes.
- Re-rendering entire feeds when a single card reaction count increments.
Interviewer Follow-ups / Extensions
- How would you track ad visibility using IntersectionObserver?
- How do you handle composer text inputs formatting in real-time?