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
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.