Claim a place
Submit a website, X profile, or Instagram profile. The target is normalised into one stable listing, so repeat bids top up the same claim.
Chapter I · The premise
The product makes status visible.
The brief was intentionally simple: turn a paid leaderboard into a world people understand before they read the rules. The art attracts attention, but the interaction model has to stay legible, fair, and immediate once money enters the loop.
- Role
- Product design and full-stack engineering.
- Status
- Live product with real payments.
- Core loop
- Submit, pay, climb, defend.
- Delivery
- Fast worldwide through Cloudflare's edge.
Chapter II · Interaction model
Three moves to the crown.
Bid to rise
Stripe captures a whole-dollar bid. The board ranks cumulative paid spend, not a temporary auction window or an invented score.
Rule in public
The hierarchy moves from the crown down through dukes, knights, commoners, and the chained floor of the board.
Product judgment
“The joke works because the system doesn’t cheat.”
Theme everywhere.
Rules underneath.
The medieval hierarchy is not decoration pasted over a dashboard. Each rank has its own placement, costume, plaque, price-to-pass action, and responsive composition. Under that theatre, every monetary decision stays explicit and testable.
The board also gives a bidder something immediately after checkout: a verified place in the hierarchy, a public destination link, and a clear path to defend or improve the rank.
Chapter III · Live interface
One hall.
Every viewport.
Mobile is not a crop
The hierarchy recomposes.
The mobile version introduces its own controls, tighter character tiers, and a bottom game dock. The board still reads from crown to floor without turning the experience into a generic stacked list.
Chapter IV · Payment architecture
Money in.
Rank out.
It collects the bid and tells the app what was actually paid. The browser never gets to invent that number.
It validates requests, creates checkouts, limits abuse, and rebuilds the board close to the visitor.
They keep click totals consistent even when many people visit different listings at the same time.
Normalise
Turn a domain or social profile into one stable listing identity.
Open checkout
A Cloudflare Worker asks Stripe for a branded payment page.
Confirm payment
Stripe reports the money it captured, not the number sent by the browser.
Return instantly
The exact payment is verified so the bidder sees their new place immediately.
Build the ranks
Paid totals are added together and the public hierarchy is recalculated.
Count attention
Durable Objects record outbound visits without making the payment board wait.
The unglamorous work
Edge cases guard the throne.
A playful interface can still handle payments like production software. The real engineering lives in the moments that could make a bidder lose trust.
Cumulative by design
Every successful top-up strengthens the same listing instead of creating duplicates.
Deterministic ties
Equal spend is resolved by outbound clicks, then the earlier paid claim, then a stable identifier.
Immediate paid return
Stripe Search is eventually consistent, so checkout return verifies and merges the payment directly without double-counting it later.
Failure stays honest
Unpaid, expired, foreign, zero-value, and malformed events never enter the board as successful bids.
106
/ 106 tests passing
Ranking, payment verification, responsive regressions, audio, checkout return, and hierarchy behavior.
Technology
A game face on an edge stack.
Next.js 16React 19TypeScriptStripe CheckoutPaymentIntentsCloudflare WorkersOpenNextDurable ObjectsWranglerCustom CSSAVIF media pipelineNode test runner
