Roadmap/All Case Studies
System Design Guide
architecthigh Relevance12 min read

Design Flipkart/Myntra Mobile Catalog Frontend

Architecting a mobile-first e-commerce listing catalog with infinite scrolling lists, filter drawer overlays, and comparing panels.

Architecture Focus:
Mobile touch eventsVirtualized List ScrollComparison Tray Sync
Related Tracks:
Web Platform FoundationState Management & Server State

1. Problem Statement

Design a mobile-first product listing page optimizing vertical screen space, rendering dense filter drawer systems, and loading catalogs infinitely without crashing.

2. Business Context & User Friction

Mobile web traffic forms the majority of retail visits. Laggy layouts or slow infinite scrolls increase catalog exit rates.

3. Requirements Matrix

Functional Requirements

  • Render collapsible mobile filters and sort drawers.
  • Infinite scroll product grids with compare item checkbox overrides.
  • Display floating comparison cards tray.

Non-Functional Requirements

Performance

  • Time to Interactive (TTI) under 1.5s on mobile networks.
  • Zero scroll lag (60fps targets) on low-end mobile devices.

Scalability

  • Optimize DOM node weight by recycling list cards.
  • Aggregate multiple filter checks without rebuilding entire lists.

Accessibility (a11y)

  • Fully accessible mobile dialog overlays focus traps.
  • Large touch targets (>44x44px) for all filter checkboxes.

Security

  • Block parameter manipulation inside checkout queries.
  • Verify comparative item bounds.

Reliability & Failover

  • Maintain scroll position during network disconnect retries.
  • Fallback gracefully to base lists if comparison API failures occur.

Observability

  • Track page scroll frame dropouts.
  • Log mobile network connection speeds.

4. Core User Flows

Comparing products on mobile

  1. User lands on catalog and taps 'Compare' checkbox on card.
  2. Compare item pushes to bottom floating comparison tray.
  3. User taps 'Compare Now' button, routing to comparison page.

5. High-Level Design & Layers

The mobile app uses virtualized scrolling containers to render product cards. The compare states are kept in a local context store synchronized with session storage.

Frontend Layers

  • UI Layer: MobileNavbar, FilterDrawer, VirtualGridList, CompareTray.
  • State Layer: Zustand stores comparisons lists, local state handles drawer toggles.
  • Service Layer: API query client, analytics event triggers.

Major Components

  • CompareFloatingTray: Renders active compare items at the bottom of viewport.
  • VirtualizedGrid: Recycles mobile cards DOM blocks.

Data Flow Pipelines

  • 1. Checkbox tap triggers compare list store actions.
  • 2. Bottom tray mounts animating active selection lists.
  • 3. User swipes catalog rows dynamically.
  • 4. Scroll recycling updates card properties.

6. Component Architecture & State Boundaries

ComponentResponsibilityState OwnedDependencies
MobileListingViewportMaintains scroll offsets, triggers lazy loads, and renders drawers.Scroll position, compare arrayVirtualizedGrid, CompareFloatingTray

7. State Management

Local UI State

  • Drawer open toggle switches
  • Active swipe card indicators

Server Query Cache State

  • Dynamic catalog list data
  • Promotional listings info

Global/Shared State

  • Active compare list IDs
  • User geolocation selections

Real-Time & Sync State

  • No high-frequency real-time push state required.

8. API Contracts Design

GET/api/v1/mobile/listings?category=id&page=1
Get Mobile Listings

Purpose: Fetch mobile optimized catalog array.

Sample Response:
{
  "items": [
    {
      "id": "m1",
      "title": "Shirt",
      "image": "s.webp"
    }
  ]
}

9. Caching Strategy

Browser/HTTP Cache

  • Cache page templates using service workers.
  • Local storage for compare selection arrays.

Edge CDN Caching

  • Compress and cache WebP images at CDNs.
  • Cache catalog shell components.

Application Cache

  • React Query infinite page caching.

Invalidation Policies

  • Clear comparison list after order checkout steps.

10. System Strategies Checklist

Performance Strategy & Budgets

  • Use virtual lists to keep DOM weights low on mobile devices.
  • Preload low-resolution blur thumbnails.
  • Avoid complex JS calculations inside touch scroll listeners.

Inclusive Accessibility Design

  • Ensure all touch targets comply with 48px sizes constraints.
  • Add close buttons inside dialog drawer overlays.

Security Safeguards & Risks

  • Verify comparison items IDs are valid on checkout steps.
  • Sanitize filters queries configurations.

Telemetry & Production Observability

  • Log frames per second (FPS) drops during vertical scroll runs.
  • Track mobile conversion drops on slow networks.

Graceful Failure & Resilience

  • Retry scroll loading automatically on connection drops.
  • Show user manual refresh buttons in feed footer.

Deployment, Rollout & CDN topologies

  • PWA client deployment on edge gateways.
  • Dynamic data fetching using client libraries.

11. Architectural Decisions & Tradeoffs

Decision: Virtualized DOM scrolling vs native browser scrolling

Benefit:

Prevents browser memory crashes by keeping DOM small.

Drawback:

Breaks native browser keyword searches (Ctrl+F) across listings.

When To Use: When mobile listing lists scale to hundreds of catalog pages.

12. Interview Answer Framework

How to structure your defense of this architecture during a 45-minute technical system design session:

1. Opening Pitch

Start by explaining the constraints of low-power mobile devices. Focus on browser memory allocations and touch event response times.

2. Requirement Clarification Queries
  • Do we need support for compare cards sync across tabs?
  • Are filter drawers slide-out overlays?
3. Core High-Level Architecture Block

Detail a mobile shell container, virtual list renderer, and bottom compare panel context.

4. Strategic Deep Dive Areas
  • Explain touch gesture performance setups using CSS passive event listeners.
  • Detail DOM recycling mechanics.
5. Summary & Defensive Tradeoffs

Conclude by outlining mobile performance budgets (bundle sizes limits, image formats, and network retries).

13. Common Pitfalls & Extension Questions

Candidate Mistakes to Avoid

  • Not virtualizing lists, causing mobile browsers to crash after page 10.
  • Attaching heavy scroll handler calculations, triggering lag.

Interviewer Follow-ups / Extensions

  • How do you handle battery exhaustion warnings on mobile devices during heavy scrolling sessions?
  • How do you synchronize comparisons selection lists across multiple concurrent browser tabs?
Previous ArticleAmazon Search & Product Listing Page
All Case Studies
Next ArticleSwiggy/Zomato Food Ordering Frontend