​

Project Overview

​

STO Education Platform

​

Project Information

• Name: vite-react-typescript-starter
• Version: 3.3.4
• Type: Educational Technology Platform
• Primary Language: TypeScript
• Framework: React 18
• Build Tool: Vite
• Database: Supabase (PostgreSQL)
• Hosting: Vercel (Frontend), Supabase (Backend)

​

Core Features

​

1. Multi-Role User System

• Students: Course enrollment, live sessions, assignments, quizzes
• Teachers: Course creation, live teaching, student management, grading
• Parents: Student progress monitoring, communication with teachers
• Trainees: Teacher training courses and certification
• Admins: Platform management, user oversight, content moderation

​

2. Live Video Conferencing

• Provider: 100ms (HMS - Headless Media Stack)
• Features: Multi-participant sessions, screen sharing, recording
• Integration: Seamless integration with course sessions

​

3. Payment Processing

• Primary Provider: PayMob
• Features: Course payments, subscription management
• Security: PCI-compliant payment processing

​

4. Real-time Communication

• Chat System: SendBird integration
• Features: Direct messaging, group chats, file sharing
• Notifications: Real-time message notifications

​

5. Learning Management

• Courses: Comprehensive course creation and management
• Quizzes: Interactive quiz system with automated grading
• Assignments: File upload, grading, feedback system
• Exam Papers: Digital exam paper repository
• Mark Schemes: Teacher-created grading schemes

​

6. Administrative Tools

• Admin Dashboard: Comprehensive management interface
• User Management: Role-based access control
• Content Management: Editable page content system
• Analytics: PostHog integration for user behavior tracking

​

Technology Stack

​

Frontend

• React 18: Modern React with hooks and concurrent features
• TypeScript: Type-safe development
• Vite: Fast build tool and development server
• Tailwind CSS: Utility-first CSS framework
• React Router v6: Client-side routing
• React Context API: State management
• React Helmet: SEO and meta tag management

​

Backend

• Supabase: Backend-as-a-Service
  • PostgreSQL database
  • Edge Functions (Deno runtime)
  • Real-time subscriptions
  • Authentication
  • Storage

​

Third-Party Integrations

• 100ms: Video conferencing infrastructure
• SendBird: Real-time messaging platform
• PayMob: Payment processing
• PostHog: Product analytics
• LogRocket: Error tracking and session replay
• Mapbox: Address autocomplete
• Cloudinary: Image processing and storage
• Tawk.to: Customer support chat

​

Development Tools

• ESLint: Code linting
• TypeScript: Static type checking
• Vite: Build tooling
• Supabase CLI: Database and function management

​

Project Structure

/workspace
├── src/                           # Main application source
│   ├── api/                      # API utilities and endpoints
│   ├── assets/                   # Static assets (images, PDFs)
│   ├── components/               # Reusable React components
│   ├── config/                   # Configuration files
│   ├── context/                  # React context providers
│   ├── emails/                   # Email templates
│   ├── functions/                # Utility functions
│   ├── hooks/                    # Custom React hooks
│   ├── lib/                      # Library configurations
│   ├── pages/                    # Page components
│   ├── server/                   # Server-side utilities
│   ├── services/                 # Business logic services
│   ├── types/                    # TypeScript type definitions
│   ├── utils/                    # Utility functions
│   ├── App.tsx                   # Main application component
│   ├── main.tsx                  # Application entry point
│   └── routes.tsx                # Route definitions
├── public/                       # Public static assets
│   ├── assets/                   # Public assets
│   ├── models/                   # ML models for face detection
│   ├── sitemap*.xml             # SEO sitemaps
│   └── version.json              # Version information
├── supabase/                     # Backend configuration
│   ├── functions/                # Edge functions
│   ├── templates/                # Email templates
│   └── config.toml              # Supabase configuration
├── scripts/                      # Build and utility scripts
├── migrations/                   # Database migrations
├── docs/                         # Project documentation
└── Configuration files           # Various config files

​

Key Integrations

​

1. Supabase Integration

• Database: PostgreSQL with real-time subscriptions
• Authentication: JWT-based auth with role management
• Storage: File upload and management
• Edge Functions: Serverless backend logic
• Real-time: Live data synchronization

​

2. Video Conferencing (100ms)

• Token Generation: Secure token-based access
• Room Management: Dynamic room creation and management
• Webhooks: Event handling for session lifecycle
• Recording: Session recording capabilities

​

3. Payment Processing (PayMob)

• Payment Intents: Secure payment processing
• Webhooks: Payment confirmation handling
• Multiple Gateways: Support for various payment methods
• Subscription Management: Recurring payment handling

​

4. Communication (SendBird)

• Real-time Messaging: WebSocket-based communication
• File Sharing: Media and document sharing
• Push Notifications: Mobile and web notifications
• User Management: Channel and user management

​

5. Analytics & Monitoring

• PostHog: User behavior analytics
• LogRocket: Error tracking and session replay
• Custom Events: Business-specific event tracking

​

Development Setup

​

Prerequisites

• Node.js 18+
• npm or yarn
• Supabase CLI
• Git

​

Environment Variables

# Supabase Configuration
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# Payment Configuration
VITE_PAYMOB_SECRET_KEY=your_paymob_secret_key
VITE_PAYMOB_PUBLIC_KEY=your_paymob_public_key

# Video Conferencing
VITE_HMS_TOKEN_ENDPOINT=your_hms_token_endpoint

# Communication
VITE_SENDBIRD_APP_ID=your_sendbird_app_id
VITE_SENDBIRD_API_TOKEN=your_sendbird_api_token

# Analytics
VITE_POSTHOG_HOST=your_posthog_host
VITE_POSTHOG_KEY=your_posthog_key

# Mapbox
VITE_MAPBOX_ACCESS_TOKEN=your_mapbox_token

# App Configuration
VITE_APP_URL=your_app_url

​

Installation

# Clone repository
git clone <repository-url>
cd sto-education

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

​

Deployment

​

Frontend (Vercel)

• Automatic deployment from GitHub
• Environment variables configured in Vercel dashboard
• Custom domain configuration
• CDN distribution

​

Backend (Supabase)

• Edge functions deployed via Supabase CLI
• Database migrations via Supabase dashboard
• Environment variables in Supabase project settings

​

Database

• PostgreSQL hosted on Supabase
• Automated backups and point-in-time recovery
• Connection pooling for performance
• Real-time subscriptions

​

Security Features

​

Authentication

• JWT-based authentication via Supabase
• Role-based access control (RBAC)
• Secure session management
• Password reset functionality

​

Data Protection

• Row Level Security (RLS) policies
• Encrypted data transmission (HTTPS)
• Secure file upload and storage
• Input validation and sanitization

​

Payment Security

• PCI-compliant payment processing
• Tokenized payment data
• Secure webhook validation
• Fraud detection

​

Performance Optimizations

​

Frontend

• Code splitting and lazy loading
• Image optimization
• Bundle size optimization
• Service worker for caching

​

Backend

• Database indexing
• Query optimization
• Edge function caching
• CDN for static assets

​

Real-time Features

• WebSocket connections for chat
• Real-time database subscriptions
• Optimistic UI updates
• Connection management

​

Monitoring & Analytics

​

Error Tracking

• LogRocket for session replay
• Error boundary components
• Custom error handling
• Performance monitoring

​

User Analytics

• PostHog for user behavior
• Custom event tracking
• Conversion funnel analysis
• A/B testing capabilities

​

System Monitoring

• Application performance monitoring
• Database performance metrics
• API response time tracking
• User experience metrics

​

Future Enhancements

​

Planned Features

• Mobile application (React Native)
• Advanced analytics dashboard
• AI-powered content recommendations
• Enhanced video features
• Multi-language support

​

Technical Improvements

• Microservices architecture
• Advanced caching strategies
• Enhanced security measures
• Performance optimizations
• Scalability improvements