Plataforma web de monitoramento de tráfego de rede com foco em visualização operacional, acompanhamento de dispositivos conectados e organização de eventos da infraestrutura.
O projeto foi desenvolvido como trabalho acadêmico para a disciplina de Desenvolvimento Web e apresenta uma interface SaaS voltada para cenários de observabilidade de rede, com navegação entre dashboard, dispositivos, logs, configurações e perfil do usuário.
O N Eyes foi pensado para centralizar, em uma única interface, informações importantes sobre o comportamento da rede. A proposta da aplicação é permitir que o usuário acompanhe indicadores de tráfego, visualize dispositivos ativos, consulte registros de eventos e ajuste políticas operacionais em um painel com linguagem visual consistente.
O projeto conta hoje com backend próprio em Node.js, API REST com autenticação via JWT, banco de dados PostgreSQL gerenciado pelo Prisma ORM e integração real entre frontend e backend nos fluxos de autenticação, configurações e perfil de usuário.
login.html: acesso ao sistema — autentica via POST /api/auth/login e armazena o token em localStorageregister.html: criação de conta — envia dados para POST /api/auth/registerlogout-confirm.html: confirmação de encerramento de sessão — invalida o token no banco via POST /api/auth/logouthome.html: dashboard principal com indicadores e visão geral da rededevices.html: gestão dos dispositivos conectadoslogs.html: consulta de eventos e registros operacionaisconfig.html: configurações administrativas da plataforma — lê e salva via GET/PUT /api/settingsedit-profile.html: atualização de dados do usuário — integrada via PUT /api/users/me├── src/
│ ├── pages/ # Páginas HTML da interface
│ ├── styles/ # Arquivos CSS por página
│ └── public/ # Arquivos públicos estáticos
└── backend/
├── prisma/ # Schema e migrations do banco de dados
└── src/
├── config/ # Configuração do Prisma
├── controllers/ # Lógica de cada rota
├── middlewares/ # Autenticação JWT
├── routes/ # Definição das rotas da API
└── services/ # Regras de negócio
backend/.env:DATABASE_URL=postgresql://usuario:senha@localhost:5432/n_eyes_db
JWT_SECRET=sua_chave_secreta
PORT=3000
cd backend
npm install
npm run prisma:migrate # cria as tabelas no banco
npm run dev # inicia o servidor com hot-reload
O servidor sobe em http://localhost:3000. A rota GET /api/health confirma que está ativo.
Com o backend em execução, o próprio Express serve o frontend. Acesse http://localhost:3000 no navegador e você será redirecionado para a tela de login.
Se preferir abrir o frontend separadamente sem o backend, utilize a extensão Live Server no VS Code e inicie pelo arquivo src/pages/login.html.
| Script | Descrição |
|---|---|
npm run dev |
Inicia o servidor com nodemon (hot-reload) |
npm start |
Inicia o servidor em modo produção |
npm stop |
Encerra o processo na porta 3000 |
npm run status |
Verifica se o servidor está respondendo |
npm run prisma:generate |
Gera o Prisma Client |
npm run prisma:migrate |
Executa as migrations no banco |
O backend está implementado e integrado aos fluxos de autenticação, configurações e perfil de usuário. As páginas de dispositivos e logs ainda operam com dados simulados no frontend, aguardando a implementação das rotas correspondentes na API.
Próximos passos:
traffic_samplesEste trabalho foi criado para aplicar conceitos de: