Skip to content

Commit b254d2e

Browse files
author
feperrella
committed
first commit
0 parents  commit b254d2e

38 files changed

Lines changed: 11059 additions & 0 deletions

‎.env.example‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Supabase Configuration
2+
#VITE_SUPABASE_URL=your_supabase_project_url
3+
#VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
4+
5+
# Optional: Service Role Key (for admin operations - keep secure!)
6+
# VITE_SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_key
7+
8+
# Example:
9+
# VITE_SUPABASE_URL=your_supabase_project_url
10+
# VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

‎.github/FUNDING.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# These are supported funding model platforms
2+
3+
github: feperrella
4+
buy_me_a_coffee: feperrella

‎.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
.env
26+
.claude
27+
.bolt

‎CLAUDE.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# Student Grade System
2+
3+
A React-based student grade management system built with TypeScript, Supabase, and Tailwind CSS.
4+
5+
## Overview
6+
7+
This is a full-stack web application for managing student grades with role-based access control. The system supports two user roles: administrators who can manage students, classes, and grades, and students who can view their own grades.
8+
9+
## Architecture
10+
11+
- **Frontend**: React 18 with TypeScript
12+
- **Backend**: Supabase (PostgreSQL database + Auth)
13+
- **Styling**: Tailwind CSS
14+
- **Routing**: React Router DOM v7
15+
- **Build Tool**: Vite
16+
- **Icons**: Lucide React
17+
18+
## Database Schema
19+
20+
The application uses 6 main tables for comprehensive educational management:
21+
22+
1. **auth.users** - Admin accounts only (email + password via Supabase Auth)
23+
2. **admin_profiles** - Admin profile data linked to auth.users
24+
3. **students** - Student accounts (name, username, password_hash) - standalone table
25+
4. **teachers** - Teacher management with active/inactive status
26+
5. **classes** - Course/class definitions with teacher assignments
27+
6. **tests** - Dynamic test definitions (numeric and formula types)
28+
7. **grades** - JSON-based student grades with flexible test storage
29+
30+
## Key Features
31+
32+
### Authentication & Authorization
33+
- **Admins**: Email/password authentication via Supabase Auth
34+
- **Students**: Username/password authentication via direct database lookup
35+
- Role-based access control with separate login methods
36+
- Protected routes based on user types
37+
- Simplified session management
38+
39+
### Admin Features
40+
- Manage students (CRUD operations)
41+
- Manage teachers (CRUD operations with active/inactive status)
42+
- Manage classes (CRUD operations with teacher assignments)
43+
- Manage tests (dynamic test creation with formula support)
44+
- Manage grades (CRUD operations with JSON-based storage)
45+
- Manage other admins (admin user management)
46+
- Dashboard with comprehensive statistics
47+
- Brazilian bimestre system support (4-period academic year)
48+
49+
### Student Features
50+
- View personal grades
51+
- Filter grades by year
52+
- Access only to own grade data
53+
54+
## Project Structure
55+
56+
```
57+
src/
58+
├── components/ # Reusable UI components
59+
│ ├── Navbar.tsx # Navigation bar with auth controls
60+
│ └── ProtectedRoute.tsx # Route protection wrapper
61+
├── contexts/ # React contexts
62+
│ └── AuthContext.tsx # Authentication state management
63+
├── hooks/ # Custom React hooks
64+
│ └── useAuth.ts # Authentication hook
65+
├── pages/ # Page components
66+
│ ├── Home.tsx # Landing page
67+
│ ├── Login.tsx # Login/signup page
68+
│ ├── Dashboard.tsx # Main dashboard
69+
│ ├── admin/ # Admin-only pages
70+
│ │ ├── Students.tsx # Student management
71+
│ │ ├── Teachers.tsx # Teacher management
72+
│ │ ├── Classes.tsx # Class management
73+
│ │ ├── Tests.tsx # Dynamic test management
74+
│ │ ├── Grades.tsx # Grade management
75+
│ │ └── Admins.tsx # Admin user management
76+
│ └── student/ # Student-only pages
77+
│ ├── Grades.tsx # Student grade view
78+
│ └── Profile.tsx # Student profile view
79+
├── services/ # API services
80+
│ └── supabase.ts # Supabase client and services
81+
├── types/ # TypeScript type definitions
82+
│ └── index.ts # Main type definitions
83+
└── App.tsx # Main application component
84+
```
85+
86+
## Environment Setup
87+
88+
Required environment variables:
89+
- `VITE_SUPABASE_URL` - Your Supabase project URL
90+
- `VITE_SUPABASE_ANON_KEY` - Your Supabase anonymous key
91+
92+
## Development Commands
93+
94+
- `npm run dev` - Start development server
95+
- `npm run build` - Build for production
96+
- `npm run lint` - Run ESLint
97+
- `npm run preview` - Preview production build
98+
99+
## Database Migration
100+
101+
Current migration files:
102+
- `supabase/migrations/20250808020000_complete_startup_migration.sql` - Complete database schema
103+
- `supabase/migrations/20250808030000_sample_data.sql` - Sample data for testing
104+
105+
Features:
106+
- Complete database schema with 6 tables
107+
- Dynamic test management system
108+
- JSON-based grade storage for unlimited tests
109+
- Formula-based tests with automatic calculations
110+
- Brazilian bimestre system support
111+
- RLS policies for security
112+
- Optimized indexes for performance
113+
114+
## Key Components
115+
116+
### AuthContext
117+
Manages authentication state and provides auth methods throughout the app.
118+
119+
### ProtectedRoute
120+
Wrapper component that restricts access based on authentication and role requirements.
121+
122+
### Services
123+
Centralized API services for:
124+
- Authentication (separate admin/student login methods)
125+
- Students (CRUD operations with username/password)
126+
- Teachers (CRUD operations with active/inactive status)
127+
- Classes (CRUD operations with teacher assignments)
128+
- Tests (dynamic test creation with numeric and formula types)
129+
- Grades (CRUD operations with JSON-based storage)
130+
- Admins (admin user management)
131+
132+
## Security Notes
133+
134+
- Uses Supabase Row Level Security (RLS)
135+
- Role-based access control implemented at both frontend and database levels
136+
- Secure authentication with JWT tokens
137+
- Environment variables for sensitive configuration
138+
139+
## Current Status
140+
141+
The application is fully functional with advanced features:
142+
- Dynamic test management through UI
143+
- JSON-based grade storage for unlimited flexibility
144+
- Formula tests with automatic calculation
145+
- Teacher management with active/inactive status
146+
- Brazilian bimestre system (4-period academic year)
147+
- Dashboard customization with test visibility controls
148+
- Primary grade system for main course averages
149+
- School-agnostic design for any educational institution

‎README.md‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
# Sistema de Gestão Educacional
2+
3+
Sistema web completo para gestão de estudantes, aulas e notas com diferentes perfis de usuário (administrador e estudante).
4+
5+
## 🚀 Tecnologias
6+
7+
- **Frontend**: React 18 + TypeScript + Vite
8+
- **Estilização**: TailwindCSS
9+
- **Roteamento**: React Router DOM
10+
- **Backend**: Supabase (Database + Auth)
11+
- **Ícones**: Lucide React
12+
13+
## 📋 Funcionalidades
14+
15+
### Área Pública
16+
- ✅ Página institucional com informações sobre o sistema
17+
- ✅ Login unificado para administradores e estudantes
18+
19+
### Área do Administrador
20+
- ✅ Dashboard com estatísticas avançadas
21+
- ✅ CRUD completo de estudantes
22+
- ✅ CRUD completo de professores (com status ativo/inativo)
23+
- ✅ CRUD completo de aulas/disciplinas (com atribuição de professores)
24+
- ✅ Sistema dinâmico de criação de provas (numérico e fórmula)
25+
- ✅ CRUD completo de notas (armazenamento JSON flexível)
26+
- ✅ Gerenciamento de outros administradores
27+
- ✅ Sistema de busca e filtros
28+
- ✅ Sistema bimestral brasileiro (4 períodos)
29+
30+
### Área do Estudante
31+
- ✅ Visualização das próprias notas
32+
- ✅ Filtro por ano letivo
33+
- ✅ Estatísticas de desempenho
34+
- ✅ Perfil do estudante
35+
- ✅ Interface responsiva e intuitiva
36+
- ✅ Sistema bimestral brasileiro
37+
38+
## 🏗️ Estrutura do Projeto
39+
40+
```
41+
src/
42+
├── components/ # Componentes reutilizáveis
43+
│ ├── Navbar.tsx # Barra de navegação
44+
│ └── ProtectedRoute.tsx # Proteção de rotas
45+
├── contexts/ # Context API
46+
│ └── AuthContext.tsx # Controle de autenticação
47+
├── hooks/ # Custom hooks
48+
│ └── useAuth.ts # Hook de autenticação
49+
├── pages/ # Páginas da aplicação
50+
│ ├── admin/ # Páginas do administrador
51+
│ │ ├── Students.tsx # Gerenciamento de estudantes
52+
│ │ ├── Teachers.tsx # Gerenciamento de professores
53+
│ │ ├── Classes.tsx # Gerenciamento de aulas
54+
│ │ ├── Tests.tsx # Gerenciamento dinâmico de provas
55+
│ │ ├── Grades.tsx # Gerenciamento de notas
56+
│ │ └── Admins.tsx # Gerenciamento de administradores
57+
│ ├── student/ # Páginas do estudante
58+
│ │ ├── Grades.tsx # Visualização de notas
59+
│ │ └── Profile.tsx # Perfil do estudante
60+
│ ├── Dashboard.tsx # Dashboard principal
61+
│ ├── Home.tsx # Página inicial
62+
│ └── Login.tsx # Página de login
63+
├── services/ # Serviços externos
64+
│ └── supabase.ts # Configuração e serviços do Supabase
65+
├── types/ # Definições de tipos TypeScript
66+
│ └── index.ts # Tipos principais
67+
└── App.tsx # Configuração das rotas
68+
```
69+
70+
## 🗄️ Banco de Dados
71+
72+
### Tabelas
73+
74+
1. **auth.users**: Contas de administradores (autenticação Supabase)
75+
2. **admin_profiles**: Perfis de administradores
76+
3. **students**: Dados dos estudantes (autenticação standalone)
77+
4. **teachers**: Professores com status ativo/inativo
78+
5. **classes**: Disciplinas/aulas com atribuição de professores
79+
6. **tests**: Definições dinâmicas de provas (numérico e fórmula)
80+
7. **grades**: Notas dos estudantes (armazenamento JSON flexível)
81+
82+
### Segurança (RLS)
83+
- Row Level Security habilitado em todas as tabelas
84+
- Estudantes só podem ver suas próprias notas
85+
- Administradores têm acesso total ao sistema
86+
87+
## ⚙️ Instalação e Configuração
88+
89+
### 1. Clone o repositório
90+
```bash
91+
git clone <repository-url>
92+
cd student-grade-system
93+
```
94+
95+
### 2. Instale as dependências
96+
```bash
97+
npm install
98+
```
99+
100+
### 3. Configure o Supabase
101+
102+
1. Crie uma conta no [Supabase](https://supabase.com)
103+
2. Crie um novo projeto
104+
3. Acesse **Settings > API** e copie:
105+
- Project URL
106+
- Anon public key
107+
108+
### 4. Configure as variáveis de ambiente
109+
```bash
110+
cp .env.example .env
111+
```
112+
113+
Edite o arquivo `.env` com suas credenciais do Supabase:
114+
```env
115+
VITE_SUPABASE_URL=your_supabase_project_url
116+
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
117+
```
118+
119+
### 5. Execute as migrations do banco
120+
1. Acesse o Supabase Dashboard
121+
2. Vá em **SQL Editor**
122+
3. Execute o conteúdo dos arquivos de migração na ordem:
123+
- `supabase/migrations/20250808020000_complete_startup_migration.sql`
124+
- `supabase/migrations/20250808030000_sample_data.sql`
125+
126+
### 6. Inicie o servidor de desenvolvimento
127+
```bash
128+
npm run dev
129+
```
130+
131+
## 👥 Credenciais de Demonstração
132+
133+
O sistema inclui dados de demonstração:
134+
135+
- **Administrador**: admin@escola.com / admin123
136+
- **Estudante**: estudante@escola.com / estudante123
137+
138+
## ✨ Recursos Avançados
139+
140+
### Sistema de Provas Dinâmico
141+
- Criação de provas através da interface administrativa
142+
- Tipos: numérico (nota direta) e fórmula (cálculo automático)
143+
- Sistema de ordem de exibição personalizável
144+
- Controle de visibilidade no dashboard do estudante
145+
146+
### Armazenamento JSON Flexível
147+
- Notas armazenadas em formato JSON
148+
- Suporte a quantidade ilimitada de provas
149+
- Sem necessidade de alterações no schema do banco
150+
151+
### Sistema Bimestral Brasileiro
152+
- Suporte a 4 períodos acadêmicos (bimestres)
153+
- Cálculo automático de médias
154+
- Cálculo automático de médias semestrais
155+
- Sistema de notas primárias e secundárias
156+
157+
## 🚀 Deploy para Produção
158+
159+
### Build da aplicação
160+
```bash
161+
npm run build
162+
```
163+
164+
### Deploy no cPanel
165+
1. Execute `npm run build`
166+
2. Faça upload da pasta `dist/` para o diretório `public_html/` do seu cPanel
167+
3. Configure as variáveis de ambiente no painel de controle
168+
4. Certifique-se de que o servidor suporta SPAs (Single Page Applications)
169+
170+
### Deploy no Netlify/Vercel
171+
1. Conecte seu repositório
172+
2. Configure as variáveis de ambiente
173+
3. Build command: `npm run build`
174+
4. Publish directory: `dist`
175+
176+
## 📱 Responsividade
177+
178+
O sistema é totalmente responsivo e funciona em:
179+
- 📱 Mobile (< 768px)
180+
- 📱 Tablet (768px - 1024px)
181+
- 💻 Desktop (> 1024px)
182+
183+
## 🔒 Segurança
184+
185+
- Autenticação via Supabase Auth
186+
- Row Level Security (RLS) em todas as tabelas
187+
- Proteção de rotas por perfil de usuário
188+
- Validação de dados no frontend e backend
189+
190+
## 🎨 Design System
191+
192+
- Cores principais: Blue, Indigo, Emerald, Purple
193+
- Fonte: Inter (padrão do Tailwind)
194+
- Ícones: Lucide React
195+
- Componentes: TailwindCSS + Custom components
196+
197+
## 📄 Licença
198+
199+
Este projeto está sob a licença MIT.

0 commit comments

Comments
 (0)