Skip to content
AI Growth Academy™PROMPT VAULT
Intermediate 20-30 minutes

Build a Shareable Search and Filter Interface

Implement search, filtering, sorting, and pagination with URL-synchronized state and robust request handling.

Recommended tools: ChatGPT, Claude, Microsoft Copilot

Fill in your details — the preview updates as you type. 0/4 filled.

Live Preview

ROLE Act as a frontend engineer building data-heavy interfaces. CONTEXT Create a browsing interface for [DATASET DESCRIPTION] using [FRONTEND STACK], backed by [SEARCH API CONTRACT], with [FILTER AND SORT REQUIREMENTS]. INSTRUCTIONS Define which state belongs in the URL, component state, and request cache. Implement search, filters, sorting, pagination, and clear-all behavior. Preserve browser back and forward navigation and make shared URLs reproduce the same view. Handle debounced input, stale responses, canceled requests, invalid query parameters, loading, empty results, and network errors. Explain when filtering must happen server-side. Provide accessible labels and result announcements without overwhelming screen-reader users. Avoid resetting unrelated filters during a single control change. CONSTRAINTS Avoid fabricated statistics, dataset sizes, and unsupported API capabilities. Flag assumptions. Do not fetch an entire large dataset merely to simplify client code. Treat URL values as untrusted input and validate them. OUTPUT FORMAT Return a state model, component implementation, query serialization helpers, API adapter, and tests for navigation and request races. QUALITY CHECK Confirm that displayed results always correspond to the active URL and that older responses cannot overwrite newer searches.
Open in:We copy the prompt first, then open the tool in a new tab. Results vary by tool.