Skip to content
Case study — 01 / 05 · index

WatchDeck Cloud

A hosted monitoring platform that checks deeply, alerts honestly — and never calls missing data healthy.
Project
WatchDeck Cloud
Role
Design, build & docs — solo
Status
Live · read-only demo
Live
WatchDeck Cloud · overview
01Overview
ProductWatchDeck Cloud
SectorDeveloper tools — monitoring
Year2026
ScopeProduct, design system, API, docs
TeamSolo — design to deploy
Description

WatchDeck Cloud is hosted endpoint monitoring with opinions: deep checks on a fixed cadence, uptime counted only from evidence, and alerts on the channel you actually read.

Every sixty seconds a cron tick wakes the check engine. Each probe is graded, not pinged status codes against an expected set, latency against a budget, TLS expiry against a warning window, assertions against the response itself. The verdict is one of exactly three statuses up, degraded, down and a probe that proves nothing is recorded as inconclusive rather than dressed up as either.

The platform is the whole product surface: a multi-tenant dashboard, an incident pipeline that alerts email, Slack, Discord or any webhook, a private read-only status API, and its own documentation site at docs.watchdeck.dev. I use it every day the server rack on this site's homepage is WatchDeck's API rendered as furniture, one physical unit per monitor.

I run a shelf of live projects and wanted one calm screen that proves they're up so I built the monitor instead of renting one.

Flagship — the overview

The whole fleet, one calm screen.

Fleet uptime against its SLO target, latency percentiles, error budget remaining, checks ran the overview reads like an instrument panel, not a wall of widgets. Status colour is rationed to meaning: green is earned by a conclusive probe, amber and red explain themselves, and an endpoint with nothing conclusive to show is never painted healthy.

app.watchdeck.dev · live demo
02Key components
System
01

The check engine

A cron tick fires every minute and picks up every endpoint that is due. Evaluators grade each probe in strict order reachability, expected status, assertions, latency budget, TLS window and a response catalogue decides what each verdict means. Upstream noise that proves nothing about the endpoint freezes the streak instead of faking one.

Product
02

Incidents & alerting

Three failing probes open an incident; two healthy ones close it a threshold, never a single blip. The incidents view carries mean-time-to-resolve, cause breakdown and flapping detection, and alerts route to email, Slack, Discord or any webhook, grouped per incident so a rough night is one thread, not forty pings.

API
03

A private status API

A read-only status endpoint, private by design: keys are minted per consumer for projects that want to render WatchDeck's data as their own. Three statuses only, uptimes as fractions, null wherever there is no evidence and deliberately no CORS, so a key can never leak into a browser. The frame here is it working: the server rack in this site's homepage, one physical unit per monitor, reading live.

Docs
04

WatchDeck Docs

Documentation is part of the product, not an afterthought a Nextra site on its own subdomain and its own Vercel deploy, so docs ship the moment they're written. MDX pages, file-based routing, full-text search, and an information architecture that mirrors the app's own nav, so deep links from the dashboard land in the matching section.

System
05

The design system

Every colour, radius, duration and type role is a CSS custom property; components consume semantic tokens surface, primary, success, danger never raw values. HeroUI primitives handle focus and accessibility underneath, and because both themes resolve through the same token sheet, dark mode is a variable swap, not a redesign.

03Design philosophy
Calm surfaces, rationed colour green must be earned.
WatchDeck tokens — status colour as vocabulary☾ dark
Primary
Actions, focus, the brand itself
--wd-primary
#7c83f5
Success
Up — earned by a conclusive healthy probe
--wd-success
#5ac08a
Warning
Degraded — slow, TLS expiring, or no data
--wd-warning
#e8a252
Danger
Down — unreachable or failing its checks
--wd-danger
#e57b7b
Foreground
Ink on the warm paper surface
--foreground
#1c1e26
Principles
  • No green on missing data.
  • Status colour is vocabulary, not decoration.
  • Numbers are data — mono, tabular, exact.
  • Both themes are first-class, one token sheet.
  • Calm by default; alarm only when earned.
Aa InterINTER · UI
99.97% · 12msJETBRAINS MONO · DATA
04Tech stack
Chosen so one person can design, build, run and document a multi-tenant product every tool earns its place or leaves.
Application
Next.js 16App Router

Pages, server actions, route handlers and the cron endpoint in one deployable the whole product lives in a single framework, so a solo build spends its effort on the product, not the glue.

React 19 + TypeScriptUI · types

Strict types run end to end. The status contract is typed once and read defensively a payload that doesn't parse is rejected whole, never rendered half.

RechartsCharts

Latency percentiles, uptime trends and incident volume as declarative, container-responsive charts no hand-rolled SVG to maintain.

Data & infrastructure
SupabasePostgres · auth

Row-level security makes tenant isolation a property of the schema rather than of application code remembering to filter. Auth, realtime and migrations ride the same project.

Vercel + CronHosting · scheduler

A cron tick every minute drives the entire check engine no worker fleet, no queue to operate. Hosting and scheduling collapse into configuration.

UndiciProbe client

Probes are measurements, so the HTTP client must be exact about timeouts and connection behaviour a slow endpoint is measured, never guessed at.

Design system
Tailwind v4CSS-first tokens

The design system lives in CSS custom properties, inspectable in any browser utilities consume tokens, and dark mode is a variable swap.

HeroUI v3Primitives

Modals, popovers and form controls arrive accessible; semantic tokens restyle them into WatchDeck instead of rebuilding focus management from scratch.

Inter + JetBrains MonoType

Prose reads in Inter; every number sets in mono so data always looks like data the same rule this portfolio follows.

Docs & quality
NextraDocs site

MDX with routing, sidebar and search for free, deployed as its own Vercel project on docs.watchdeck.dev documentation ships independently of the app.

OpenAPIAPI contract

The status API is specified, versioned additive-only, and shipped with real example payloads consumers integrate against the contract, not the implementation.

VitestTests

The API's documented examples are generated by the real snapshot code and pinned by a contract test, so the docs cannot drift from the endpoint.

05Gallery
06 frames · click any to view full
Live site
app.watchdeck.dev · read-only demo, no signup
Live
60sCheck cadence — every monitor, every minute
3Statuses — up, degraded, down. Never a fourth
0Greens painted without a conclusive probe
Credits
Product & designAlexander Smith
EngineeringAlexander Smith
API & documentationAlexander Smith
StatusLive — demo open to all
Year2026
Deliverables
  • 01Multi-tenant monitoring platform
  • 02Check engine & evaluator pipeline
  • 03Incident & notification system
  • 04Private status API + OpenAPI contract
  • 05Documentation site on Nextra
  • 06Token-driven design system, both themes
Tech stack
Next.js 16React 19TypeScriptTailwind v4HeroUI v3SupabasePostgresVercel CronUndiciRechartsVitestNextra
Creative Web Designer & Developer25.2048°N · 55.2708°E

AlexanderSmith

Locating the studio25.2048°N · 55.2708°E