Product Dashboard
Problem statement
A Product Dashboard is a data management interface combining search, multi-column sorting, category filtering, and pagination — all working together on a single dataset. This question tests whether you can keep multiple UI controls in sync without duplicating state, derive all display data from a single source of truth using useMemo, and reset pagination correctly when filters change.
Your task is to build a product table that displays data with the ability to search by product name, filter by category, sort any column in ascending or descending order by clicking the column header, and paginate through results. The core challenge is that search, sort, and filter all interact — changing any one of them should reset to page 1, and all three should compose correctly (filter first, then search, then sort, then paginate).
Requirements & constraints
- Display a table of products with columns: Name, Category, Price, Stock
- Text search filters products by name (case-insensitive)
- Category dropdown filters to a single category or 'All'
- Clicking a column header sorts by that column; clicking again reverses direction
- Sort direction indicated by an arrow (↑ ascending, ↓ descending)
- Pagination shows a fixed number of items per page with Prev/Next controls
- Changing search, filter, or sort resets to page 1 automatically
How to approach Product Dashboard
The strategy an interviewer expects you to reach for.
Problem Understanding The key architectural insight: all processed data is derived, never stored. You have four pieces of state (search, category, sortConfig, page) and one large dataset. Every display value — filtered rows, sorted rows, current page rows, total pages — is computed from those four values. No useEffect that updates a filteredData state variable. Just useMemo.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.