Product Catalog Demo
Browse products by category, sort and filter results, view details in modals, and manage a cart — all with html★ hypermedia patterns and Vanilla Breeze styling.
Launch Demo →What's Included
Shop Features
- Category Navigation — Browse by category with instant loading
- Product Grid — Responsive grid with sort dropdown
- Infinite Scroll — Load more products as you scroll
- Product Modals — Detail view with reviews tab
- Cart Updates — OOB swaps update cart badge without page reload
- Skeleton Loading — Animated loading states during fetches
html★ Patterns Used
Performance
data-cache="swr:10m"— Cache product pages for 10 minutesdata-prefetch="hover"— Preload categories on hoverdata-instant— Fire on mousedown for faster navigationdata-loading-class="skeleton"— Animated skeleton loading
Dynamic Content
data-trigger="visible"— Infinite scroll via IntersectionObserverdata-swap="beforeend"— Append new products to griddata-oob— Out-of-band cart badge updatesdata-queue="last"— Only keep the latest sort/filter request
Why This Matters
Product browsing with prefetch + SWR caching feels as fast as a React SPA. OOB swaps update the cart badge without touching the product grid. Infinite scroll with skeleton loading states provides a polished UX — all without a build step or JavaScript framework.