đŸ› ī¸ the colophon ¡ for the nerds

designed by ai.
coded by ai.
shipped by one human.

goal diggers was designed with Claude and built with Claude Code — on a single $20/month plan that never once hit its limit. not a single line was written by hand. it runs on Cloudflare, end to end, for $0 in infra. here's the whole kit, and the reasoning behind every call.

$20/ month
one claude plan

design + dev + debugging. never hit the limit. not once.

0lines
written by hand

every line generated. the human reviewed, nudged, merged.

$0/ month
infra bill

cloudflare pages + d1 + workers, all on the free tier.

1human
orchestrator

no team, no sprint board. just prompts and good taste.

0 lines hand-written ·$20/mo plan ·never hit a limit ·$0 infra bill ·svelte > the rest 💚 ·cloudflare all the way ·designed by claude ·shipped by claude code ·one human at the wheel ·orchestrated by KT ·0 lines hand-written ·$20/mo plan ·never hit a limit ·$0 infra bill ·svelte > the rest 💚 ·cloudflare all the way ·designed by claude ·shipped by claude code ·one human at the wheel ·orchestrated by KT ·
the full kit

every brick in the wall 🧱

small, sharp, boring-in-the-good-way choices. each one earns its place — and tells you why it's here.

🧠

the brain

  • Claude design

    the whole brutalist/playful look — palette, tilts, sticker language, the pitch animation — art-directed in conversation, no figma round-trips.

  • Claude Code development

    wrote, refactored and debugged the entire codebase from the terminal. reads the repo, runs the type-checker, fixes its own mistakes.

⚡

the framework

  • SvelteKit app framework

    one file does server load + browser UI. no client/server boilerplate tax, so the AI writes less code — which means fewer tokens, which means a $20 plan goes a long way.

  • Svelte 5 (runes) ui

    $state / $derived / $props — reactivity that reads like plain js. tiny components, almost no ceremony, compiles away to fast vanilla.

  • TypeScript language

    types are the guardrail. svelte-check + tsc is the authoritative gate the AI has to pass before anything is called done.

  • Vite bundler

    instant dev server, instant HMR. it just gets out of the way.

🎨

the look

  • Tailwind v4 styling

    utility-first, configured straight in CSS. pairs with a hand-rolled token file (colors, shadows, tilts) so the brutalist style stays consistent everywhere.

  • Design tokens css custom props

    one source of truth in tokens.css — change a variable, the whole app shifts. oklch colors for punchy, predictable accents.

  • Google Fonts type

    Unbounded for the loud display, DM Sans for body, JetBrains Mono for the numbers. tabular figures so money never jiggles.

â˜ī¸

the edge

  • Cloudflare Pages hosting

    global edge deploy via adapter-cloudflare. push to git, it ships. free tier, no cold-start drama.

  • Cloudflare Workers runtime

    every server route runs at the edge, milliseconds from the user. the same platform hosts the static app and the dynamic bits.

  • Cloudflare D1 database

    SQLite at the edge. real relational DB, zero servers to babysit, comfortably inside the free tier for ~40 players.

  • Drizzle ORM data layer

    typed schema + typed queries against D1. migrations are checked-in SQL. the types flow all the way to the UI.

🔧

the plumbing

  • Google OAuth auth

    sign in with the office google account, domain-gated. sessions live in D1 — no extra auth vendor.

  • Integer money math correctness

    every rupee stored as minor units (₹1 = 100). arithmetic stays exact — no floating-point cents quietly leaking out of the pool.

  • Vitest tests

    fast unit tests over the payout + fee engine, where being wrong costs real cash.

đŸĩ

the ai layer

  • DeepSeek API banter + recs

    generates "the tea" — playful announcements and recommendations — asynchronously after bets land. cheap, fast, and kill-switchable if it ever gets too chatty.

  • Cloudflare Workers AI failsafe

    the backup brain. if DeepSeek ever blinks, inference falls back to a model running on the same edge — so the tea never fully runs dry.

the reasoning

why these calls 🧐

opinions, defended. the part where the nerds nod along.

đŸĒļ

why svelte and not react / next?

next.js makes you spell out the server/client boundary over and over — 'use client', separate API routes, serialization glue. that's a lot of repetitive code for an AI to generate, and code is tokens. in sveltekit a single +page file does the server load and the browser UI together. less code generated → fewer tokens burned → noticeably more app per dollar. svelte also ships less js to the browser because it compiles away the framework.

🌍

why cloudflare for everything?

pages, workers and d1 are one coherent platform on a generous free tier. an internal game for ~40 people has no business paying for infra. one deploy target, one dashboard, one bill (of $0), running on a global edge network.

🤖

why claude for the whole build?

design direction and development in the same loop — describe the vibe, get the UI; describe the bug, get the fix. claude code reads the repo, runs the type-checker, and won't call something done until it passes. the human stays the architect and reviewer; the typing is automated.

💸

why a $20 plan held up?

lean stack, lean token use. sveltekit's low-boilerplate files mean each feature is a small diff, not a sprawl of files. across the entire build the plan never once hit its limit — the whole thing was designed, written and debugged inside it.

đŸĩ the tea, never dry

the ai pipeline (with a parachute)

banter and recommendations are generated after a bet lands, off the critical path — so the app never waits on a model. and it always has a backup brain.

bet placed
→
DeepSeek API
â¤ĩ on failure
Cloudflare Workers AI
→
the tea ✨

primary: deepseek ¡ failsafe: workers ai ¡ whole layer is kill-switchable