> ## Documentation Index > Fetch the complete documentation index at: https://docs.pixlnext.tech/llms.txt > Use this file to discover all available pages before exploring further. # Project overview # Project Overview ## STO Education Platform The STO Education Platform is a comprehensive educational technology solution that provides a multi-role learning management system with integrated video conferencing, payment processing, real-time communication, and administrative tools. ## 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**: Whereby * **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 * **Whereby**: 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 (Whereby) * **Meeting Creation**: REST API-based meeting creation * **Room Management**: Dynamic room creation with host/participant URLs * **Webhooks**: Event handling for session lifecycle * **Embedded Experience**: Iframe-based video integration ### 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 ```bash theme={null} # 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_WHEREBY_API_KEY=your_whereby_api_key VITE_WHEREBY_SUBDOMAIN=your_whereby_subdomain # 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 ```bash theme={null} # Clone repository git clone 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