CPS PE Learning Assistant

A React-based video analysis application that integrates with Supabase and AI services for educational livestream recording and analysis. This application helps PE teachers provide real-time feedback to students during physical education activities.

Features

• Live Stream Recording: Capture student performances in real-time
• AI-Powered Analysis: Get instant feedback using Gemini AI for video analysis
• Student/Teacher Modes: Separate interfaces for students and teachers
• Class Management: Create and manage classes with unique join codes
• Performance Tracking: Track student progress over time with detailed analytics
• Session Analysis: Review and analyze recorded sessions with timestamped feedback
• Namelist Upload: Upload class rosters via CSV for easy student management

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Styling: Tailwind CSS with shadcn/ui components
• Backend: Supabase (PostgreSQL database, authentication, edge functions)
• AI Integration: Google Gemini API
• Deployment: Netlify-ready

Prerequisites

Before you begin, ensure you have:

• Node.js 18+ installed
• A Supabase account (Sign up here)
• A Google AI API key for Gemini (Get one here)

Getting Started

1. Clone the Repository

git clone <your-repo-url>
cd cps-pe-strings

2. Install Dependencies

npm install

3. Set Up Supabase

1. Create a new project at supabase.com
2. Go to Project Settings → API
3. Copy your project URL and anon/public key

4. Configure Environment Variables

1. Copy the example environment file:

   cp .env.example .env

2. Open .env and add your Supabase credentials:

   VITE_SUPABASE_URL=https://your-project-id.supabase.co
   VITE_SUPABASE_ANON_KEY=your-supabase-anon-key-here

5. Set Up Database Schema

You'll need to create the following tables in your Supabase database:

Core Tables

• teacher_sessions - Stores session information
• student_analyses - Stores AI analysis results
• classes - Manages class information
• class_enrollments - Tracks student enrollments
• class_namelists - Stores class rosters

SQL Schema

Run the database migration scripts in your Supabase SQL editor. (Database schema documentation coming soon)

6. Deploy Supabase Edge Functions

The application uses Supabase Edge Functions for AI analysis:

1. Install the Supabase CLI:

   npm install -g supabase

2. Link your project:

   supabase link --project-ref your-project-id

3. Set your Google AI API key as a secret:

   supabase secrets set GOOGLE_AI_API_KEY=your-gemini-api-key-here

4. Deploy the edge functions:

   supabase functions deploy gemini-analysis

7. Run the Development Server

npm run dev

The application will be available at http://localhost:8080

Deployment

Deploy to Netlify

1. Push your code to GitHub
2. Connect your repository to Netlify
3. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
4. Add environment variables in Netlify:
   • Go to Site Settings → Build & Deploy → Environment Variables
   • Add VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY
5. Deploy!

The environment variables will be automatically injected during the build process.

Project Structure

src/
├── components/           # React components
│   ├── ui/              # shadcn/ui component library
│   ├── StudentMode.tsx  # Student interface
│   ├── TeacherMode.tsx  # Teacher interface
│   └── ...              # Other components
├── contexts/            # React context providers
├── hooks/               # Custom React hooks
├── lib/                 # Utility functions and configs
│   ├── supabase.ts     # Supabase client configuration
│   └── ...             # Other utilities
├── pages/              # Route components
└── vite-env.d.ts       # TypeScript environment definitions

Available Scripts

• npm run dev - Start development server (port 8080)
• npm run build - Build for production
• npm run build:dev - Build for development
• npm run lint - Lint code
• npm run preview - Preview production build

Key Routes

• / - Main application (Index page)
• /student/:sessionId - Student mode interface
• /student/analysis/:sessionId/:studentName - Individual student analysis
• /class/:classCode - Public class page (student access)
• /teacher/classes - Teacher's class management
• /teacher/class/:classId - Individual class page (teacher view)

Security Notes

• The Supabase anon key is safe to expose in client-side code
• Security is enforced through Row Level Security (RLS) policies in Supabase
• Never commit your .env file to version control
• The service role key should NEVER be used in client-side code

Database Security Checklist

Before going to production, ensure you:

• Enable Row Level Security (RLS) on all tables
• Set up proper authentication rules
• Configure database policies for student/teacher access
• Review and test all security policies
• Set up proper CORS settings in Supabase

Troubleshooting

"Missing Supabase environment variables" error

• Ensure your .env file exists and contains the correct values
• Restart the development server after changing .env

TypeScript errors about import.meta.env

• The src/vite-env.d.ts file defines these types
• Restart your TypeScript server in your IDE

Edge function deployment issues

• Ensure you've set the GOOGLE_AI_API_KEY secret in Supabase
• Check function logs in the Supabase dashboard

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

[Add your license here]

Support

For issues and questions, please open an issue on GitHub.