Design e-commerce product listing page | Frontend System Design

HardPremiumSystem Design

Asked at Amazon · Shopify · Walmart

Frontend System Design interview practice: Frontend system design for PLP with filters, sort, skeleton loading, and SEO.

Problem

Design the frontend for a Product Listing Page (PLP) — category browse with filters, sort, pagination/infinite scroll, and quick-add to cart.

Requirements: 1000+ SKUs per category, faceted filters (price, brand, rating), sort (price, relevance, newest), grid/list toggle, URL-synced state (shareable links), SEO for crawlers.
URL as state: encode filters/sort/page in query params (?brand=nike&price=50-100&sort=price_asc) — enables back/forward and deep links.
Data fetching: SSR first page for SEO + LCP; client fetch on filter change; consider parallel count + results endpoints.
Filter UX: show applied filter chips; disabled facets when zero results (requires facet counts from API).
Rendering: skeleton cards during load; image lazy load + srcset; reserve card height for CLS.
Infinite scroll vs pagination: infinite for mobile engagement; pagination for SEO/desktop — hybrid with "Load more" button.
Cart integration: optimistic quick-add toast; mini-cart badge update via global store.
Performance: virtualize long lists; prefetch product detail on card hover; service worker cache for PLP shell.

Premium question

Unlock the full model solution for this question with Mentoxis Premium.