🚀 Heitor Missions - Sistema Gamificado Personalizado
Sistema completo de gamificação de missões personalizado para o Heitor com tema super-heróico do Flash, desenvolvido com React, TypeScript, Tailwind CSS e Firebase.
✨ Funcionalidades
👶 Painel Infantil (Heitor)
- Interface temática do Flash com cores vibrantes e animações
- Sistema XP/Gold com progressão de níveis
- Missões diárias organizadas por período (manhã, tarde, noite)
- Loja de recompensas com sistema de resgate
- Conquistas e badges para motivação
- Calendário de progresso visual
- Sons e animações para feedback positivo
- Modo offline com sincronização automática
👨💼 Painel Administrativo (Pai)
- Dashboard completo com métricas e estatísticas
- Gerenciamento de tarefas (criar, editar, ativar/desativar)
- Sistema de recompensas configurável
- Aprovação de resgates com notificações
- Controles administrativos (ajustar XP/Gold, reset)
- Histórico detalhado de atividades
- Sistema de notificações para comunicação
- Sincronização em tempo real com Firebase
🔥 Firebase Integration
- Authentication com email/senha
- Firestore para dados em tempo real
- Cloud Messaging para notificações push
- Offline support com cache local
- Sincronização automática entre dispositivos
🛠️ Tecnologias
- Frontend: React 18, TypeScript, Tailwind CSS
- Animações: Framer Motion
- Backend: Firebase (Auth, Firestore, Messaging)
- Build: Vite
- UI/UX: Design system customizado com tema Flash
- PWA: Service Worker para notificações
📦 Instalação
1. Clone o repositório
git clone https://github.com/seu-usuario/heitor-missions.git
cd heitor-missions
2. Instale as dependências
npm install
3. Configure o Firebase
3.1 Criar projeto Firebase
- Acesse Firebase Console
- Clique em "Adicionar projeto"
- Nome:
heitor-missions
- Desabilite Google Analytics (opcional)
3.2 Configurar Authentication
- No painel Firebase → Authentication
- Clique em "Começar"
- Na aba Sign-in method:
- Habilite Email/senha
- ✅ Marque "Permitir que os usuários se inscrevam"
- ❌ Desmarque "Exigir verificação de email"
3.3 Configurar Firestore Database
- Vá em Firestore Database
- Clique em "Criar banco de dados"
- Escolha Modo de teste
- Selecione localização: southamerica-east1 (São Paulo)
3.4 Configurar Web App
- No painel principal, clique no ícone </> (Web)
- Nome do app:
Heitor Missions Web
- ✅ Marque "Configurar Firebase Hosting"
- COPIE as configurações que aparecem
3.5 Configurar Cloud Messaging (Opcional)
- Vá em Cloud Messaging
- Clique em "Começar"
- Gere um Certificado de chave da Web (VAPID)
4. Configure as variáveis de ambiente
Copie o arquivo .env.example para .env e preencha com suas configurações do Firebase:
# Firebase Configuration
VITE_FIREBASE_API_KEY=sua_api_key_aqui
VITE_FIREBASE_AUTH_DOMAIN=seu_projeto.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=seu_projeto_id
VITE_FIREBASE_STORAGE_BUCKET=seu_projeto.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=seu_sender_id
VITE_FIREBASE_APP_ID=seu_app_id
VITE_FIREBASE_MEASUREMENT_ID=seu_measurement_id
# VAPID Key for Push Notifications (opcional)
VITE_FIREBASE_VAPID_KEY=sua_vapid_key_aqui
5. Execute o projeto
npm run dev
🎮 Como usar
Primeiro acesso:
- Acesse
http://localhost:5173
- Escolha o perfil (Heitor ou Pai)
- Com Firebase: Crie uma conta nova
- Sem Firebase: Use qualquer email/senha para demo
Contas de exemplo (modo demo):
Fluxo típico:
- Pai cria tarefas e recompensas
- Heitor completa missões e ganha XP/Gold
- Heitor resgata recompensas na loja
- Pai aprova os resgates
- Sistema sincroniza automaticamente entre painéis
🏗️ Arquitetura
Estrutura de pastas:
src/
├── components/ # Componentes React
│ ├── auth/ # Autenticação
│ ├── hero/ # Painel infantil
│ ├── parent/ # Painel administrativo
│ └── common/ # Componentes compartilhados
├── contexts/ # Context API (Estado global)
├── config/ # Configurações (Firebase)
├── types/ # Tipos TypeScript
└── styles/ # Estilos globais
Contextos principais:
- AuthContext: Autenticação e usuários
- DataContext: Tarefas, recompensas, progresso
- NotificationContext: Sistema de notificações
- SoundContext: Efeitos sonoros
- OfflineContext: Suporte offline
Tipos de dados:
- Task: Tarefas/missões
- Reward: Recompensas da loja
- UserProgress: Progresso do usuário (XP, Gold, nível)
- Achievement: Conquistas desbloqueáveis
- RewardRedemption: Resgates de recompensas
🎨 Design System
Cores:
- Flash Theme: Vermelho (#C8102E), Amarelo (#FFD700)
- Parent Theme: Azul (#2563EB), Cinza (#374151)
- Estados: Verde (sucesso), Vermelho (erro), Amarelo (aviso)
Tipografia:
- Infantil: Comic Neue (divertida)
- Adulto: Inter (profissional)
- Destaque: Poppins (títulos)
Componentes:
- Botões: Diferentes estilos para cada público
- Cards: Glassmorphism para painel infantil
- Animações: Framer Motion para transições suaves
- Responsivo: Mobile-first design
🔧 Scripts disponíveis
npm run dev # Servidor de desenvolvimento
npm run build # Build para produção
npm run preview # Preview do build
npm run lint # Linter ESLint
📱 PWA e Notificações
O sistema suporta:
- Instalação como PWA no dispositivo
- Notificações push via Firebase Cloud Messaging
- Funcionamento offline com cache local
- Sincronização automática quando volta online
🚀 Deploy
Netlify (Recomendado):
- Conecte o repositório no Netlify
- Configure as variáveis de ambiente
- Deploy automático a cada commit
Firebase Hosting:
npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy
🤝 Contribuição
- 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
📄 Licença
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para detalhes.
🎯 Roadmap
📞 Suporte
Desenvolvido com ❤️ especialmente para o Heitor tornar suas missões diárias uma aventura emocionante! ⚡
