🌊 HIDROWAVE - Sistema de Automação Hidropônica

Dashboard Frontend - Next.js 13 + TypeScript + Supabase

📋 Índice

Sobre o Projeto
Estrutura do Projeto
Tecnologias
Instalação
Configuração
API Routes
Deploy

🎯 Sobre o Projeto

HIDROWAVE é um sistema completo de automação hidropônica que integra:

Frontend Next.js: Dashboard web responsivo para monitoramento e controle
Backend ESP32: Sistema Master-Slave com ESP-NOW para controle de relés
Banco de Dados Supabase: Armazenamento em tempo real de sensores e comandos
Sistema de Automação: Motor de decisão baseado em regras configuráveis

Funcionalidades Principais

✅ Dashboard em Tempo Real

Monitoramento de sensores (pH, TDS, EC, temperatura, umidade)
Gráficos históricos de dados
Status online/offline de dispositivos

✅ Controle de Relés

Controle Master (16 relés via PCF8574)
Controle Slave remoto via ESP-NOW (múltiplos dispositivos)
Nomeação personalizada de relés
Estados em tempo real

✅ Sistema de Automação

Criação de regras baseadas em condições
Motor de decisão inteligente
Histórico de execuções

✅ EC Controller

Cálculo automático de dosagem de nutrientes
Proporções configuráveis
PID adaptativo

📁 Estrutura do Projeto

HIDROWAVE-main/
│
├── 📄 README.md                    # Este arquivo
├── 📄 package.json                 # Dependências do projeto
├── 📄 next.config.js              # Configuração Next.js
├── 📄 tsconfig.json               # Configuração TypeScript
├── 📄 tailwind.config.js          # Configuração Tailwind CSS
├── 📄 vercel.json                 # Configuração Vercel
│
├── 📂 public/                     # Arquivos estáticos
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
│
├── 📂 src/
│   ├── 📂 app/                    # Next.js App Router
│   │   ├── 📄 layout.tsx          # Layout principal
│   │   ├── 📄 page.tsx            # Página inicial
│   │   ├── 📄 globals.css         # Estilos globais
│   │   │
│   │   ├── 📂 dashboard/          # Dashboard principal
│   │   │   └── page.tsx
│   │   │
│   │   ├── 📂 dispositivos/       # Gerenciamento de dispositivos
│   │   │   └── page.tsx
│   │   │
│   │   ├── 📂 automacao/           # Sistema de automação
│   │   │   └── page.tsx
│   │   │
│   │   ├── 📂 configuracao/        # Configurações
│   │   │   └── page.tsx
│   │   │
│   │   ├── 📂 ajuda/               # Ajuda
│   │   │   └── page.tsx
│   │   │
│   │   ├── 📂 login/               # Autenticação
│   │   │   └── page.tsx
│   │   │
│   │   └── 📂 api/                 # API Routes (Next.js)
│   │       ├── 📂 automation/
│   │       │   └── 📂 rules/
│   │       │       └── route.ts
│   │       │
│   │       ├── 📂 device/
│   │       │   └── 📂 register/
│   │       │       └── route.ts
│   │       │
│   │       ├── 📂 ec-controller/
│   │       │   └── 📂 config/
│   │       │       └── route.ts
│   │       │
│   │       ├── 📂 esp-now/
│   │       │   ├── command/route.ts
│   │       │   ├── command-acks/route.ts
│   │       │   ├── slave-relay-name/route.ts
│   │       │   └── slaves/route.ts
│   │       │
│   │       ├── 📂 relay/
│   │       │   └── route.ts
│   │       │
│   │       ├── 📂 relay-commands/
│   │       │   ├── master/route.ts
│   │       │   └── slave/route.ts
│   │       │
│   │       ├── 📂 relay-master/
│   │       │   ├── toggle/route.ts
│   │       │   └── toggle-array/route.ts
│   │       │
│   │       ├── 📂 relay-slaves/
│   │       │   └── toggle/route.ts
│   │       │
│   │       ├── relay-names/route.ts
│   │       ├── relay-states/route.ts
│   │       ├── hydro-data/route.ts
│   │       └── environment-data/route.ts
│   │
│   ├── 📂 components/              # Componentes React
│   │   ├── DeviceControlPanel.tsx  # Painel de controle de dispositivos
│   │   ├── RelayControl.tsx        # Controle de relés
│   │   ├── SensorCard.tsx         # Card de sensores
│   │   ├── SensorChart.tsx        # Gráficos de sensores
│   │   ├── NutrientControl.tsx    # Controle de nutrientes
│   │   ├── CreateRuleModal.tsx    # Modal de criação de regras
│   │   ├── RuleCard.tsx           # Card de regras
│   │   ├── RelayMapDiagram.tsx    # Diagrama de mapeamento de relés
│   │   ├── Sidebar.tsx            # Barra lateral
│   │   ├── LayoutContent.tsx     # Layout de conteúdo
│   │   └── ProtectedRoute.tsx     # Rota protegida
│   │
│   ├── 📂 contexts/                # React Contexts
│   │   ├── AuthContext.tsx        # Contexto de autenticação
│   │   └── SidebarContext.tsx     # Contexto da sidebar
│   │
│   └── 📂 lib/                     # Bibliotecas e utilitários
│       ├── supabase.ts            # Cliente Supabase
│       ├── esp32-api.ts           # API do ESP32
│       ├── esp-now-slaves.ts      # Gerenciamento de slaves ESP-NOW
│       ├── relay-slaves-api.ts    # API de relés slaves
│       ├── automation.ts          # Lógica de automação
│       ├── nutrition-plan.ts      # Plano de nutrição
│       ├── analytics.ts           # Analytics
│       └── settings.ts            # Configurações
│
├── 📂 scripts/                     # Scripts SQL
│   ├── SCHEMA_COMPLETO_VALIDADO.sql
│   ├── MIGRACAO_COMPLETA_RELAY_COMMANDS_V2.sql
│   ├── SCRIPT_COMPLETO_RPC_ATOMICO.sql
│   └── ... (outros scripts SQL)
│
└── 📂 Documentação/                # Documentação técnica
    ├── ANALISE_ARQUITETURAL_COMPLETA.md
    ├── FLUXO_COMPLETO_ESP32_SUPABASE.md
    ├── PLANO_INTEGRACAO_COMPLETA_MVP.md
    ├── PLANO_COMPLETO_MOTOR_DECISAO.md
    └── ... (outros arquivos .md)

🛠️ Tecnologias

Frontend

Next.js 13.5.6 - Framework React com App Router
React 18.2 - Biblioteca UI
TypeScript 5.0 - Tipagem estática
Tailwind CSS 3.3 - Framework CSS utilitário
Chart.js 4.4 - Gráficos e visualizações
React Hot Toast 2.4 - Notificações

Backend & Database

Supabase - Backend as a Service (PostgreSQL + Auth + Realtime)
Next.js API Routes - API REST serverless

Integração Hardware

ESP32 Master - Controlador principal (WiFi + ESP-NOW)
ESP32 Slaves - Dispositivos remotos (ESP-NOW)
PCF8574 - Expansor I2C para relés

🚀 Instalação

Pré-requisitos

Node.js 18+ (LTS recomendado)
npm ou yarn
Conta Supabase (projeto criado)
ESP32 Master configurado (WiFi + ESP-NOW)

Setup

# 1. Clone o repositório
git clone https://github.com/yhanusleverage/HIDROWAVE.git
cd HIDROWAVE/HIDROWAVE-main

# 2. Instale as dependências
npm install

# 3. Configure variáveis de ambiente
cp .env.example .env.local
# Edite .env.local com suas credenciais Supabase

# 4. Execute o servidor de desenvolvimento
npm run dev

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

⚙️ Configuração

Variáveis de Ambiente

Crie um arquivo .env.local na raiz do projeto:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Supabase Setup

Execute os scripts SQL em scripts/:

-- Setup completo do banco de dados
scripts/SCHEMA_COMPLETO_VALIDADO.sql

Tabelas principais:

device_status - Status de dispositivos (ESP32 Master + Slaves)
slave_relay_states - Estados de relés dos slaves
relay_commands - Comandos de relés (pending/executed)
decision_rules - Regras de automação
hydro_measurements - Medições hidropônicas (pH, TDS, EC)
environment_data - Dados ambientais (temperatura, umidade)

🔌 API Routes

ESP-NOW Endpoints

Method	Endpoint	Description
POST	`/api/esp-now/command`	Enviar comando ESP-NOW
GET	`/api/esp-now/slaves`	Listar slaves
POST	`/api/esp-now/slave-relay-name`	Renomear relé
GET	`/api/esp-now/command-acks`	ACKs de comandos

Relay Endpoints

Method	Endpoint	Description
POST	`/api/relay-master/toggle`	Toggle relé master
POST	`/api/relay-master/toggle-array`	Toggle array de relés
POST	`/api/relay-slaves/toggle`	Toggle relé slave
GET	`/api/relay-states`	Estados de todos os relés
GET	`/api/relay-names`	Nomes dos relés

Automation Endpoints

Method	Endpoint	Description
GET	`/api/automation/rules`	Listar regras
POST	`/api/automation/rules`	Criar regra
PUT	`/api/automation/rules/[id]`	Atualizar regra
DELETE	`/api/automation/rules/[id]`	Deletar regra

Data Endpoints

Method	Endpoint	Description
GET	`/api/hydro-data`	Dados hidropônicos
GET	`/api/environment-data`	Dados ambientais

📦 Deploy

Vercel (Recomendado)

# 1. Instale Vercel CLI
npm i -g vercel

# 2. Deploy
vercel

# 3. Configure variáveis de ambiente no dashboard Vercel

Live Demo: hidrowave.vercel.app

Outros Providers

Compatível com qualquer plataforma que suporte Next.js:

Netlify
AWS Amplify
Railway
Render

📊 Performance

Métrica	Valor	Observação
First Contentful Paint	< 1.5s	Otimizado com SSR
Time to Interactive	< 3s	Code splitting
Bundle Size	~200KB (gzipped)	Tree shaking
API Response Time	< 100ms (local)	Next.js API Routes
Real-time Sync	< 500ms (ESP-NOW)	Polling + optimistic UI

🔒 Segurança

✅ Autenticação: Supabase Auth (JWT, Email/Password)
✅ Autorização: Row Level Security (RLS) no Supabase
✅ API Protection: API Keys + CORS (Next.js API Routes)
✅ Input Validation: Zod schemas (type-safe validation)
✅ XSS Protection: React auto-escaping (sanitização automática)

📚 Documentação Adicional

Consulte os arquivos .md na raiz do projeto para documentação detalhada:

ANALISE_ARQUITETURAL_COMPLETA.md - Análise arquitetural completa
FLUXO_COMPLETO_ESP32_SUPABASE.md - Fluxo de dados ESP32 ↔ Supabase
PLANO_INTEGRACAO_COMPLETA_MVP.md - Plano de integração MVP
PLANO_COMPLETO_MOTOR_DECISAO.md - Motor de decisão
E muitos outros...

🤝 Contribuindo

Fork o projeto
Crie uma branch (git checkout -b feature/nova-feature)
Commit suas mudanças (git commit -m 'feat: adiciona nova feature')
Push para a branch (git push origin feature/nova-feature)
Abra um Pull Request

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👤 Autor

yhanusleverage

GitHub: @yhanusleverage
Backend: ESP-HIDROWAVE

🌐 Links

Live Demo: hidrowave.vercel.app
Backend ESP32: ESP-HIDROWAVE
Repositório: HIDROWAVE

Desenvolvido com ❤️ para automação hidropônica

⭐ Se este projeto foi útil, considere dar uma estrela!

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
.vscode		.vscode
public		public
scripts		scripts
src		src
.gitignore		.gitignore
ANALISE_ALINHAMENTO_DEVICECONTROLPANEL.md		ANALISE_ALINHAMENTO_DEVICECONTROLPANEL.md
ANALISE_APIS_LOCAIS_ESP32.md		ANALISE_APIS_LOCAIS_ESP32.md
ANALISE_BOTOES_RELES.md		ANALISE_BOTOES_RELES.md
ANALISE_PADROES_INDUSTRIA.md		ANALISE_PADROES_INDUSTRIA.md
ANALISE_PONTOS_FALHA_RPC_E_ALTERNATIVAS.md		ANALISE_PONTOS_FALHA_RPC_E_ALTERNATIVAS.md
ANALISE_SCHEMA_RELAY_COMMANDS.md		ANALISE_SCHEMA_RELAY_COMMANDS.md
ANALISE_TEMPOS_OTIMIZACOES.md		ANALISE_TEMPOS_OTIMIZACOES.md
ARQUITETURA_BD_OTIMIZADA.md		ARQUITETURA_BD_OTIMIZADA.md
ARQUITETURA_COMANDOS_COMPLETA.md		ARQUITETURA_COMANDOS_COMPLETA.md
ARRAY_VS_MULTIPLOS_CAMPOS.md		ARRAY_VS_MULTIPLOS_CAMPOS.md
COMO_ESP32_BUSCA_COMANDOS_E_REGRAS.md		COMO_ESP32_BUSCA_COMANDOS_E_REGRAS.md
COMO_ESP32_RECEBE_MENSAGENS.md		COMO_ESP32_RECEBE_MENSAGENS.md
COMPARACAO_RELAY_COMMAND_VS_DECISION_ENGINE.md		COMPARACAO_RELAY_COMMAND_VS_DECISION_ENGINE.md
COMPARACAO_SIMPLES_RELAY_VS_DECISION.md		COMPARACAO_SIMPLES_RELAY_VS_DECISION.md
CORRECAO_COMPLETA_PAINEL.md		CORRECAO_COMPLETA_PAINEL.md
CORRECAO_ERRO_PRIORITY_COMMAND.md		CORRECAO_ERRO_PRIORITY_COMMAND.md
CORRECOES_INCOERENCIAS_ESP32.md		CORRECOES_INCOERENCIAS_ESP32.md
CORRECOES_RPC_E_ESTADOS.md		CORRECOES_RPC_E_ESTADOS.md
DEBUG_SLAVES_NAO_APARECEM.md		DEBUG_SLAVES_NAO_APARECEM.md
DIAGNOSTICO_SLAVES_ESP_NOW.md		DIAGNOSTICO_SLAVES_ESP_NOW.md
DOCUMENTACAO_REGISTRO_ESP_NOW_SLAVES.md		DOCUMENTACAO_REGISTRO_ESP_NOW_SLAVES.md
ESP32_GET_POST_EXPLICACAO.md		ESP32_GET_POST_EXPLICACAO.md
EXPLICACAO_ACKS_COMPLETA.md		EXPLICACAO_ACKS_COMPLETA.md
EXPLICACAO_ACKS_E_FLUXO_DADOS.md		EXPLICACAO_ACKS_E_FLUXO_DADOS.md
EXPLICACAO_ATOMIC_SWAP_REST_API.md		EXPLICACAO_ATOMIC_SWAP_REST_API.md
EXPLICACAO_ORDENACAO_COMMAND_TYPE.md		EXPLICACAO_ORDENACAO_COMMAND_TYPE.md
EXPLICACAO_OTIMIZACAO_IMPLEMENTADA.md		EXPLICACAO_OTIMIZACAO_IMPLEMENTADA.md
EXPLICACAO_RELAY_NAMES_E_TIMEZONE.md		EXPLICACAO_RELAY_NAMES_E_TIMEZONE.md
EXPLICACAO_WEBSERVER_QUEUE_E_MAPEAMENTO.md		EXPLICACAO_WEBSERVER_QUEUE_E_MAPEAMENTO.md
FLUXO_COMPLETO_ACIONAMENTO_RELE.md		FLUXO_COMPLETO_ACIONAMENTO_RELE.md
FLUXO_COMPLETO_COMANDO_SLAVE_RELAY.md		FLUXO_COMPLETO_COMANDO_SLAVE_RELAY.md
FLUXO_COMPLETO_DECISION_ENGINE.md		FLUXO_COMPLETO_DECISION_ENGINE.md
FLUXO_COMPLETO_ESP32_SUPABASE.md		FLUXO_COMPLETO_ESP32_SUPABASE.md
FLUXO_CONEXAO_ESP32.md		FLUXO_CONEXAO_ESP32.md
FLUXO_STATUS_ONLINE_OFFLINE_SLAVES.md		FLUXO_STATUS_ONLINE_OFFLINE_SLAVES.md
FUNCAO_REGISTRO_SLAVE_ESP32.cpp		FUNCAO_REGISTRO_SLAVE_ESP32.cpp
GUIA_DEBUG_LOGS.md		GUIA_DEBUG_LOGS.md
GUIA_DEBUG_PASSO_A_PASSO.md		GUIA_DEBUG_PASSO_A_PASSO.md
GUIA_PRATICO_IMPLEMENTACAO.md		GUIA_PRATICO_IMPLEMENTACAO.md
IMPLEMENTACAO_ATOMIC_SWAP_ETAPAS.md		IMPLEMENTACAO_ATOMIC_SWAP_ETAPAS.md
IMPLEMENTACAO_AUTOMATICA_TRUSTED_SLAVES.md		IMPLEMENTACAO_AUTOMATICA_TRUSTED_SLAVES.md
IMPLEMENTACAO_DECISION_ENGINE_PASSO1.md		IMPLEMENTACAO_DECISION_ENGINE_PASSO1.md
IMPLEMENTACAO_TIMEZONE_CONFIG.md		IMPLEMENTACAO_TIMEZONE_CONFIG.md
MAPEAMENTO_COMPLETO_DADOS.md		MAPEAMENTO_COMPLETO_DADOS.md
MELHORIAS_FRONTEND_SLAVES.md		MELHORIAS_FRONTEND_SLAVES.md
MIGRACAO_RELAY_STATES_UNIFICADO.md		MIGRACAO_RELAY_STATES_UNIFICADO.md
MODIFICACAO_SENDRELAYCOMMAND_PRESERVANDO_FUNCIONALIDADE.md		MODIFICACAO_SENDRELAYCOMMAND_PRESERVANDO_FUNCIONALIDADE.md
ONDE_RPC_ENTRA_E_VERIFICAR_ESTADOS.md		ONDE_RPC_ENTRA_E_VERIFICAR_ESTADOS.md
PASSO_A_PASSO_RESOLVER.md		PASSO_A_PASSO_RESOLVER.md
PLANO_COMPLETO_MOTOR_DECISAO.md		PLANO_COMPLETO_MOTOR_DECISAO.md
PLANO_INTEGRACAO_COMPLETA_MVP.md		PLANO_INTEGRACAO_COMPLETA_MVP.md
PRIORIZACAO_COMANDOS_COMPLETA.md		PRIORIZACAO_COMANDOS_COMPLETA.md
PROPOSAL_REDESIGN_RELAY_COMMANDS.md		PROPOSAL_REDESIGN_RELAY_COMMANDS.md
README.md		README.md
RESUMO_ACKS_E_COMPONENTES.md		RESUMO_ACKS_E_COMPONENTES.md
RESUMO_IMPLEMENTACAO.md		RESUMO_IMPLEMENTACAO.md
RESUMO_MELHORIAS_FRONTEND.md		RESUMO_MELHORIAS_FRONTEND.md
RESUMO_PRIORIZACAO_COMANDOS.md		RESUMO_PRIORIZACAO_COMANDOS.md
RESUMO_SIMPLES_BOTOES.md		RESUMO_SIMPLES_BOTOES.md
SCHEMA_COMPLETO_RELAY_ARRAY_SEGREGADO.sql		SCHEMA_COMPLETO_RELAY_ARRAY_SEGREGADO.sql
SCHEMA_FORK_COMANDOS.sql		SCHEMA_FORK_COMANDOS.sql
SCHEMA_RELAY_MASTER_SLAVES.sql		SCHEMA_RELAY_MASTER_SLAVES.sql
SCHEMA_RELAY_STATES_UNIFICADO.sql		SCHEMA_RELAY_STATES_UNIFICADO.sql
check-db-schema.js		check-db-schema.js
debug-deployment.js		debug-deployment.js
eslint.config.mjs		eslint.config.mjs
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
postcss.config.mjs		postcss.config.mjs
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vercel.json		vercel.json

yhanusleverage/HIDROWAVE

Folders and files

Latest commit

History

Repository files navigation