CreatorWebsiteAvailable

Product catalog storefront

A ceramics storefront for a fictional studio: URL-synced faceted filters, product pages with real glaze × size availability, a persistent bag with labelled estimates, and an explicit checkout boundary with Stripe and Shopify recipes. Vite + React + TypeScript.

Get Creator

Creator ($9 a month) includes up to 20 new premium families a billing month (5 in any 24 hours). Already a member? Open your library.

Version: 1.0.0
Platforms: Website
Framework: vite-react
Archive: 4.6 MB 112 files

Screens from the build

Product catalog storefront: Bag drawer, 1600 px wide — Bag drawer, 1600 px wide

Product catalog storefront: Checkout boundary, 1600 px wide — Checkout boundary, 1600 px wide

Product catalog storefront: Home, 1600 px wide — Home, 1600 px wide

Product catalog storefront: Product, 1600 px wide — Product, 1600 px wide

Product catalog storefront: Shop, 1600 px wide — Shop, 1600 px wide

Product catalog storefront: Shop no results, 1600 px wide — Shop no results, 1600 px wide

What it does

browse categories
filter by glaze, price, availability, clay and finish (URL-synced, shareable)
sort and recover from no results
choose a variant with unavailable and sold-out combinations
add to bag, edit quantities, remove with undo
persist the bag on the device
hand off at a clearly identified checkout boundary

Routes and screens

homeEditorial home: labelled product shelf, category index, colour-first glaze browsing, newest pieces
shopAll products with faceted filters, sort, counts, load-more and no-results recovery
categoryOne category with the same filters
productGallery, variant selection, quantity, add to bag, dimensions and care
bagBag page with line edits and estimated totals (also a drawer on every page)
checkoutCheckout boundary: states no payment provider is connected and shows the provider payload
deliverySample delivery and returns policy
not-found404, unknown product and unknown category states

States covered

Loading
Empty
Error
No results
Validation
Sold out
Not made combination
Low stock
Blocked checkout
Undo
Not found
Reduced motion

Stack and versions

vite	`8.3.1`
react	`19.3.0`
react-dom	`19.3.0`
react-router	`8.4.0`
typescript	`7.0.2`
vitest	`5.0.2`
@playwright/test	`1.56.0`
@axe-core/playwright	`4.13.0`

Commands:

install	`npm ci`
dev	`npm run dev`
test	`npm test`
typecheck	`npx tsc -b`
build	`npm run build`
e2e	`npx playwright install chromium && npm run build && npm run e2e`
screenshots	`npm run build && npm run screenshots`
budget	`npm run build && npm run budget`

Tested

Check	Platform	Tool	Result	Date
unit + component tests (32)	Node	vitest 5.0.2 + jsdom 30 + Testing Library 16	Pass	2026-09-26
e2e routes, flows, keyboard paths and axe (WCAG 2.2 AA tags) at 1280 and 360 px	Website	Playwright 1.56.0 Chromium 141 + @axe-core/playwright 4.13.0	Pass	2026-09-26
axe violations per page and state (0 everywhere)	Website	@axe-core/playwright 4.13.0	Pass	2026-09-26
critical-path budget ≤ 250 KB gzip	Website	scripts/budget.mjs	Pass	2026-09-26
lab LCP ≤ 2.0 s (median of 3; 4x CPU, 150 ms RTT, 1.6 Mbps)	Website	Playwright + Chrome DevTools Protocol throttling	Pass	2026-09-26
fresh-copy reproduction from the packaged archive (npm ci, build, test)	Node	npm 10.9 / Node 22.22	Pass	2026-09-26
screenshots at 360/768/1280/1600	Website	Playwright 1.56.0 Chromium	Pass	2026-09-26
Safari and Firefox	Website	not run	PendingNot run yet	—

1 check still pending. Pending means it hasn't been run yet, not that it passed.

Not included

No payment provider: /checkout explains the boundary and never shows an order confirmation; replace startCheckout() in src/lib/checkout.ts (Stripe and Shopify recipes in docs/INTEGRATION-BOUNDARIES.md)
Delivery and tax in the bag are labelled estimates from src/config/store.ts
Bag stored in localStorage on one device; no accounts, server carts or inventory reservation
Catalog is a static JSON file; replace loadCatalog() to read from your commerce backend
No reviews, restock alerts, email, analytics or cookies
Client-rendered SPA: prerender or server-render for crawlers that don't execute JavaScript; host must rewrite unknown paths to index.html

Each boundary comes with instructions for adding it in docs/INTEGRATION-BOUNDARIES.md.

Known limitations

Aldwell is a fictional brand; prices, stock and product copy are sample data
Product imagery is original code-drawn illustration, not photography
Verified in Chromium only; Safari and Firefox not yet tested
Sample delivery/returns text is not legal advice

Licence

Use in unlimited end products incl. client/commercial; no resale/redistribution as a template, kit or dataset; no ML training. Survives cancellation for delivered versions.

Full terms: Motif template licence. Open-source parts keep their own licences (licenses.json, id lic-premium-product-catalog-1-0-0).

Ask your agent

Use Motif to activate the premium-product-catalog template and download it. Then adapt it for a neighbourhood bakery: replace the content and imagery, keep the design tokens and every state in docs/STATE-MATRIX.md, and run check_design_contract before you finish.

Motif guides applied

web-archetype-ecommerce-storefront-sites · web-archive-browsing-modes-and-filters · web-hero-purchase-module-and-campaign · web-justified-catalog-grids · web-product-photography-systems · web-dtc-commerce-conversion-moves · web-code-drawn-zero-asset-graphics · saas-empty-states-that-teach · saas-accessible-modal-dialogs-and-focus · saas-anti-pattern-sneaking-hidden-costs-and-drip-pricing · web-anti-fake-urgency-and-dark-patterns · web-pricing-honesty-and-anchoring · web-focus-indicators-and-keyboard · web-not-found-page · web-seo-semantic-structure-and-metadata · web-type-scale-and-measure · web-semantic-color-tokens · web-breadcrumbs-and-page-contents · web-cls-prevention · motion-reduced-motion-strategy · motion-design-tokens · motion-loading-skeleton-states · sys-toast-alert-and-live-region-rules · sys-per-component-accessibility-contracts