CodePark/ questions / Classic designs
START PRACTICINGPRACTICE
Frontend question · Frontend system design › Classic designs

Design an e-commerce product listing page with filters, sorting and pagination.

GET /products?category=shoes&brand=nike,adidas&size=42
            &sort=price_asc&cursor=xyz&limit=24
{ "items": [...], "facets": { "brand": [{ "value": "nike", "count": 120 }] },
  "total": 842, "nextCursor": "abc" }

Keep all filter, sort and page state in the URL, return facets with counts in one response, and server-render the first page for SEO.

Requirements:

  • Browse a category.
  • Filter by facets, such as brand, size and price. A facet is one filter dimension.
  • Sort and paginate.
  • See the number of products for each facet value.

Non-functional: SEO for category pages, fast on mobile, and filter state that can be shared.

Architecture: ListingPage holds these parts:

  • FilterPanel, which is a drawer on mobile
  • SortSelect
  • ResultsGrid of ProductCards
  • Pagination, or a "load more" button

All filter, sort and page state lives in the URL. The URL is the single source of truth. The UI reads from it and writes to it, and the query key comes from it.

API: one endpoint returns the items, the facets with counts, and the total. Facet counts must reflect the other active filters.

Optimisations:

  • Server-render the first page for SEO. Use canonical URLs (the one official URL search engines should index) for the filter combinations worth indexing.
  • On filter change, keep the previous results visible with a subtle loading state, not a blank grid.
  • Cancel outdated requests.
  • Debounce price sliders, so a request goes out only after the user stops moving them.
  • Prefetch the next page.
  • Size images for the grid.

Accessibility:

  • Filters are real form controls inside fieldsets.
  • A live region announces when the result count changes.
  • Focus moves sensibly when the mobile drawer opens and closes.

Trade-offs: numbered pages are better for SEO and for returning to a position. Infinite scroll suits browsing.

  • The URL is the source of truth for filters, sort and page.
  • Return facets with counts in the same response as the items.
  • Server-render for SEO, with canonical URLs.
  • Keep previous results visible while loading, and cancel stale requests.
  • Make filters accessible, and announce result count changes.