Nº 07de 22Destaque

Sentinel

Monitoramento em tempo real: métricas do backend FastAPI transmitidas por WebSocket e renderizadas em 3D

Ano
2026
Status
NO AR
Papel
Projeto pessoal · solo
Stack
Next.js 16 · Three.js · React Three Fiber · GLSL +4
sentinel-mu-navy.vercel.app
Sentinel — captura de tela
1 captura
Sentinel — captura de tela

captura de tela

01O projeto

Dashboard 3D full-stack em que os repositórios do meu GitHub orbitam um núcleo reativo como satélites. O tamanho do repositório mapeia stars + forks, a cor mapeia a linguagem e a velocidade da órbita mapeia o push mais recente. Shaders GLSL próprios desenham plasma, grids holográficos e camadas de glitch. O backend FastAPI transmite métricas de CPU, RAM e disco por WebSocket, e são elas que dirigem o pulso e a cor do núcleo.

02O que foi feito

  1. Streaming de métricas por WebSocket com reconexão automática e limite de tentativas

  2. Shaders GLSL próprios (plasma, grid holográfico, glitch)

  3. Câmera fly-to com GSAP, bloom e aberração cromática

  4. Backend FastAPI empurra métricas de CPU/RAM/disco que dirigem a cena

03Stack

  • Next.js 16
  • Three.js
  • React Three Fiber
  • GLSL
  • FastAPI
  • WebSocket
  • TypeScript
  • Docker
Próximo projeto →Nº 08

Sistema distribuído: Gateway (Java) + User Service (Python) + Connections (Java) + Frontend