Advanced project · Week 7

Product Search Dashboard

Combine API data, debounced search, filters, sorting, pagination, modules, and tests.

The problem

This project is the closest thing to a real production feature in the whole course — the exact combination of concerns a junior developer ships in their first few months.

User stories

As a user, I want to search products as I type, without spamming requests, so results feel responsive but efficient.
As a user, I want to filter and sort results, so I can find what I need quickly.
As a user, I want paginated results, so large result sets stay fast and readable.

Planning checklist

Split the app into modules: api, state, filters, rendering
Decide the debounce delay and how it interacts with loading state
Define the sort and filter options and their data contracts

Suggested data structure

const dashboardState = {
  query: "",
  filters: { category: "all", minPrice: 0 },
  sort: "relevance",
  page: 1,
  results: [],
};

UI requirements

A debounced search input
Filter controls (category, price range) and a sort selector
Pagination controls and a results grid

Build milestones

Check off each milestone as you complete it — saved to this device.

…

Testing checklist

Filtering and sorting compose correctly together
Pagination shows the correct slice of results for each page
Debounce prevents a request from firing on every keystroke

Completion criteria

…

Progressive support

RequirementsPlanningStarterHintsReference Solution

Bonus features

Persist filters/sort in the URL query string
Add a 'no results, try broadening your filters' suggestion
Virtualize the results grid for very large datasets