Nº 07of 22Featured

Sentinel

Real-time monitoring: FastAPI backend metrics streamed over WebSocket and rendered in 3D

Year
2026
Status
LIVE
Role
Personal project · solo
Stack
Next.js 16 · Three.js · React Three Fiber · GLSL +4
sentinel-mu-navy.vercel.app
Sentinel — screenshot
1 screen
Sentinel — screenshot

screenshot

01The project

Full-stack 3D dashboard where my GitHub repositories orbit a reactive core like satellites. Repository size maps to stars + forks, color maps to language, and orbital speed maps to the most recent push. Hand-written GLSL shaders draw the plasma, the holographic grids and the glitch layers. The FastAPI backend streams CPU, RAM and disk metrics over WebSocket, and those are what drive the core's pulse and color.

02What was built

  1. Metrics streamed over WebSocket with automatic reconnection and a retry cap

  2. Hand-written GLSL shaders (plasma, holographic grid, glitch)

  3. Fly-to camera with GSAP, bloom and chromatic aberration

  4. A FastAPI backend pushes CPU/RAM/disk metrics that drive the scene

03Stack

  • Next.js 16
  • Three.js
  • React Three Fiber
  • GLSL
  • FastAPI
  • WebSocket
  • TypeScript
  • Docker
Next project →Nº 08

Distributed system: Gateway (Java) + User Service (Python) + Connections (Java) + Frontend