A clean little brand site for a small-batch hot-sauce maker — that happens to hide one deliberate exception: a self-serve stock toggle, backed by a single serverless function, that every visitor sees live.
The one deliberate exception, drawn out — a static site plus a single serverless function and a shared store give the owner a self-serve stock toggle every visitor sees live, with the email plumbing around it.
The interactive data-flow diagram is built for a larger screen.
Open the full diagram in its own tab ↗
A flavor-first home on the web for the small-batch hot sauces James makes — Berkley Pepper Company. It's there to show the lineup, tell the story behind each bottle, and point people to where they can actually get one. The whole thing is built flavor-forward, not heat-challenge culture: the sauces are meant to taste like something, and the site is meant to look like it means it.
A single-page site with a “cigar lounge meets urban loft” look — warm paper, a deep logo red, a quiet grain texture, a serif display face over clean sans. It renders the full lineup of small-batch sauces as a two-column card grid with heat ratings and live stock badges, opening each into a lightbox with the full label, flavor notes, and a “Get a bottle” hand-off. It's self-contained — CSS and JS inline, assets flat at the repo root — with exactly one deliberate exception: a tiny serverless function plus a shared key-value store that let stock be toggled once and seen by everyone.
The interesting wrinkle was the stock toggle. James wanted to flip a sauce to “sold out” himself and have every visitor see it — but a strictly static, single-file site has nowhere to keep shared state. The first pass leaned on the browser's own storage, which only ever updated James's own screen and no one else's. The fix was to break the single-file rule on purpose, but only barely: one small serverless function reads and writes a per-sauce stock map in a shared key-value store, with the admin password checked on the server and never living in the page. It degrades gracefully too — if the store isn't wired up, the site quietly falls back to its in-stock defaults instead of breaking. One exception, kept as small as it could possibly be.
James visits a private link, types a password, and toggles each sauce between in-stock, low, and sold-out. The change writes to a shared store, so the next visitor — anyone, anywhere — sees the same badges he just set. No admin app, no rebuild, no deploy.
Every sauce opens into a lightbox: the full label, its heat rating, flavor copy, and a “Get a bottle” hand-off — with arrow keys, swipe, deep-linkable URLs, and a share button. The catalog reads like a shelf, not a spreadsheet.