Filtering Pattern
URL-based filtering systems for API endpoints with type-safe Prisma query builders, multi-select and range filters, and reusable UI components.
What's Included#
- URL-based filter state management (shareable, bookmarkable)
- Type-safe Prisma query builder from URL search parameters
- Filter API route with category, price range, status, and sort options
- Filter sidebar UI component with radio buttons, range inputs, and sort select
- Active filters display with individual removal
- Multi-select tag filter component
- Server component page combining filters, results, and pagination
Usage#
Via CLI#
Loading code block...
Via AI Assistant#
Ask your AI assistant:
- "Use the filtering pattern from Bootspring"
- "Apply the Bootspring filtering pattern to my project"
Key Considerations#
- Store filter state in URL search params so filters are shareable and bookmarkable
- Reset pagination to page 1 whenever filter values change
- Show active filters clearly and provide a way to remove individual filters or clear all
- Validate and sanitize filter values before passing them to database queries
- Display result counts so users understand the effect of their filters
- Debounce text input filters to avoid excessive API calls
Related Patterns#
- Pagination - Paginate filtered results
- Route Handler - API endpoint implementation