CLASS_FEATURE_GUIDE.md

Class Pages Feature - Implementation Guide

Overview

The Class Pages feature allows teachers to create and manage classes, each with a unique URL that students can access to join livestream sessions.

Database Setup

1. Run the Migration

Execute the SQL migration file to create the necessary tables:

-- Location: /supabase/migrations/add_classes_feature.sql
-- Run this in your Supabase SQL Editor

This will create:

• classes table - Stores class information
• class_enrollments table - Tracks student enrollment
• Updates teacher_sessions table with class_id column
• Creates the generate_class_code() function

Feature Components

New Components Created:

1. ClassManager - Main class management interface
2. ClassList - Displays teacher's classes
3. ClassCreator - Form to create new classes
4. ClassPage - Individual class management page
5. ClassPublicPage - Public page for students to access

New Routes:

• /teacher/classes - Teacher's class management page
• /teacher/class/:classId - Individual class page (teacher view)
• /class/:classCode - Public class page (student access)

How to Use

For Teachers:

1. Create a Class:

   • Log in as a teacher
   • Click "Manage Classes" button in the dashboard
   • Click "Create New Class"
   • Enter class name and optional description
   • A unique 6-character code will be generated automatically

2. Share Class URL:

   • Each class gets a unique URL: https://yourapp.com/class/ABC123
   • Click "Copy URL" to share with students
   • Students don't need to log in to access the class page

3. Create Sessions within a Class:

   • Navigate to a specific class
   • Click "Create New Session"
   • Enter session details and learning outcomes
   • The session will be associated with that class

4. Manage Sessions:

   • Start/stop sessions from the class page
   • View enrolled students
   • Monitor session activity

For Students:

1. Access Class Page:

   • Visit the class URL provided by the teacher
   • No login required

2. Join Sessions:

   • View all active sessions for the class
   • Click "Join Session" on any active session
   • Enter your name when prompted
   • Grant camera access to participate

Key Features

Security & Permissions:

• Teachers must be authenticated to create/manage classes
• Students can access class pages without authentication
• Each class has a unique, shareable code
• Sessions can optionally belong to a class

Backward Compatibility:

• Existing sessions without a class continue to work
• Legacy sessions show as "No Class" in the interface
• Teachers can create standalone sessions without a class

Data Structure:

// Class
{
  id: string;
  name: string;
  description?: string;
  class_code: string;  // Unique 6-char code
  teacher_id: string;
  is_active: boolean;
}

// Session (updated)
{
  id: string;
  title: string;
  learning_outcomes: string[];
  class_id?: string;  // Optional class association
  // ... other fields
}

Testing the Feature

1. Create a test class:

   • Navigate to Teacher Dashboard
   • Click "Manage Classes"
   • Create a new class
   • Note the generated class code

2. Test student access:

   • Open an incognito/private browser window
   • Navigate to /class/{CLASS_CODE}
   • Verify you can see the class without logging in

3. Create and join a session:

   • As teacher, create a session in the class
   • Start the session
   • As student (incognito), join the session from the class page

Troubleshooting

Common Issues:

1. "Class not found" error:

   • Verify the class code is correct (case-sensitive)
   • Check that the class exists in the database

2. Can't create classes:

   • Ensure you're logged in as a teacher
   • Check that the migration has been run

3. Sessions not showing in class:

   • Verify the session has class_id set
   • Ensure the session is active

Database Verification:

-- Check if tables exist
SELECT * FROM classes LIMIT 5;
SELECT * FROM class_enrollments LIMIT 5;

-- Check if class_id column exists in teacher_sessions
SELECT column_name FROM information_schema.columns
WHERE table_name = 'teacher_sessions' AND column_name = 'class_id';

Next Steps

Potential enhancements:

1. Add class analytics and reporting
2. Implement class schedules
3. Add student roster management
4. Create assignment/homework features
5. Add grading capabilities
6. Implement class announcements
7. Add file sharing within classes