Document · Colophon/Rev. 2026-Q2/monzim.com

Anatomy of this site

A backend & platform engineer's tour of monzim.com — the runtime, the bindings, the build pipeline, the cron jobs, and the small set of opinions that make it cheap to run, fast to ship, and boring to operate.

Specification sheet10 entries
Runtime
Cloudflare Workers · V8 isolate · nodejs_compat
Framework
TanStack Start + TanStack Router (file-based, SSR)
UI
React 19 · Tailwind 3 · shadcn/ui · framer-motion
Database
Cloudflare D1 (SQLite, remote:true)
Blob storage
Cloudflare R2 → storage-portfolio.monzim.com
KV
OPS_CACHE · VIEW_COUNTER
Telemetry
Workers Analytics Engine + web-vitals + OpenPanel
Auth
GitHub OAuth · sessions in D1
Deploy
GitHub Actions → wrangler deploy
Cron
*/15 * * * * · 5 0 * * *
§ 01 · Topology

One Worker. Many bindings.

The whole app — SSR, file-based routes, server functions, the small API surface, OAuth, MCP, the analytics writers, and the cron handlers — runs inside a single Cloudflare Worker. There is no separate Node origin and no edge / origin split.

topology.svg
Single-Worker architecture
CLIENTbrowser · curl · MCPCLOUDFLARE EDGEanycast TLSHSTS · h2 · h3cache + WAFcache-key on URLWORKER · isolatesrc/worker-entry.tsTanStack StartSSR · streaming responseTanStack Routerfile-based · loadersserver fn + API/_serverFn · /api/* · MCPsecurity headersHSTS · XFO · referrerD1 · DBportfolio-cms (SQLite)remote:trueR2 · MEDIA_BUCKETprod-portfolio-…storage-portfolio.monzim.comKV · OPS_CACHEKV · VIEW_COUNTERttl + dedup windowAnalytics Enginemonzim_site_analyticsCron triggers*/15 · 5 0 * * *HTTPSfetch()env.DBenv.MEDIA_BUCKETenv.VIEW_COUNTERenv.ANALYTICSscheduled()fig 1 · no separate origin · all five bindings reachable in the same isolate · cold start ≈ 50ms · warm sub-ms
  • ingressClient → Cloudflare anycast → Worker isolate (V8, ~50ms cold start, sub-ms warm).
  • runtimeTanStack Start + Router handle SSR, server functions, and file-based routes inside the Worker.
  • dataD1 (SQLite) is the source of truth. R2 stores media. KV holds the hot path counters and ops cache.
  • obsPageviews and Web Vitals stream into Workers Analytics Engine; ad-hoc events to OpenPanel.
§ 02 · Request lifecycle

From byte to body.

Each request crosses Cloudflare's edge into the Worker, which TanStack Start drives through routing, loaders, SSR, and a security-header pass before the response leaves the colo.

lifecycle.svg
Request → response timeline
  1. 0 msClient emits

    Browser opens HTTPS to the apex; H2 + H3 negotiated at Cloudflare's nearest colo.

  2. ~5 msCache lookup

    Cloudflare consults its cache by URL. Static asset → served from the colo. SSR route → forwarded to the Worker.

  3. ~10 msIsolate dispatch

    Worker fetch() handler invoked. nodejs_compat enabled. Env bindings (DB, MEDIA_BUCKET, KV, ANALYTICS) attached.

  4. ~12 msTanStack Start

    createStartHandler matches the route from src/routes/, runs its loader (loaders can call D1 or other server fns).

  5. ~20 msStreamed SSR

    defaultStreamHandler streams the React tree as it resolves. The shell flushes early, the suspense boundaries fill in.

  6. postHeader pass

    Worker wraps the response and stamps HSTS, X-Frame-Options DENY, X-Content-Type-Options, Permissions-Policy, Referrer-Policy.

  7. postAnalytics fan-out

    trackPageview fires (server-fn) writing a session-salted row into Workers Analytics Engine. View counter increments KV under waitUntil.

§ 03 · Stack matrix

What runs where, and why.

Pinned versions and the layer each piece sits at. Anything missing from this matrix is a transitive dependency, not a load-bearing choice.

Runtime4 ×
  • Cloudflare Workerscompute

    compatibility_date 2025-09-24 · nodejs_compat

  • TanStack Startssr · server-fn · entry

    @tanstack/react-start ^1.158

  • TanStack Routerfile-based routing

    src/routes/ · routeTree.gen.ts

  • React 19ui

    concurrent streaming SSR

UI6 ×
  • Tailwind CSS 3styling

    shadcn-style tokens · darkMode: 'class'

  • shadcn/ui (new-york)primitives

    Radix · components.json

  • framer-motionmotion

    page + section transitions

  • lucide-reacticons
  • recharts · mermaidcharts + diagrams
  • cmdk + fuse.jscommand palette + fuzzy search
Data & storage3 ×
  • Cloudflare D1SQLite source-of-truth

    binding DB · remote:true · db/schema.sql

  • Cloudflare R2media + assets

    binding MEDIA_BUCKET · storage-portfolio.monzim.com

  • Workers KVview counters + ops cache

    OPS_CACHE · VIEW_COUNTER

Edge concerns4 ×
  • Security headersHSTS · XFO · referrer

    stamped in src/worker-entry.ts

  • GitHub OAuthadmin auth

    sessions in D1 · /api/auth/*

  • Cloudflare Turnstileform spam guard

    @marsidev/react-turnstile

  • MCP serverAI-tool surface

    /api/mcp · @modelcontextprotocol/sdk

Telemetry3 ×
  • Workers Analytics Engineanonymous pageviews + events

    binding ANALYTICS · monzim_site_analytics

  • web-vitalsCWV beacon

    LCP · INP · CLS · FCP · TTFB

  • OpenPanelsupplementary client events
Build & deploy4 ×
  • Vite 7 + @cloudflare/vite-pluginbundler · dev server
  • MDX 3post compilation

    remark-gfm · rehype-pretty-code · rehype-slug

  • Wrangler 4deploy + types

    wrangler deploy · cf-typegen

  • GitHub ActionsCI · admin-triggered rebuilds
§ 04 · Content pipeline

Database authored. Build-time baked.

D1 is the source of truth for blogs, projects, the resume, gallery, talks, and uses-list. Pages are not queried at request time — a build step queries D1, compiles MDX, and emits a static registry the routes import directly.

content-pipeline.svg
D1 → bake → static registry
AUTHORAdmin UIGitHub OAuthwebhook-ops.tsMCP /api/mcp@modelcontextprotocol/sdkmcp-tools.tsSOURCE OF TRUTHD1portfolio-cmsposts (blog | project)media · resumesgallery_items · usessessions · view_countsCIGitHub Actionsworkflow_dispatchtriggerDeploy()prebuildgenerate:githubgenerate:content→ src/content/*BUILDvite buildMDX → Reactdist/client + workerwrangler deploymain: worker-entry.tsassets: dist/clientEDGEWorkerglobal~250 citiesfig 2 · authoring is dynamic, serving is static · src/content/* is gitignored — D1 is the only source
  • authorEdits flow through the admin UI (GitHub-OAuth + sessions in D1) or the MCP server at /api/mcp.
  • triggerA successful write fires triggerDeploy(), which dispatches a GitHub Actions workflow.
  • bakeprebuild = generate:github + generate:content. The latter reads D1 via the Cloudflare REST API and writes src/content/*.mdx + the .tsx registries.
  • shipwrangler deploy uploads the new Worker. The bake output is gitignored — D1 is authoritative.
§ 05 · Storage layer

Three datastores, one budget.

Each store is picked for a single property. D1 for relational truth. R2 for cheap binary blobs with a CDN in front. KV for low-latency, last-write-wins counters and short-lived caches.

D1 — portfolio-cms

Relational source of truth

  • SQLite at the edge; schema in db/schema.sql, incremental migrations under db/migrations/.
  • Unified `posts` table (blogs + projects, CHECK on `type`) keeps render code tiny.
  • Also stores: media metadata, OAuth sessions, multi-version resumes, gallery items, view counts.
  • remote:true — local dev reads/writes prod. Mutations during `npm run dev` are real.

R2 — prod-portfolio-…

Object store for media

  • Public reads via storage-portfolio.monzim.com with long-lived Cache-Control.
  • Uploads go through the admin/MCP write path → R2 binding inside the same Worker.
  • Zero egress on R2; bandwidth is whatever Cloudflare's CDN serves.

KV — VIEW_COUNTER · OPS_CACHE

Hot-path counters + caches

  • vc:counts:* hold running totals, vc:dedup:{session,type,slug} dedup within a 30-min sliding window.
  • Every view → 2 KV reads + 2 KV writes under ctx.waitUntil. User response is never blocked.
  • Cron flushes counts into D1.view_counts every 15 minutes; daily snapshot rolls into view_counts_daily.
  • OPS_CACHE backs the admin /ops console (OpenPanel insights with TTL).
§ 06 · Scheduled jobs

Two cron triggers. Both idempotent.

Cloudflare cron dispatches into src/worker-entry.ts → scheduled(). The controller.cron string picks the job. Failures log but don't rethrow — a flaky run shouldn't poison the next.

cron.svg
24 h of triggers (UTC)
00:0003:0006:0009:0012:0015:0018:0021:0024:0000:05 — snapshotDailyViewCountsview_counts → view_counts_daily (yesterday)*/15 * * * * flushViewCounters · KV vc:counts:* → D1.view_counts
*/15 * * * *flushViewCounters()

Walks the vc:counts:* KV keys and upserts the cumulative {unique, total} into D1.view_counts. Each KV key is deleted after a successful flush; failures stay in KV for the next tick.

5 0 * * *snapshotDailyViewCounts()

Five minutes past midnight UTC, snapshots view_counts into view_counts_daily for yesterday. Idempotent on (date, asset_type, slug) via INSERT … ON CONFLICT.

§ 07 · Edge & security

Headers at the response seam.

Security headers are stamped inside the Worker, not at the Cloudflare dashboard. That keeps the policy in version control next to the code it protects.

HTTP response headerssrc/worker-entry.ts → applySecurityHeaders()
  • Strict-Transport-Security
    max-age=31536000; includeSubDomains; preload

    Forces HTTPS for a year, covers storage-portfolio.monzim.com and admin, eligible for the HSTS preload list.

  • X-Content-Type-Options
    nosniff

    Disables MIME sniffing so a stray HTML response in an MDX bake can't be reinterpreted.

  • X-Frame-Options
    DENY

    Hard block on framing — there's no embed surface to negotiate.

  • Permissions-Policy
    camera=(), microphone=(), geolocation=()

    Closes powerful APIs the portfolio never needs, even if a future dep tries to call them.

  • Referrer-Policy
    strict-origin-when-cross-origin

    Send a useful Origin to peers without leaking the full URL on cross-site nav.

CSP is intentionally not stamped here — it needs an inventory of allowed origins (analytics beacons, image CDNs, font providers) authored alongside the report-uri. Tracked as a follow-up.
§ 08 · Observability

Aggregate. Anonymous. Cheap.

Workers Analytics Engine is the primary sink — it's a write-only column store you query later with SQL over HTTP. No per-visitor profiles, no third-party JS on critical paths.

primary sink · binding ANALYTICS

Workers Analytics Engine

Every pageview lands here as a row in monzim_site_analytics. Session IDs are a HMAC of (IP, UA, day) salted by ANALYTICS_SESSION_SALT — anonymous but stable enough to dedup. Queried later with SQL over HTTP for the /ops console.

LCP · INP · CLS · FCP · TTFB

web-vitals

Google's library fires each metric once per page lifecycle. The values pipe into OpenPanel as custom events so they can be charted next to the rest of the analytics without standing up a new pipeline.

2× KV read · 2× KV write per view

View counters

Per-asset counters live in KV behind a 30-min dedup window. ctx.waitUntil keeps the writes off the response critical path. The flush cron periodically reconciles into D1 for the admin dashboard.

§ 09 · References

Read the source.

Everything claimed above is in the repo. Each path below maps to a section on this page.

Source map11 files
  • wrangler.jsoncWorker entry, bindings, cron triggers, observability.§ Topology
  • src/worker-entry.tsDefault TanStack Start handler + security header wrap + scheduled() dispatcher.§ Lifecycle, Security, Cron
  • src/routes/__root.tsxRoot route, head metadata, pageview server fn.§ Lifecycle
  • src/server/track-pageview.tsServer fn that writes anonymized rows to Workers Analytics Engine.§ Observability
  • src/server/view-counter.tsHot-path per-asset counter with dedup window.§ Storage, Observability
  • src/server/view-counter-flush.tsCron jobs — KV flush + daily snapshot.§ Cron
  • scripts/generate-content.tsD1 → MDX + .tsx registry baker run by prebuild.§ Content
  • scripts/generate-github-data.tsScrapes public GitHub activity into src/data/github-data.json.§ Content
  • db/schema.sqlSource of truth schema for portfolio-cms.§ Storage
  • src/lib/webhook-ops.tsBusiness logic shared by admin routes and the MCP server.§ Content
  • src/routes/api/mcp.tsModel Context Protocol surface for AI-driven authoring.§ Content