Duck Monitor

Dashboard de monitoramento em tempo real para um servidor privado.

Este projeto nasceu como um pequeno experimento para monitorar recursos de um servidor caseiro — que, neste caso, é meu próprio celular.

Fiz um vídeo mostrando a ideia do servidor caseiro no meu canal.

O objetivo do Duck Monitor é acompanhar informações como utilização de CPU, memória RAM e armazenamento através de uma interface web simples, responsiva e atualizada em tempo real.

Atualmente, o projeto está em desenvolvimento e novas funcionalidades podem ser adicionadas conforme ele evolui.

Tecnologias

Backend

• Node.js — Runtime do servidor
• TypeScript — Tipagem estática e segurança durante o desenvolvimento
• Express — Framework para construção da API HTTP
• Server-Sent Events (SSE) — Comunicação em tempo real entre servidor e cliente
• systeminformation — Coleta de informações do sistema
• Nginx — Servidor web e reverse proxy entre frontend e backend

Frontend

• React — Construção da interface
• TypeScript — Tipagem estática
• Tailwind CSS — Estilização e responsividade
• Recharts — Visualização das métricas através de gráficos

Funcionalidades

Atualmente, o dashboard permite acompanhar:

CPU

• Utilização total
• Utilização por núcleo
• Uso em modo user
• Uso em modo system
• Tempo ocioso

Memória RAM

• Memória total
• Memória utilizada
• Memória disponível
• Percentual de utilização

Armazenamento

• Espaço total
• Espaço utilizado
• Espaço disponível
• Percentual de utilização

Sistema

• Informações do sistema operacional
• Atualização das métricas em tempo real através de SSE

Arquitetura

O Duck Monitor utiliza Server-Sent Events (SSE) para manter uma conexão persistente entre o frontend e o backend, permitindo que as métricas sejam atualizadas em tempo real sem a necessidade de requisições HTTP periódicas pelo cliente.

O Nginx atua como servidor web e reverse proxy, servindo os arquivos estáticos do frontend e encaminhando as requisições /api/* para o backend Node.js.

                         Browser
                            │
                            ▼
                     ┌─────────────┐
                     │    Nginx    │
                     │   :8080     │
                     └──────┬──────┘
                            │
                 ┌──────────┴──────────┐
                 │                     │
                 ▼                     ▼
          ┌─────────────┐       ┌─────────────┐
          │   React     │       │   Node.js   │
          │    dist/    │       │   Express   │
          └─────────────┘       │    :3000    │
                                └──────┬──────┘
                                       │
                                       ▼
                              ┌─────────────────┐
                              │ systeminformation│
                              └────────┬────────┘
                                       │
                                       ▼
                                      SSE
                                       │
                                       ▼
                                  Dashboard

O backend coleta periodicamente as métricas do sistema e as envia para o frontend através de uma conexão SSE persistente.

Essa arquitetura permite separar as responsabilidades da aplicação:

• Nginx → servidor web e reverse proxy
• React → interface e visualização dos dados
• Node.js/Express → API e comunicação em tempo real
• systeminformation → coleta das métricas do sistema

Objetivo do projeto

Além de funcionar como uma ferramenta de monitoramento para meu servidor caseiro, o projeto também está sendo desenvolvido como uma forma de estudar e praticar:

• TypeScript
• APIs com Node.js
• Server-Sent Events
• Comunicação em tempo real
• React
• Tailwind CSS
• Visualização de dados
• Monitoramento de sistemas
• Nginx e reverse proxy
• Arquitetura cliente-servidor
• Organização e separação de responsabilidades no backend

Deploy

O frontend é compilado para arquivos estáticos utilizando Vite e servido pelo Nginx.

O backend Node.js permanece executando separadamente e recebe as requisições da API através do reverse proxy configurado no Nginx.

Browser
   │
   ▼
Nginx
   │
   ├── /        → React (dist/)
   │
   └── /api/*  → Node.js :3000
                     │
                     ▼
                    SSE

Essa configuração permite executar o frontend em modo de produção sem depender do servidor de desenvolvimento do Vite.

Status

Em desenvolvimento

O projeto ainda está em uma fase inicial, então a estrutura e as funcionalidades podem mudar conforme novos recursos forem implementados.