Aplicação web criada para ajudar famílias a acompanharem e reduzirem seu impacto ambiental, oferecendo um painel completo com consumo de recursos, metas sustentáveis, dicas personalizadas e um quiz educativo.
| Badge | Nome | Finalidade |
|---|---|---|
 |
React 18 | Criação da interface do usuário |
 |
Vite 5 | Ferramenta de build e desenvolvimento |
 |
Tailwind CSS | Estilização rápida e responsiva |
 |
React Router DOM | Navegação entre páginas |
 |
TanStack Query | Gerenciamento de estado e cache |
 |
Framer Motion | Animações fluidas e interativas |
 |
Lucide Icons | Ícones personalizáveis e animados |
 |
Recharts | Gráficos e visualizações de dados |
- Node.js 18 ou superior
- npm (instalado automaticamente com o Node.js)
Este projeto usa Supabase para armazenar dados em produção/online. Siga estes passos antes de rodar a aplicação localmente.
- Acesse https://app.supabase.com e faça login (ou crie uma conta).
- Clique em "New Project".
- Escolha um nome (por exemplo
eco-lar-demo) e senha do banco (anote!). - Escolha a região mais próxima e crie o projeto.
Observação: a criação pode levar alguns minutos.
- Abra o Supabase Console do seu projeto em https://app.supabase.com e selecione o projeto.
- No menu lateral, vá em Authentication → Settings (ou Authentication → Configurações).
- Role até a seção “Email” / “Email confirmations”.
- Desative a opção “Enable email confirmations” (ou “Confirm email” / “Require email confirmation”) — normalmente é um toggle.
- Salve as alterações.
- No Supabase Console do projeto, abra o menu
SQL→SQL editor. - Abra o arquivo
schema.sqldo repositório (na raiz do projeto) e copie seu conteúdo. - Cole o conteúdo no editor SQL do Supabase e clique em RUN.
- Verifique na aba
Table Editorse as tabelas foram criadas com sucesso (por exemplotb_user_infos,tb_consumption_records,tb_tips, etc.).
Observações importantes:
- Se aparecerem erros, leia a mensagem. Pode ser necessário criar extensões (ex:
pgcrypto) ou ajustar tipos usados noschema.sql.
- No repositório local, execute:
cp .env.example .env- Abra
.enve preencha com os valores do seu projeto Supabase:
VITE_SUPABASE_URL— URL do seu projeto (no Supabase Console → Settings → API → Project URL)VITE_SUPABASE_ANON_KEY— Anon/public key (Supabase Console → Settings → API → anon key)
Exemplo .env:
VITE_SUPABASE_URL=https://xxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
- Instale as dependências:
npm install- Inicie o servidor de desenvolvimento:
npm run dev- O Vite exibirá a URL disponível (por padrão
http://localhost:5173).
- Para gerar uma build de produção:
npm run build- Para testar a build localmente:
npm run previewsrc/
api/ # Cliente Supabase para integração backend
components/ # Componentes reutilizáveis (Button, Input, Sidebar, etc.)
context/ # Contexto de autenticação (AuthContext)
data/ # Dados estáticos (perguntas do quiz, dicas, etc.)
layout/ # Layout principal com Sidebar
pages/ # Páginas principais (Dashboard, Onboarding, Login, etc.)
utils/ # Utilidades, rotas e formatações
main.jsx # Ponto de entrada do React
App.jsx # Definição das rotas da aplicação
index.css # Estilos globais com Tailwind
A aplicação usa Supabase Auth para gerenciar sessões e ProtectedRoute para proteger rotas:
┌─────────────────────────────────────────┐
│ Usuário não autenticado │
│-----------------------------------------│
│ Tenta acessar /dashboard │
│ ↓ │
│ ProtectedRoute verifica │
│ ↓ │
│ Não há sessão válida? │
│ ↓ │
│ Redireciona para /login │
└─────────────────────────────────────────┘
Essas rotas redirecionam para /login se o usuário não estiver autenticado:
- ✅
/onboarding- Formulário de personalização (4 passos) - ✅
/dashboard- Painel principal com estatísticas - ✅
/add-record- Registrar consumo de recursos - ✅
/tips- Dicas personalizadas - ✅
/game- Quiz educativo com 50 perguntas - ✅
/profile- Perfil e configurações do usuário
Essas rotas são acessíveis sem autenticação:
- 🌍
/intro- Tela de boas-vindas com vídeo motivacional - 🔑
/login- Login e Signup com validação - 🏠
/- Redireciona para/intro
Gerencia o estado de autenticação da aplicação:
const { currentUser, loading, logout } = useAuth();
// currentUser: objeto do usuário ou null
// loading: boolean indicando carregamento
// logout(): função para deslogarComponente que envolve rotas protegidas:
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
// Comportamentos:
// - Se carregando: mostra spinner
// - Se não autenticado: redireciona para /login
// - Se autenticado: renderiza normalmente| Rota | Autenticação | Descrição |
|---|---|---|
/ |
❌ | Redireciona para /intro |
/intro |
❌ | Vídeo motivacional com slides |
/login |
❌ | Login/Signup com Supabase Auth |
/onboarding |
✅ | Formulário 4 passos (casa, transporte, energia, hábitos) |
/dashboard |
✅ | Painel com stats, gráficos e atividade recente |
/add-record |
✅ | Registrar consumo de água, energia, etc. |
/tips |
✅ | Dicas personalizadas baseadas no perfil |
/game |
✅ | Quiz com 10 perguntas sorteadas de 50 |
/profile |
✅ | Editar dados do usuário |
Armazena informações do usuário e status do onboarding:
- user_id (UUID, PK) - ID do usuário do Supabase Auth
- name (VARCHAR) - Nome do usuário
- household_size (SMALLINT) - Número de pessoas na casa
- transportation_type (VARCHAR) - Tipo de transporte principal
- has_solar_panels (BOOLEAN) - Tem painéis solares?
- heating_type (VARCHAR) - Tipo de aquecimento/energia
- residence_size (VARCHAR) - Tamanho da residência
- has_garden (BOOLEAN) - Tem jardim/horta?
- recycling_habit (VARCHAR) - Hábito de reciclagem
- monthly_income_range (VARCHAR) - Faixa de renda mensal
- has_seen_intro (BOOLEAN) - Já viu a introdução?
- onboarding_completed (BOOLEAN) - Completou onboarding?
Registros de consumo de recursos:
- id (UUID, PK)
- date (DATE) - Data do consumo
- category (VARCHAR) - "water", "energy", "waste"
- value (NUMERIC) - Valor consumido
- unit (VARCHAR) - Unidade de medida (ex: "L", "kWh", "kg")
- user_id (UUID, FK) - Referencia tb_user_infos
Dicas e conselhos sustentáveis:
- id (UUID, PK)
- title (VARCHAR) - Título da dica
- content (VARCHAR) - Descrição completa
- category (VARCHAR) - Categoria (água, energia, etc.)
- difficulty (VARCHAR) - Nível de dificuldade
- impact (VARCHAR) - Impacto ambiental
- implemented (BOOLEAN) - Usuário marcou como implementado?
- user_id (UUID, FK) - Referencia tb_user_infos
O quiz contém 50 perguntas sobre sustentabilidade. Cada sessão sorteará 10 perguntas aleatoriamente:
- Perguntas sobre economia de água
- Redução de energia
- Reciclagem e resíduos
- Mobilidade sustentável
- Consumo consciente
Estrutura de uma pergunta:
{
id: 1,
question: "Quanto de água um banho típico consome?",
options: ["10L", "25L", "50L", "100L"],
correct: 1,
explanation: "Um banho típico de 5 minutos consome cerca de 75-100L de água..."
}# Desenvolvimento - servidor com hot reload
npm run dev
# Build de produção
npm run build
# Preview da build (serve o dist localmente)
npm run previewSolução: Verifique se as políticas RLS do Supabase estão configuradas corretamente na tabela tb_user_infos.
-- Exemplo de política para permitir leitura/escrita própria
CREATE POLICY "Users can read own data"
ON tb_user_infos FOR SELECT
USING (auth.uid() = user_id);Solução: Verifique se o useEffect do AuthContext tem dependência vazia [] e não contém loading.
Solução: Abra o DevTools (F12) e verifique se há erros no console. Pode haver erro na chamada supabase.auth.getUser().
Solução: Verifique se está logado. A sidebar só aparece em rotas protegidas com <Layout />.
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
- Linconl Augusto - Gerente do projeto & UI/UX Designer
- Júnior Medeiros - Full Cycle
- Janssen Batista - Full Cycle
Sinta-se à vontade para entrar em contato via GitHub para dúvidas, sugestões ou colaborações!
Este projeto é de código aberto e está disponível sob a MIT License.