What's on dontpanic.fyi, and how it's built

dontpanic.fyi is a collection of projects. Some panels embed independently deployed applications. Others are features implemented directly in this site. That distinction mirrors the architecture rather than the presentation: if something is interactive, you're using the deployed application.

The site

Next.js 15 on the App Router, structured as an npm workspaces monorepo with apps/web and apps/server. tRPC handles the internal API layer.

Internationalization is intentionally simple: a JSON dictionary and a small translation hook covering English, Spanish, French, and Hindi, instead of a framework-level solution like next-intl. The routing stays uncomplicated and the entire implementation fits in a handful of files.

Type is Space Mono and Syne, terminal green on near-black, with a scanline overlay.

Poker Defense

Tower defense where the currency is a live Texas Hold'em hand. Hole cards are dealt at the start of a round, the flop, turn, and river reveal as it progresses, and the resulting hand determines which tower units are available to place before the next wave.

React 19, TypeScript, Vite, Canvas 2D, no game engine.

The game loop is decoupled from React. Mutable game state lives in a useRef updated from requestAnimationFrame, and the canvas reads directly from that state. React re-renders the surrounding UI once per frame; gameplay never flows through reconciliation. Implementation is in src/hooks/useGameLoop.ts and src/components/GameCanvas.tsx.

Engineering Decisions

Organized around six domains: UI libraries, package managers, testing frameworks, build tools, data fetching, and state management. Each contains structured evaluations of concrete technologies.

The UI systems domain embeds Sandpack sandboxes with the actual library dependencies compiling in-browser. Editing the code recompiles it against the real package.

Votes are persisted in Vercel KV. There are no accounts, presence, or synchronization features, just lightweight anonymous voting.

Code Gauntlet

Paste code, select a judge, receive an evaluation. The implementation focuses on prompt engineering rather than model customization: each judge is a distinct prompt with different evaluation criteria layered over the same Claude Sonnet model.

Schema to Table

Define a schema, generate fake data against it, render the result in a virtualized table.

Testing and CI Demo

Live Jest and ESLint output. One test fails by design, so the panel shows how failures surface rather than only the passing path.

Swagger and tRPC API

A mock inventory API documented two ways, with the same surface exposed through an OpenAPI spec and through tRPC, so the ergonomics of each can be compared side by side.

The Reckoning

Deep-links into Claude or ChatGPT with a preloaded prompt that has the model analyze your own chat history. Execution happens entirely in the destination app; no data reaches this site's servers.

Mobile

Derby Day is a Kentucky Derby betting pool for friend groups, built with Expo, Zustand, and Supabase. The organizer workflow is the primary focus: creating pools, managing scratches, recording results, and generating Venmo deep links for payouts all happen from the admin interface.

Draiver and Unleashed are client work, covered in the site's existing copy.

In progress

Plant Daemon, Silly Face, and Dusty Trail. Two hardware projects and a game, none demoable yet.