Dashboard MoveRecife 📊

Dashboard em tempo real para monitoramento ambiental de temperatura e umidade da cidade do Recife, integrado com a plataforma ThingSpeak.

📋 Descrição do Projeto

Este projeto consiste em um dashboard interativo e responsivo que exibe dados de sensores IoT em tempo real através da API ThingSpeak. O projeto é estruturado em 4 componentes principais:

Componentes Principais

1. Dashboard.jsx (Página Principal)

• Gerencia estado global da aplicação
• Integração com API ThingSpeak (canal #3096127)
• Fetch automático de dados a cada 60 segundos
• Processamento e filtragem de dados de temperatura e umidade
• Cálculo de estatísticas (mín, máx, média)
• Análise de tendências (últimos 10 pontos vs 10 anteriores)
• Tratamento de erros e status de conexão

2. MetricCard.jsx (Cartões de Métrica)

• Exibe valor atual com unidade
• Mostra estatísticas (min, máx, média)
• Indica tendência (subindo, caindo, estável) com ícones
• Animações fluidas com Framer Motion
• Design responsivo com gradientes

3. TimeSeriesChart.jsx (Gráficos de Série Temporal)

• Visualiza histórico de dados em gráficos de área
• Usa biblioteca Recharts para renderização
• Tooltip customizado com formatação de data/hora em português
• Suporta múltiplos tipos de dados (temperatura, umidade)
• Responsive Container para adaptação a qualquer tamanho

4. StatusBanner.jsx (Banner de Status)

• Indica status de conexão (conectado/desconectado)
• Mostra última atualização dos dados
• Exibe número total de leituras
• Animações de pulso para conexão ativa
• Ícones interativos com Lucide React

🛠️ Stack Tecnológico

• React 19.2.0 - Framework UI
• Vite - Build tool e dev server
• Framer Motion - Animações e transições
• Recharts - Gráficos e visualização de dados
• Lucide React - Ícones SVG
• date-fns - Formatação e manipulação de datas
• Tailwind CSS - Estilização (via shadcn/ui)

📦 Instalação

npm install

🚀 Desenvolvimento

Para iniciar o servidor de desenvolvimento:

npm run dev

A aplicação estará disponível em http://localhost:5173

📦 Build para Produção

npm run build

🔍 Lint

Para verificar qualidade de código:

npm run lint

🌍 Integração ThingSpeak

O projeto utiliza os seguintes dados do ThingSpeak:

• Channel ID: 3096127
• Field 1: Temperatura (°C)
• Field 2: Umidade (%)
• API Key: Configurada em Dashboard.jsx
• Timezone: America/Sao_Paulo

Atualização de Dados

• Intervalo de atualização: 60 segundos
• Último valor sempre exibido em destaque
• Histórico: últimos 100 registros

📊 Recursos

✅ Monitoramento em tempo real ✅ Gráficos interativos ✅ Estatísticas automáticas ✅ Análise de tendências ✅ Design responsivo ✅ Animações fluidas ✅ Status de conexão ✅ Formatação de data em português ✅ Tratamento de erros ✅ Interface moderna e intuitiva

📱 Responsividade

O projeto é totalmente responsivo, adaptando-se a:

• 📱 Celulares (mobile first)
• 📱 Tablets
• 💻 Desktops
• 🖥️ Large screens

🎨 Design

• Gradientes sofisticados
• Paleta de cores: Azuis e Verdes
• Ícones intuitivos
• Animações suaves
• Cards com sombra e hover effects
• Backdrop blur para elementos modais

📝 Estrutura de Arquivos

src/
├── pages/
│   └── Dashboard.jsx          # Componente principal
├── components/
│   └── dashboard/
│       ├── MetricCard.jsx     # Cartões de métrica
│       ├── TimeSeriesChart.jsx# Gráficos
│       └── StatusBanner.jsx   # Banner de status
├── App.jsx
├── main.jsx
├── index.css
└── App.css

🔐 Segurança

⚠️ Nota: A API Key do ThingSpeak está exposta no código. Para produção, considere:

• Usar variáveis de ambiente (.env)
• Implementar backend proxy
• Usar autenticação adequada

📄 Licença

Projeto desenvolvido para fins educacionais.