Projeto desenvolvido para Disciplina de Engenharia de Software da Universidade Federal de Pernambuco.
Frontend da plataforma MentorIA, uma interface moderna e responsiva para o tutor digital inteligente que revoluciona a forma como estudantes se preparam para o ENEM e outros vestibulares.
✅ Este repositório corresponde ao frontend. O backend está disponível aqui.
- Proporcionar uma experiência de usuário intuitiva e envolvente
- Facilitar o acesso às funcionalidades educacionais avançadas
- Criar uma interface responsiva e acessível
- Implementar gamificação visual para motivar o aprendizado
- 🔐 Sistema de Autenticação - Login/Registro com Supabase
- 🧠 Teste de Nivelamento Interativo - Interface para 26 questões
- Interface de Treinamento Dinâmico - Questões adaptativas
- Dashboard de Estatísticas Visual - Gráficos e métricas
- 🏆 Sistema de Gamificação - Progresso, conquistas e sequências
- 📱 Design Responsivo - Funciona em desktop, tablet e mobile
- 🎨 UI/UX Moderna - Componentes shadcn/ui + Tailwind CSS
- ⚡ Performance Otimizada - Lazy loading e cache inteligente
plaintext src/ ├── components/ # Componentes React reutilizáveis │ ├── ui/ # Componentes base (shadcn/ui) │ └── ... # Componentes específicos da aplicação ├── contexts/ # Contextos React (Auth, etc.) ├── hooks/ # Custom hooks ├── lib/ # Serviços e utilitários ├── pages/ # Páginas da aplicação ├── integrations/ # Integrações externas (Supabase) └── main.tsx # Ponto de entrada
- Component-Based Architecture - Componentes reutilizáveis
- Context API - Gerenciamento de estado global
- Custom Hooks - Lógica reutilizável
- Service Layer - Abstração de APIs
- Responsive Design - Mobile-first approach
| Camada | Tecnologias |
|---|---|
| Framework | React 18 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS |
| UI Components | shadcn/ui + Radix UI |
| State Management | React Context + Custom Hooks |
| HTTP Client | Axios |
| Routing | React Router DOM |
| Forms | React Hook Form + Zod |
| Charts | Recharts |
| Icons | Lucide React |
| Authentication | Supabase Auth |
- Node.js (v18+)
- npm ou yarn
- Backend MentorIA rodando
-
Clone o repositório: bash git clone https://github.com/gabrielalimasotero/MentorIA-Frontend.git cd MentorIA-Frontend
-
Instale as dependências: bash npm install
-
Configure o ambiente: bash cp env.example .env
-
Configure as variáveis de ambiente: env VITE_API_URL=http://localhost:3000/api VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Inicie o servidor de desenvolvimento: bash npm run dev
A aplicação estará disponível em: http://localhost:5173
bash npm run dev # Desenvolvimento com hot reload npm run build # Build para produção npm run build:dev # Build para desenvolvimento npm run preview # Preview da build npm run lint # Linting
- LoginPage - Interface de login
- AuthContext - Gerenciamento de estado de autenticação
- ProtectedRoute - Proteção de rotas
- LevelingTest - Interface do teste de 26 questões
- DiagnosticTest - Teste diagnóstico
- ResultsReview - Revisão de resultados
- TrainingInterface - Interface principal de treinamento
- DynamicQuestions - Questões adaptativas
- SubjectTrails - Trilhas de estudo por matéria
- StatisticsPage - Dashboard completo de estatísticas
- EnhancedDiagnosticResults - Resultados detalhados
- PersonalizedLearningPaths - Trilhas personalizadas
- Header - Cabeçalho da aplicação
- Dashboard - Dashboard principal
- OptimizedLoading - Componentes de loading
- DailyGoalComplete - Conquistas diárias
- Primary: Blue (#3B82F6)
- Success: Green (#10B981)
- Warning: Orange (#F59E0B)
- Error: Red (#EF4444)
- Neutral: Gray (#6B7280)
- Font Family: Inter
- Weights: 400, 500, 600, 700
- Sizes: 12px, 14px, 16px, 18px, 20px, 24px, 32px
- Button - Botões com variantes
- Card - Cards informativos
- Input - Campos de entrada
- Modal - Modais e diálogos
- Progress - Barras de progresso
- Badge - Badges e tags
typescript // tailwind.config.ts export default { theme: { extend: { colors: { primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a', } } } } }
env
VITE_API_URL=http://localhost:3000/api
VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_ENABLE_ANALYTICS=false VITE_ENABLE_DEBUG=true
typescript // Exemplo de login const { login } = useAuth(); await login({ email, password });
typescript // Carregar sessão de questões const session = await dynamicQuestionsService.getSession(20);
typescript // Obter estatísticas do usuário const stats = await StatisticsService.getUserStatistics();
bash npm run test # Testes unitários npm run test:e2e # Testes end-to-end npm run test:coverage # Com cobertura
- Unitários: Componentes e hooks
- Integração: Fluxos de autenticação
- E2E: Fluxos completos do usuário
bash npm run build
- Conecte o repositório ao Vercel
- Configure as variáveis de ambiente
- Deploy automático a cada push
- Conecte o repositório ao Netlify
- Configure o build command: npm run build
- Configure o publish directory: dist
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Grid System - Flexbox e CSS Grid
- Typography - Escala responsiva
- Spacing - Sistema de espaçamento adaptativo
- Code Splitting - Lazy loading de componentes
- Image Optimization - Otimização automática
- Bundle Analysis - Análise de tamanho do bundle
- Caching - Cache inteligente de dados
- Lighthouse Score: > 90
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Fork o repositório
- Crie uma branch: git checkout -b feature/nova-funcionalidade
- Faça commit: git commit -m 'feat: adiciona nova funcionalidade'
- Envie a branch: git push origin feature/nova-funcionalidade
- Crie um Pull Request
- ESLint para linting
- Prettier para formatação
- TypeScript para tipagem
- Conventional Commits para commits
- shadcn/ui - Documentação dos componentes
- Radix UI - Primitivos acessíveis
- Tailwind CSS - Framework CSS
- Antonio Gabriel - GitHub
- Gabriela Lima Sotero - GitHub
- Luan Romancini - GitHub
- Wilton Sales - GitHub
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
MentorIA Frontend - Interface moderna para educação inteligente.