Portal do Cliente - Energia Renovável ⚡

Projeto desenvolvido ao vivo durante o TRAE Talk - 27/02/2026 apresentado por Jefferson Alex para a comunidade TRAE.ai Brasil. ▶️ Link da Live

Este repositório contém o código-fonte do "Portal do Cliente", um estudo de caso demonstrando o poder do Trae AI (Modo SOLO) para construir aplicações completas do zero, desde a concepção até a implementação.

---

🚀 TRAE Friends @ Brasil

Venha participar da próxima edição do TRAE Friends @ Brasil, um evento essencial para entusiastas de IA e desenvolvedores, organizado pela Comunidade TRAE e pelos TRAE Fellows.

👉 Participe da comunidade: https://chat.whatsapp.com/LlX7OGmnbfRApslESePWcg

---

📚 Sobre o Projeto

O objetivo deste projeto é simular um portal para clientes de uma empresa de energia renovável, oferecendo transparência sobre medições e economia de energia.

Metodologia "Vibecoding"

O desenvolvimento seguiu o fluxo demonstrado na apresentação:

1. Estratégia > Código: Definição clara de regras e arquitetura antes de codificar.
2. Modo SOLO: Utilização do agente autônomo do Trae para gerar estrutura, layout e lógica.
3. Context is King: Uso intensivo de arquivos de contexto (.trae/rules, .trae/pbi, etc.).

Funcionalidades

• Dashboard:
  • KPIs: Geração Total (kWh), Economia Estimada (R$), Status do Sistema.
  • Gráficos: Geração diária (Linha) e Consumo mensal (Barras).
• Autenticação: Login seguro integrado ao Directus.
• Arquitetura Multi-contas: Suporte a múltiplos clientes via collection account.

---

🛠️ Arquitetura e Tecnologias

Frontend

• React + Vite: Performance e desenvolvimento rápido.
• TypeScript: Tipagem estática para robustez.
• Tailwind CSS: Estilização moderna e responsiva.
• Chart.js: Visualização de dados.

Backend (BaaS)

• Directus: Headless CMS servindo como Backend as a Service.
• Node.js (BFF): Camada intermediária para orquestração e segurança (opcional na fase final, mas implementada para controle).
• RBAC: Controle de acesso baseado em funções (Role customer com acesso restrito à sua account).

Documentação de Referência

Os arquivos que guiaram a IA durante o desenvolvimento estão na pasta .trae/:

• architecture.md: Padrões técnicos.
• pbi.md: Regras de negócio e critérios de aceite.
• estrutura_proposta.md: Plano de implementação passo a passo.

---

🏁 Como Executar

Pré-requisitos

• Node.js (v18+)
• npm

1. Frontend (Modo Mock ou Real)

O frontend pode rodar com dados simulados (Fase 1) ou conectado ao backend (Fase 2).

cd frontend
npm install
npm run dev

Acesse: http://localhost:5173

Credenciais de Teste (Mock):

• Email: cliente@exemplo.com
• Senha: password123

2. Backend (Opcional para Modo Mock)

Para a experiência completa conectada ao Directus:

cd backend
npm install
npm run dev

---

🧪 Testes

O projeto inclui uma estratégia de testes E2E com Playwright (conforme planejado na apresentação) para validar:

• Fluxo de Login.
• Renderização dos Gráficos.

---

👨‍💻 Autor

Jefferson Alex Bezerra

• TRAE Fellow | Product Designer | Vibecoder
• LinkedIn
• Website

---

Built with ❤️ and 🤖 using Trae AI