[!IMPORTANT]
Russia is waging a full-scale war against Ukraine. Please help Ukraine's defenders: donate to Come Back Alive.
Be brave like Ukraine 🇺🇦 Stand with Ukraine
Anonymous Santa Clauses
A Secret Santa gift exchange for friends, families and offices.
Live at gnomik.me.
How it works
- Sign in with your email address. No passwords: we send you a magic link.
- Host a party and share its code with friends, or join one with the code a friend gave you.
- Everyone who joins shows up on the party page. Until the dice are rolled, people can still leave.
- The host rolls the dice. Everyone gets one name: the person they give a gift to.
- Nobody sees anyone else's name, so everyone stays an anonymous Santa Claus.
No marketing emails, and no sharing your data with anyone.
What's in here
This repository is the website. The API lives in santa-monica.
- Astro builds a static site: the knowledge pages (how it works, privacy, terms) and a
React app for everything else (React Router; forms on React Hook Form, validated with Valibot).
- Tailwind CSS v4 and Base UI components, in the
shadcn style: buttons, inputs, dialogs and menus in
src/components/ui/. The rules they
follow (colours, which button where, focus, forms) are in docs/ui-kit.md.
- The API client (
src/api/client.ts) talks to the API's JSON routes. Every write is safe to repeat: each action
sends an Idempotency-Key, and failed requests are retried once.
- Sessions. Tokens are encrypted by the API, so the app keeps them as opaque strings: signed in means it has
one, and a 401 signs out. Each session is bound to a key pair the browser can't export (DPoP,
src/api/dpop.ts),
made at sign-in and kept in IndexedDB; every request carries a proof signed with it.
- Live updates come over WebSockets (
useLiveSocket): a party's and the account's open with a 5-minute ticket,
kept for the tab in sessionStorage; the Party'o'meter's is public.
- Hosting: Cloudflare Pages, with a Content-Security-Policy in
public/_headers that the build completes.
src/
components/ the app: pages, dialogs, forms (ui/ holds the shared controls)
pages/ Astro routes and the knowledge pages (Markdown)
styles/ Tailwind setup and each screen's own styles
dev/ the UI kit page (dev only)
scripts/shots/ screenshots of every screen, for checking layout changes
Development
Needs Node.js 22.23.4 or newer (see .node-version).
npm install
npm run dev
The app is at http://localhost:4321, and the UI kit (every control in every state) at
http://localhost:4321/ui-kit.
npm run build
Type-checks and builds the site into dist/.
npm run shots
Screenshots every screen at phone and desktop widths, with normal data and the longest values the API allows, and
reports anything that overflows. npm run shots:compare -- <before> <after> diffs two runs. See
scripts/shots/README.md.
Against an API preview
Point the app at a preview of the API, or at one running locally (npx wrangler dev --env preview in santa-monica,
on http://localhost:8787). Emailed links then open http://localhost:4321:
PUBLIC_API_ENDPOINT=https://<preview>.workers.dev npm run dev
Tokens are encrypted, so the app needs no key of the API's: it keeps them as opaque strings.
License
The code is MIT, see LICENSE.
The MIT license covers the code only. Images and artwork (in public/ and src/images/) are not covered: they belong
to their authors and keep their own licenses. See CREDITS.md for who made what, and how to reach us about
licensing.
