Design an E-commerce Marketplace – Frontend System Design Interview Guide
Design an e-commerce marketplace experience for web/mobile web. Support homepage discovery, category browsing, search results, filters, sorting, product listing pages, product details, cart interactions, wishlist, and seller/product variations. The UI should remain fast and stable while handling large catalog sizes, frequent filter changes, and personalized content.
Backend as Black Box: Assume APIs exist for home feed modules, categories, search, filters, product details, reviews, cart, wishlist, and inventory/pricing updates. Focus on frontend architecture, state modeling, caching, rendering strategy, and UX tradeoffs.
Key Challenges
- Large product catalogs with efficient listing and filter interactions
- Stable filter/sort/query synchronization with route state
- Product card rendering at scale with image-heavy grids
- Handling inventory, pricing, and variant updates without stale UI
- Preserving browsing context across navigation between PLP and PDP
- Mobile-first performance on slow networks and low-end devices
RADIO Framework
Use the RADIO framework to structure your solution:
- Requirements: Clarify functional and non-functional requirements
- Architecture: High-level frontend architecture and data flow
- Data Model: Entities, cache shape, contracts, and consistency rules
- Interface: Component boundaries, hooks, and integration patterns
- Optimization: Performance, resilience, and scalability improvements
Note: Focus on high-level reasoning and tradeoffs first. Go into low-level implementation details only if the interviewer asks.
Interview Approach
Frontend system design interviews are collaborative. Strong answers usually:
- Separate discovery, search/listing, and product-detail concerns
- Keep route state and fetched catalog data clearly separated
- Explain filter/sort/pagination behavior explicitly
- Discuss stale inventory/price handling and cart consistency
- Cover mobile performance, skeleton states, and perceived speed
Important: Start with a 2-minute TL;DR, then expand using RADIO. Prioritize tradeoffs such as cursor vs page-number pagination, SSR vs CSR for listings, normalized vs denormalized cache, client-side vs server-side filtering, and cache freshness vs performance.
Full system design walkthrough
Get the complete interview-ready solution with requirements, architecture, data model, API contracts, tradeoffs, scaling notes, and evaluation signals.