Sistema web completo para gestão de estudantes, aulas e notas com diferentes perfis de usuário (administrador e estudante).

• Frontend: React 18 + TypeScript + Vite
• Estilização: TailwindCSS
• Roteamento: React Router DOM
• Backend: Supabase (Database + Auth)
• Ícones: Lucide React

• ✅ Página institucional com informações sobre o sistema
• ✅ Login unificado para administradores e estudantes

• ✅ Dashboard com estatísticas avançadas
• ✅ CRUD completo de estudantes
• ✅ CRUD completo de professores (com status ativo/inativo)
• ✅ CRUD completo de aulas/disciplinas (com atribuição de professores)
• ✅ Sistema dinâmico de criação de provas (numérico e fórmula)
• ✅ CRUD completo de notas (armazenamento JSON flexível)
• ✅ Gerenciamento de outros administradores
• ✅ Sistema de busca e filtros
• ✅ Sistema bimestral brasileiro (4 períodos)

• ✅ Visualização das próprias notas
• ✅ Filtro por ano letivo
• ✅ Estatísticas de desempenho
• ✅ Perfil do estudante
• ✅ Interface responsiva e intuitiva
• ✅ Sistema bimestral brasileiro

src/
├── components/         # Componentes reutilizáveis
│   ├── Navbar.tsx     # Barra de navegação
│   └── ProtectedRoute.tsx # Proteção de rotas
├── contexts/          # Context API
│   └── AuthContext.tsx # Controle de autenticação
├── hooks/             # Custom hooks
│   └── useAuth.ts     # Hook de autenticação
├── pages/             # Páginas da aplicação
│   ├── admin/         # Páginas do administrador
│   │   ├── Students.tsx # Gerenciamento de estudantes
│   │   ├── Teachers.tsx # Gerenciamento de professores
│   │   ├── Classes.tsx  # Gerenciamento de aulas
│   │   ├── Tests.tsx    # Gerenciamento dinâmico de provas
│   │   ├── Grades.tsx   # Gerenciamento de notas
│   │   └── Admins.tsx   # Gerenciamento de administradores
│   ├── student/       # Páginas do estudante
│   │   ├── Grades.tsx   # Visualização de notas
│   │   └── Profile.tsx  # Perfil do estudante
│   ├── Dashboard.tsx  # Dashboard principal
│   ├── Home.tsx       # Página inicial
│   └── Login.tsx      # Página de login
├── services/          # Serviços externos
│   └── supabase.ts    # Configuração e serviços do Supabase
├── types/             # Definições de tipos TypeScript
│   └── index.ts       # Tipos principais
└── App.tsx            # Configuração das rotas

1. auth.users: Contas de administradores (autenticação Supabase)
2. admin_profiles: Perfis de administradores
3. students: Dados dos estudantes (autenticação standalone)
4. teachers: Professores com status ativo/inativo
5. classes: Disciplinas/aulas com atribuição de professores
6. tests: Definições dinâmicas de provas (numérico e fórmula)
7. grades: Notas dos estudantes (armazenamento JSON flexível)

• Row Level Security habilitado em todas as tabelas
• Estudantes só podem ver suas próprias notas
• Administradores têm acesso total ao sistema

git clone <repository-url>
cd student-grade-system

npm install

1. Crie uma conta no Supabase
2. Crie um novo projeto
3. Acesse Settings > API e copie:
   • Project URL
   • Anon public key

cp .env.example .env

Edite o arquivo .env com suas credenciais do Supabase:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

1. Acesse o Supabase Dashboard
2. Vá em SQL Editor
3. Execute o conteúdo dos arquivos de migração na ordem:
   • supabase/migrations/20250808020000_complete_startup_migration.sql
   • supabase/migrations/20250808030000_sample_data.sql

npm run dev

O sistema inclui dados de demonstração:

• Administrador: admin@escola.com / admin123
• Estudante: estudante@escola.com / estudante123

• Criação de provas através da interface administrativa
• Tipos: numérico (nota direta) e fórmula (cálculo automático)
• Sistema de ordem de exibição personalizável
• Controle de visibilidade no dashboard do estudante

• Notas armazenadas em formato JSON
• Suporte a quantidade ilimitada de provas
• Sem necessidade de alterações no schema do banco

• Suporte a 4 períodos acadêmicos (bimestres)
• Cálculo automático de médias
• Cálculo automático de médias semestrais
• Sistema de notas primárias e secundárias

npm run build

1. Execute npm run build
2. Faça upload da pasta dist/ para o diretório public_html/ do seu cPanel
3. Configure as variáveis de ambiente no painel de controle
4. Certifique-se de que o servidor suporta SPAs (Single Page Applications)

1. Conecte seu repositório
2. Configure as variáveis de ambiente
3. Build command: npm run build
4. Publish directory: dist

O sistema é totalmente responsivo e funciona em:

• 📱 Mobile (< 768px)
• 📱 Tablet (768px - 1024px)
• 💻 Desktop (> 1024px)

• Autenticação via Supabase Auth
• Row Level Security (RLS) em todas as tabelas
• Proteção de rotas por perfil de usuário
• Validação de dados no frontend e backend

• Cores principais: Blue, Indigo, Emerald, Purple
• Fonte: Inter (padrão do Tailwind)
• Ícones: Lucide React
• Componentes: TailwindCSS + Custom components

Este projeto está sob a licença MIT.