case study · polaris · react · cloudflare-workers
An admin anyone may touch
The dare. Most portfolio “admin demos” are screenshots, because giving strangers write access to a live system sounds insane. This one is live: open the ops console, change a tier threshold or the free-shipping bar, save — and watch the storefront’s cart bars and the checkout Function follow, because all three read the same config you just edited.
Why it’s safe — server-side, never UI-side. The editor is honest about what protects the demo, because the same thinking protects production systems:
- Presets, not free text. Anonymous visitors never type anything the storefront will display — every text (banner lines, tier rewards, nav titles) is chosen from a curated list, and the server validates the choice against the same list. Nobody can put words in the store’s mouth. Numbers stay numeric with clamped ranges; structural fields — slot count, targeting, modes, panels — cannot be changed at all. Everything else gets a specific 422, not a stack trace.
- Rate limiting. Five writes per minute per IP; the sixth gets a 429.
- Nightly reset. At 03:00 UTC the canonical configuration wins, whatever the day’s visitors did. Worst-case vandalism is an odd-looking promo bar for a few hours.
The role toggle. Flip the console to Viewer and every control disables. There’s no auth system behind it — deliberately. It demonstrates permission-aware UI as a design layer, while making the point that real enforcement lives on the server (in past client work: a menu-tree-driven permission model where every route id doubled as a backend-checked permission key, on React + Ant Design ProComponents).
Stack notes. The console is React + Shopify Polaris, served as static assets by the same Cloudflare Worker that owns the API — one origin, no CORS, no extra hosting. Six pages, one per system: sync dashboard, cart campaigns, navigation (metaobject editor), badges, the promo-sync monitor, and checkout-function status — each editing or observing the live store through the same clamped API this page’s live panel reads.
Try the loop. Edit the free-shipping threshold to 60, save, then open the demo store: the cart drawer’s progress bar and the checkout’s shipping line both move. By tomorrow morning it’ll be 80 again — the reset is part of the demo.
two-minute walkthrough