Storefront with Filters
Faceted search where every filter shows how many results it would leave.
IntermediateWeb appE-commerce12–24hAI-buildable 4/5no setupworth shipping
A product listing with faceted filtering done properly: counts next to each facet value, filters reflected in the URL, and options that would yield nothing shown as unavailable rather than silently absent. Computing those counts as filters combine is the real work.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- A product grid with sorting options
- Facet filters for category, price, brand and attributes
- Each facet value shows how many products it would leave
- Counts update as other filters are applied
- Active filters show as removable chips
- Filter state lives in the URL and survives a refresh
- Facet values yielding zero results are disabled, not hidden
The interesting part
- Facet counts must exclude their own facet from the filter to be correct
- Keeping counts fast as the product count grows
- Serialising complex filter state into a readable URL
Once it works
- Add a price range histogram slider
- Add search with typo tolerance
- Add infinite scroll with restoration
Suggested stack
reacttypescripttailwind