API Feature Lab

Backend API design, one technique per page. Every page calls a real endpoint of this site's own API, shows the raw request and response, explains it, and shows the code. A sibling of the Vercel, Cloudflare and Motion labs.

Stack: Hono (API under /api, with @hono/zod-openapi) · Zod 4 · Drizzle ORM · Neon Postgres in production, PGlite (Postgres in WebAssembly) locally and in tests · Next.js 16 (App Router, Cache Components) for the pages · Tailwind CSS v4 · target: https://api.djmiskey.com on Vercel (Hobby).

Run it

npm install
npm run dev        # http://localhost:3000, API at /api, in-memory PGlite (no setup)

Set DATABASE_URL (see .env.example) to use a real Postgres instead.

Checks

npm run lint
npm run typecheck
npm test           # Vitest: the API through app.request() on PGlite (SSE streams included), registry, robots/sitemap
npm run build
npm run e2e        # Playwright against the build (starts `npm start` on :3300)
BASE_URL=https://api.djmiskey.com npm run e2e   # a deployment: read-only tests only
npm run worker:check   # bundle the Cloudflare Worker (no deploy)
npm run worker:deploy  # deploy it to api-cf.djmiskey.com (wrangler login first)

CI (.github/workflows/ci.yml) runs all of them on every pull request, with no secrets.

Layout

Path	What lives there
src/api/app.ts	The Hono app: routes, OpenAPI document, 404 and error handling
src/api/routes/*.ts	One module per resource, each route defined with its Zod schemas
src/api/problem.ts, src/api/validation.ts	RFC 9457 Problem Details and the validation hook
src/api/trpc.ts, src/api/graphql.ts, src/api/routes/graphql.ts	The same data as a tRPC router and a GraphQL schema, with the GraphQL-over-HTTP handler
src/api/idempotency.ts, src/api/webhooks.ts	Idempotency-Key middleware; webhook signing, event log and delivery with retries
src/api/db/	Drizzle schema, and the client that picks Neon or PGlite
src/app/api/[[...route]]/route.ts	Mounts the Hono app into Next.js (hono/vercel)
worker/index.ts, wrangler.jsonc	The same app as a Cloudflare Worker (api-cf.djmiskey.com)
src/app/<slug>/page.tsx	One page per technique; src/lib/features.ts is the registry
src/components/Explorer.tsx	The in-page HTTP client every page uses
tests/, e2e/	Vitest unit tests, Playwright end-to-end tests

This is the beginning of the README. Read the rest at the original. Read the full README ↗