Where does the search/filter logic go?

In this problem it lives in a pure function (lib/filter-products.ts) separate from the screen. Since the page only calls it, you can verify the behavior from inputs and outputs alone.

How do I verify a search filter?

Check that only products whose name contains the query come back (partial match), that an empty query returns everything, and that a query matching nothing returns an empty result.

Does this problem need server-side search?

No. It operates on the client-side in-memory catalog (PRODUCTS). Server-side search, APIs, database queries, pagination, sorting, and autocomplete are out of scope.

Product Search Filter

Your task

Add a search box to the product list page that filters by name. When an operator types a query, show only the products whose name contains that text (partial match). If the query is empty, show all products. Complete filterProducts(products, query).

Ground rules

•Operate on the client-side in-memory catalog (PRODUCTS).
•Search only against the single product name field (name).

Not required

•Server-side search, APIs, database queries.
•Pagination, sorting, input debouncing, autocomplete.

▶About this challenge

Add a name-based search to a React product list page. When a query is typed, show only the products whose name contains that text (partial match); when the query is empty, show all products. The search/filter logic lives in a pure function in lib/filter-products.ts, and the page only calls it.

A search filter narrows a full list down to the items that match a query. This problem filters on a single field — the product name — by partial match, and shows everything when the query is empty. Keeping the filter logic in a pure function separate from the screen means the same input gives the same result, which makes it easy to test. What makes the behavior trustworthy is verifying not just matching cases but boundary cases too, such as an empty query and a query that matches nothing.

Where does the search/filter logic go?: In this problem it lives in a pure function (lib/filter-products.ts) separate from the screen. Since the page only calls it, you can verify the behavior from inputs and outputs alone.
How do I verify a search filter?: Check that only products whose name contains the query come back (partial match), that an empty query returns everything, and that a query matching nothing returns an empty result.
Does this problem need server-side search?