Demos
Things I built to answer a question I could not answer by reading. Each one is cloneable and runs on your machine, and each says which parts are real and which are not.
- 01
React Observability Demo
instrumented dashboardA React dashboard that watches itself. The page runs the OpenTelemetry SDK in the browser, so it emits real traces, metrics and logs about its own page loads, fetches, clicks and rendering, exports them over OTLP to an OpenTelemetry backend, then reads them back into the UI it is part of. Click a row and a span for that click appears in the waterfall, with a real trace id and a real duration.
The service estate the dashboard displays is a different matter. The fleet of nineteen services, their latency, their error budgets and their incident feed are generated from a seeded random source. No production system is behind them. The project says this up front and tags every panel with whether what you are looking at is measured or fabricated, so the two are never mixed.
It runs from a fresh clone with one container for the backend and one command for the app. That backend is the grafana/otel-lgtm image, which ships Prometheus rather than Mimir. The project names Prometheus throughout instead of leaning on the acronym.
The hosted copy below runs with exporting switched off, and says so in its header. It has to: anything in a Vite environment variable is compiled into the browser bundle and readable by anyone who loads the page, so shipping an ingest token with a public demo would hand out write access to the backend. Everything else works there — the simulated estate, the metrics, the trace waterfall. Clone it and point it at your own collector to watch the spans actually leave the browser.
React · TypeScript · Vite · Tailwind · OpenTelemetry
More will land here as they are worth showing. Longer writeups for the larger projects live under Work.