Skip to content

CLAUDE.md

Latest commit

 

History

History
149 lines (120 loc) · 5.6 KB

CLAUDE.md

File metadata and controls

149 lines (120 loc) · 5.6 KB
Raw

Student Grade System

A React-based student grade management system built with TypeScript, Supabase, and Tailwind CSS.

Overview

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.

Architecture

  • Frontend: React 18 with TypeScript
  • Backend: Supabase (PostgreSQL database + Auth)
  • Styling: Tailwind CSS
  • Routing: React Router DOM v7
  • Build Tool: Vite
  • Icons: Lucide React

Database Schema

The application uses 6 main tables for comprehensive educational management:

  1. auth.users - Admin accounts only (email + password via Supabase Auth)
  2. admin_profiles - Admin profile data linked to auth.users
  3. students - Student accounts (name, username, password_hash) - standalone table
  4. teachers - Teacher management with active/inactive status
  5. classes - Course/class definitions with teacher assignments
  6. tests - Dynamic test definitions (numeric and formula types)
  7. grades - JSON-based student grades with flexible test storage

Key Features

Authentication & Authorization

  • Admins: Email/password authentication via Supabase Auth
  • Students: Username/password authentication via direct database lookup
  • Role-based access control with separate login methods
  • Protected routes based on user types
  • Simplified session management

Admin Features

  • Manage students (CRUD operations)
  • Manage teachers (CRUD operations with active/inactive status)
  • Manage classes (CRUD operations with teacher assignments)
  • Manage tests (dynamic test creation with formula support)
  • Manage grades (CRUD operations with JSON-based storage)
  • Manage other admins (admin user management)
  • Dashboard with comprehensive statistics
  • Brazilian bimestre system support (4-period academic year)

Student Features

  • View personal grades
  • Filter grades by year
  • Access only to own grade data

Project Structure

src/
├── components/           # Reusable UI components
│   ├── Navbar.tsx       # Navigation bar with auth controls
│   └── ProtectedRoute.tsx # Route protection wrapper
├── contexts/            # React contexts
│   └── AuthContext.tsx  # Authentication state management
├── hooks/               # Custom React hooks
│   └── useAuth.ts       # Authentication hook
├── pages/               # Page components
│   ├── Home.tsx         # Landing page
│   ├── Login.tsx        # Login/signup page
│   ├── Dashboard.tsx    # Main dashboard
│   ├── admin/           # Admin-only pages
│   │   ├── Students.tsx # Student management
│   │   ├── Teachers.tsx # Teacher management
│   │   ├── Classes.tsx  # Class management
│   │   ├── Tests.tsx    # Dynamic test management
│   │   ├── Grades.tsx   # Grade management
│   │   └── Admins.tsx   # Admin user management
│   └── student/         # Student-only pages
│       ├── Grades.tsx   # Student grade view
│       └── Profile.tsx  # Student profile view
├── services/            # API services
│   └── supabase.ts      # Supabase client and services
├── types/               # TypeScript type definitions
│   └── index.ts         # Main type definitions
└── App.tsx              # Main application component

Environment Setup

Required environment variables:

  • VITE_SUPABASE_URL - Your Supabase project URL
  • VITE_SUPABASE_ANON_KEY - Your Supabase anonymous key

Development Commands

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run lint - Run ESLint
  • npm run preview - Preview production build

Database Migration

Current migration files:

  • supabase/migrations/20250808020000_complete_startup_migration.sql - Complete database schema
  • supabase/migrations/20250808030000_sample_data.sql - Sample data for testing

Features:

  • Complete database schema with 6 tables
  • Dynamic test management system
  • JSON-based grade storage for unlimited tests
  • Formula-based tests with automatic calculations
  • Brazilian bimestre system support
  • RLS policies for security
  • Optimized indexes for performance

Key Components

AuthContext

Manages authentication state and provides auth methods throughout the app.

ProtectedRoute

Wrapper component that restricts access based on authentication and role requirements.

Services

Centralized API services for:

  • Authentication (separate admin/student login methods)
  • Students (CRUD operations with username/password)
  • Teachers (CRUD operations with active/inactive status)
  • Classes (CRUD operations with teacher assignments)
  • Tests (dynamic test creation with numeric and formula types)
  • Grades (CRUD operations with JSON-based storage)
  • Admins (admin user management)

Security Notes

  • Uses Supabase Row Level Security (RLS)
  • Role-based access control implemented at both frontend and database levels
  • Secure authentication with JWT tokens
  • Environment variables for sensitive configuration

Current Status

The application is fully functional with advanced features:

  • Dynamic test management through UI
  • JSON-based grade storage for unlimited flexibility
  • Formula tests with automatic calculation
  • Teacher management with active/inactive status
  • Brazilian bimestre system (4-period academic year)
  • Dashboard customization with test visibility controls
  • Primary grade system for main course averages
  • School-agnostic design for any educational institution