Site: ass.auction (SFW, the ass is a pair of shorts)
It's a joke site with a real payment flow, built during the outbid.lol wave. Brands pay to be on a leaderboard, the top 22 get rendered onto the boxers, and anyone can pay more to push you down. A few things I'd share with this sub:
Rank is never stored. Standing is SUM(amount) over paid orders per listing, and rank is derived from that on every read. It sounds wasteful, but it means there is exactly one place the board can be wrong, and it's the Stripe webhook. The webhook settles the order and recomputes standing in one SQLite transaction. Refunds and chargebacks go through the same function.
One poll, not websockets. A 20 second heartbeat feeds every number on the page. SSE carries chat and live cursors only and is not allowed to carry a number. Two sources of truth for the same figure was the first bug I hit, so now there's one.
The boxers are a pre-rendered webp plus CSS. Logos sit on the fabric with mix-blend-multiply, which means nothing inside the canvas is allowed to create a stacking context, or the logos stop looking printed. That constraint shaped the Easter egg: you can grab the waistband and shake, the logos fall off and climb back, and the whole thing is CSS custom properties written from a requestAnimationFrame loop, no physics lib, no re-renders.
Things that bit me: a CSS comment inside a JS template string ships to view-source (the minifier strips code comments, not string contents, and a friend screenshotted one). Stripe's checkout takes promotion codes, not coupons, and the redemption cap lives on the code. And my dev login redirected to the wrong port for an hour because the redirect target came from .env.
Stack: Next.js App Router, better-sqlite3 with WAL, Stripe Checkout, Satori for the share cards, one Docker container behind Caddy. Happy to go into any of it.
[link] [留言]