\n Hello, World!\n

Built on Val Town

\n\n \n Clicks: {count ?? 0}\n \n {error ? (\n

{error}

\n ) : (\n

Saved in SQLite · shared by everyone

\n )}\n\n

\n How this app works\n

\n Two files: a Hono server that talks to SQLite, and a React client that renders the UI.\n Val Town runs the server per request and transpiles the frontend on the fly—no build step.\n

\n\n

\n Request flow (click button)\n

\n \n \n \n \n \n \n \n

\n Rapid clicks are batched client-side and sent as {\"{\"} by: N {\"}\"}{\" \"}\n so every tap is counted even when you smash the button. Get the current total with{\" \"}\n GET /api/clicks on mount.\n

\n\n

\n Files & pieces\n

main.tsx

Hono routes for / and APIs
std/sqlite persist clicks
serveFile for /frontend/*
hotReload on export

frontend/App.tsx

React UI + Twind styles
Optimistic + batched posts
Transpiled TSX → JS
Only talks over fetch()

\n\n

\n Stack map\n

{`┌────────────── browser ──────────────┐\n│  Twind CSS   React App.tsx          │\n│       │ batched POST { by: N }      │\n└───────┼─────────────────────────────┘\n        ▼\n┌────────────── server ───────────────┐\n│  hotReload → Hono (main.tsx)        │\n│    /           HTML shell           │\n│    /frontend/* serveFile (TSX→JS)   │\n│    /api/clicks SQLite count + N     │\n│    /source     redirect to val      │\n└───────────────┬─────────────────────┘\n                ▼\n         ┌─────────────┐\n         │ SQLite row  │\n         │ clicks: N   │\n         └─────────────┘`}

\n\n

\n \n view source\n \n

Code