Design a product listing page with filters
PremiumFrontend systemMedium
- Faceted search
- URL state
- Request cancellation
Quick answer
This frontend system interview question asks you to design a product listing page with filters. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design the frontend of an e-commerce product listing page with filters, like a category page on Amazon or Flipkart. The hard part is updating the grid fast on every filter click, keeping the state in a shareable URL, never showing stale results, and staying crawlable.
The page shows a grid of products with a filter panel (brand, price range, size, colour, rating, in stock), a sort dropdown and pagination or load more. Filter counts update as the user narrows down. The URL reflects the current filters so a user can share or bookmark it, and search engines can index category pages.
What must a product listing page with filters do?
- Filters: Multi-select facets with counts, a price slider, and chips showing active filters with one-click removal and a clear-all.
- URL as state: Filters, sort and page are in the query string; back and forward restore previous results; reload gives the same page.
How well must it do it?
- First load: Server-rendered HTML with products visible under 2 s on 4G; Largest Contentful Paint under 2.5 s.
- Correctness: A slower earlier response must never overwrite a newer one.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Faceted search
- URL state
- Request cancellation
- Server side rendering
- SEO
- Stale while revalidate
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a product listing page with filters and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Medium. Entry-level engineers can practise it, but it expects you to reason about requirements and trade-offs, not only list components.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team