Recipe: Dashboard catalog organizer
Build a searchable, filterable catalog of dashboards so users can discover and organize their views without hunting through URLs.
Overview
When a workspace accumulates dozens of dashboards, users need a single pane to browse, search, and favorite them. This recipe shows how to build a catalog grid with real-time text filtering, tag-based facets, and a star/unstar toggle persisted to local state.
Ingredients
- Dashboard list endpoint returning id, title, tags, owner
- Client-side search state via URL search params
- Tag facet bar derived from unique tags in the result set
- Favorite set stored in localStorage with a custom hook
- Responsive card grid with hover preview thumbnail
Step-by-step
1. Fetch and normalize
Call the dashboards index, flatten tags into a deduplicated set, and store results in a ref so filtering never re-fetches.
2. Search input + URL sync
Bind an input to a q search param. Debounce 200ms before updating the URL so the browser back button restores the previous query.
3. Tag facet pills
Render clickable pills for each unique tag. Active tags are stored as a comma-separated tags param. Clicking toggles inclusion.
4. Card grid with favorites
Map filtered results into cards showing title, owner avatar, and a star button. The star reads/writes a Set in localStorage via a custom useFavorites hook.
5. Empty and loading states
Show a skeleton grid while fetching, an illustration when zero results match the active filters, and a clear-filters button to reset.
Variations
- Replace localStorage favorites with a server-backed bookmark table
- Add sort controls: recently viewed, alphabetical, most starred
- Show a mini sparkline of daily views per dashboard card
Need the full source? This recipe is extracted from the examples directory. Copy the pattern and adapt the data layer to your own dashboard API.