Add search and filtering to a list page

By VibeCoderHQ|Published on 5/5/2026
PromptingNext.jsCursor

Makes any list of records actually usable once it grows past a screenful. Best in Cursor or Claude Code on your real list page. Two things set this apart from a naive version: syncing state to the URL so views are shareable and refresh-safe, and filtering in the database rather than loading every row into the browser.

Prompt Text

Add search and filtering to my [LIST PAGE, e.g. the products page] in my [FRAMEWORK] app. Right now it just shows [WHAT IT SHOWS].

Add:
1. A search box that matches on [WHICH FIELDS, e.g. name and description]. It should be case-insensitive and update the results as the user types, debounced so it does not fire on every keystroke.
2. Filters for [LIST YOUR FILTERS, e.g. category, status, price range]. Multiple filters combine (a result must match all of them).
3. A sort control for [OPTIONS, e.g. newest, price low to high, name A to Z].
4. Pagination or load-more if the list can get long.

Behavior:
- Reflect the current search, filters, and sort in the URL query string so the view is shareable and survives a refresh, and the back button works.
- Show a clear "no results" state with a way to clear filters.
- If the dataset is large, do the filtering and pagination on the server or in the database, not by loading everything into the browser.
- Keep the current design. Add controls in a clean toolbar above the list.

Tell me first whether you will filter client-side or server-side for my case and why, then build it.

Join the vibe coder community

Weekly prompts, tools, and success stories to help you build and monetize with AI.

Unsubscribe any time.

Reviews

No reviews yet. Be the first to review!

Leave a Review