Pulse - Dashboard Analytics em Tempo Real

Pulse é uma demo funcional de analytics em tempo real. A função principal funciona de verdade no navegador: o sistema gera eventos de produto continuamente, agrega métricas por janela de tempo, atualiza gráficos, aplica filtros e dispara alertas conforme regras configuráveis.

O projeto não usa banco de dados, login ou ingestão externa. Ele simula o fluxo de eventos com um motor local em TypeScript para demonstrar a experiência principal sem custo de infraestrutura.

O Que Funciona

• Stream local de eventos em tempo real.
• Métricas vivas: eventos/min, usuários ativos, conversão, latência, receita e erro.
• Gráfico temporal atualizado continuamente.
• Funil de produto.
• Distribuição por canais.
• Tabela de eventos recentes.
• Filtro por canal.
• Modo Spike para simular aumento de conversões/eventos.
• Alertas configuráveis por conversão mínima, latência e sequência de erros.
• Botões para pausar, retomar e resetar a simulação.

O Que É Demo

• Ingestão real via SDK/API.
• WebSocket real com servidor persistente.
• Persistência histórica.
• Workspaces e autenticação.
• Alertas por e-mail/Slack.

Esses recursos são naturais em uma versão SaaS, mas não são necessários para provar o comportamento principal no portfólio.

Stack

• Next.js 14 com App Router
• TypeScript estrito
• Tailwind CSS
• Framer Motion
• Motor local de eventos em TypeScript
• SVG para visualização de série temporal

Como Rodar Junto Com o Portfólio

Na raiz do portfólio:

npm.cmd run dev:all

Isso sobe:

Portfólio: http://localhost:3000
Aurora:    http://127.0.0.1:3010
FlowMail:  http://127.0.0.1:3011
Pulse:     http://127.0.0.1:3012

Como Rodar Só o Pulse

Entre na pasta:

cd projects/pulse

Instale dependências:

npm install

Rode:

npm run dev

Abra:

http://127.0.0.1:3012

Arquitetura

src/app/page.tsx
  Interface principal, controles, gráficos, alertas e tabela de eventos.

src/lib/analytics.ts
  Geração de eventos, agregação de métricas, série temporal, funil e alertas.

src/lib/cn.ts
  Helper de classes Tailwind.

Como Funciona

1. O app inicia com uma base de eventos simulados.
2. Enquanto o modo ao vivo está ativo, novos eventos são gerados a cada 850ms.
3. Os eventos são agregados em janelas recentes.
4. O snapshot calcula métricas, funil, canais, série temporal e alertas.
5. A UI renderiza tudo em tempo real.
6. Os sliders alteram as regras de alerta imediatamente.

Repositório GitHub

Nome sugerido:

pulse-analytics-dashboard

Quando estiver pronto para publicar:

cd projects/pulse
git init
git add .
git commit -m "Projeto inicial do Pulse"

Próximos Passos

• Endpoint real de ingestão de eventos.
• WebSocket/SSE real para stream de produção.
• Persistência com ClickHouse, Timescale ou Postgres.
• SDK JavaScript para captura de eventos.
• Alertas via Slack, e-mail ou webhook.