sYntinel

Real-time 3D globe visualization of global service outages and infrastructure health.

Features

• Interactive 3D Globe — color-coded columns show service status at a glance
  • 🔴 Down — red columns, high altitude
  • 🟠 Degraded — orange columns, medium altitude
  • 🟢 Operational — green columns, low altitude
• System Monitor Dashboard — radar pulse status indicator, 24-hour uptime timeline grid, latency metrics, and live incident log feed
• Outage Disaster Simulator — trigger simulated global catastrophe scenarios:
  • ☀️ Solar Flare (global collapse)
  • 🌐 DNS Backbone Collapsed
  • ☁️ AWS Cloud Core Outage
• Focus Mode - full-screen system monitor dashboard for distraction-free monitoring
• API Integration — supports Pingdom and StatusGator APIs, with a built-in simulation engine as fallback

Tech Stack

Layer	Technology
Frontend	Angular 19, TypeScript
3D Visualization	globe.gl + Three.js
Backend / Edge	Cloudflare Workers
Styling	Vanilla CSS with glassmorphism & micro-animations
Fonts	JetBrains Mono, Outfit (Google Fonts)

Getting Started

Prerequisites

• Node.js 18+
• npm

Install

npm install

Development

The Angular dev server proxies /api to Wrangler on port 8787, so both processes must be running:

# Terminal 1 — Angular dev server
npm start

# Terminal 2 — Cloudflare Worker (serves /api/outages)
npx wrangler dev

Alternatively, build and run everything through Wrangler on a single port:

npm run preview

Production Build & Deploy

npm run deploy

This runs ng build --configuration production followed by wrangler deploy.

API Configuration

The app works out of the box with its built-in simulation engine. To connect real monitoring APIs, add your tokens as Wrangler secrets (either name works for each provider):

npx wrangler secret put PINGDOM_API_KEY
# or: npx wrangler secret put PINGDOM_API_TOKEN

npx wrangler secret put STATUSGATOR_API_KEY
# or: npx wrangler secret put STATUSGATOR_API_TOKEN

For local development, create a .dev.vars file in the project root:

PINGDOM_API_KEY=your_pingdom_bearer_token
# STATUSGATOR_API_KEY=your_statusgator_bearer_token

When configured, the worker fetches live outage data from the provider. Without tokens, all outage data is generated from the simulation engine.

Project Structure

src/
├── workers.ts                          # Cloudflare Worker — /api/outages endpoint
├── app/
│   ├── app.component.*                 # Root component — focus mode, sidebar wiring
│   ├── outage.models.ts                # GlobeOutagePoint interface
│   ├── globe-map.models.ts             # Globe data types
│   ├── globe-view/                     # 3D globe (globe.gl + Three.js)
│   ├── outage-sidebar/                 # Sidebar — monitor widget, outage list, simulator
├── environments/
│   ├── environment.ts                  # Dev config
│   └── environment.production.ts       # Prod config
proxy.conf.json                         # Dev proxy → Wrangler
wrangler.jsonc                          # Cloudflare Workers config

Credits

Based on the original real-time globe visualization concept by cppshane.

License

See repository for license details.