The Future of Learning is Here. AI-Powered. Gamified. Limitless.
Lrnflix is a next-generation, AI-powered Learning Management System (LMS) built for the modern era. Designed with multi-tenancy, gamification, real-time collaboration, and cutting-edge artificial intelligence, Lrnflix transforms education from a passive experience into an interactive, personalized journey. Whether you're a student, teacher, or institution, Lrnflix provides the tools to create, manage, and experience learning like never before.
- AI Teaching Assistant — A context-aware Gemini-powered chatbot that acts as a personal tutor, answering questions, explaining concepts, and guiding students through their learning journey.
- AI Voice Tutor — Vapi-powered conversational AI integrated directly into lessons. Students can literally talk to their lessons and receive spoken, intelligent responses.
- Mastery Coach — AI-generated smart guides and summaries for every lesson, automatically created from lesson content to reinforce learning.
- AI Quiz Generator — Teachers upload a PDF, and our AI extracts and generates structured quiz questions automatically. No more manual question creation.
- AI Image Question Extractor — Upload images containing questions, and the AI converts them into structured digital quizzes.
- AI Action Mode for Teachers — Teachers can create courses, lessons, and quizzes simply by chatting with the AI. "Create a course about Python" — done.
- AI-Powered Lesson Summaries — Upload a PDF lesson plan, and the AI structures a comprehensive summary and smart guide instantly.
- Real-Time Multiplayer Quiz Battles — Challenge friends or match with random opponents in live quiz competitions. Real-time scoring, countdown timers, and leaderboards.
- Matchmaking System — Intelligent 1v1 matchmaking pairs students based on skill level for fair competitive quizzes.
- XP & Achievement System — Students earn experience points for completing lessons, quizzes, and challenges. Progress is tracked and visualized.
- Quiz Rooms — Create custom quiz rooms with categories, invite friends, and compete in structured tournaments.
- Subdomain-Based Tenants — Each teacher or institution gets their own branded space (
teacher.lrnflix.com). - Dynamic Branding — Per-tenant colors, logos, assets, and CSS theming that injects automatically.
- Tenant-Specific Mobile Apps — Build dedicated Android APKs for each tenant (e.g., Pola, Smart) with baked-in branding.
- Feature Toggles per Tenant — Admins can enable/disable features (voice assistant, chatbot, gamification, groups) per teacher or institution.
- Complete Course Management — Create unlimited courses with rich content, videos, attachments, quizzes, and chapters.
- Smart Content Organization — Group courses into chapters, reorder lessons with drag-and-drop, and manage enrollment codes.
- Student Analytics — Track student progress, quiz scores, lesson completion rates, and device usage in real-time.
- Device Limit Enforcement — Control how many devices each student can use (fingerprint-based tracking).
- Schedule & Google Meet Integration — Plan live sessions and auto-generate Google Meet links directly from the platform.
- Announcement System — Broadcast messages to all enrolled students.
- Wallet Code Generation — Teachers can generate and distribute wallet credit codes to students.
- Beautiful Course Catalog — Browse, filter, and enroll in courses with an immersive, Netflix-inspired interface.
- Progress Tracking — Visual progress bars, completed lesson markers, and quiz attempt history.
- Secure Video Player — YouTube integration with anti-download measures, view limits, and device restrictions.
- Q&A Forum — Ask questions anonymously (or publicly), get answers from teachers and peers, with nested replies and likes.
- Study Groups — Create or join study groups, chat in real-time, and collaborate on learning.
- Discussion Forums — Threaded discussions for deeper topic exploration.
- Digital Wallet — Students maintain a wallet balance for purchasing courses and chapters.
- Wallet Codes — Teachers generate redeemable codes; students apply them for instant credits.
- Invoices & Payments — Full invoice generation with multiple payment methods (InstaPay, Vodafone Cash, etc.).
- Mobile Payment Flow — Optimized payment experience for mobile browsers with redirect handling.
- Transaction History — Complete audit trail of all wallet debits, credits, and purchases.
- Role-Based Access Control — Granular permissions for students, teachers, and admins.
- Device Fingerprinting — FingerprintJS integration tracks and limits devices per student.
- Privacy Screen — Screenshot blocking on mobile for sensitive lesson content.
- Secure Authentication — Supabase Auth with JWT sessions, OTP phone verification, and OAuth (Google).
- Row-Level Security — PostgreSQL RLS policies ensure users only access their own data.
- Android & iOS — Built with Capacitor for true native performance.
- Deep Linking — OAuth and auth callbacks work seamlessly via
lrnflix://authdeep links. - Immersive Lesson Mode — Full-screen, distraction-free lesson viewing with privacy protection.
- Offline Awareness — Network status detection with user-friendly offline banners.
- Auto-Update Prompts — Version checking ensures users always have the latest app.
- Arabic-First (RTL) — Built for the MENA region with full Arabic support and RTL layouts.
- English Support — Toggle between Arabic and English instantly.
- Accessible UI — Built on Radix UI primitives with ARIA support and keyboard navigation.
- System Dashboard — Real-time statistics on users, courses, revenue, and enrollments.
- User Management — View all users, filter by role, and manage student devices.
- Tenant Management — Create, edit, and manage teacher tenants.
- Analytics & Charts — Visualize growth with Recharts-powered dashboards.
- App Settings — Tenant-scoped configuration system for platform-wide settings.
| Technology | Purpose |
|---|---|
| React 18 | UI framework with concurrent features |
| TypeScript 5.5 | Type-safe development |
| Vite 5.4 | Lightning-fast builds and HMR |
| Tailwind CSS 3.4 | Utility-first styling |
| shadcn/ui | Accessible, composable UI primitives |
| Framer Motion | Smooth animations and transitions |
| GSAP | Advanced timeline animations |
| React Three Fiber | 3D interactive elements |
| TanStack Query | Powerful server-state management |
| React Hook Form + Zod | Form handling and validation |
| Technology | Purpose |
|---|---|
| Supabase | PostgreSQL database, Auth, Storage, Realtime |
| PostgreSQL | Relational database with RLS |
| Supabase Edge Functions | Serverless Deno functions for webhooks and integrations |
| Node.js/Express | AI proxy server for secure API routing |
| Technology | Purpose |
|---|---|
| Google Gemini | Primary AI model for chat, summaries, and quiz generation |
| OpenRouter | AI provider fallback |
| Groq | High-speed AI inference fallback |
| Vapi | Conversational voice AI for lessons |
| AssemblyAI | Transcription services |
| Sentry | Error tracking and performance monitoring |
| Technology | Purpose |
|---|---|
| Capacitor 8 | Cross-platform native runtime |
| Android + iOS | Native mobile builds |
lrnflix/
├── ai-server/ # Node.js AI proxy server
│ ├── src/
│ │ ├── middleware/ # Auth, rate limiting, validation
│ │ ├── providers/ # Gemini, Groq, OpenRouter, WhatsApp
│ │ ├── routes/ # API endpoints
│ │ ├── services/ # AI orchestration, PDF processing
│ │ └── index.ts # Express entry point
├── supabase/
│ ├── functions/ # Edge Functions (Deno)
│ │ ├── ai-advisor/
│ │ ├── matchmaking/
│ │ ├── get-video-id/
│ │ ├── google-oauth-*/
│ │ └── ...
│ └── migrations/ # 90+ SQL schema migrations
├── scripts/
│ └── build-mobile.js # Capacitor mobile build orchestrator
├── tenants/ # Tenant configuration overrides
├── public/ # Static assets (tenant-branded)
└── src/
├── features/ # Feature-based modules
│ ├── admin/ # Admin dashboard & analytics
│ ├── auth/ # Authentication & authorization
│ ├── chatbot/ # AI sidebar chatbot
│ ├── courses/ # Course catalog & progress
│ ├── groups/ # Study groups & chat
│ ├── multiplayer/ # Real-time quiz battles
│ ├── questions/ # Q&A forum
│ ├── quizzes/ # Quiz creation & taking
│ ├── schedule/ # Calendar & Google Meet
│ ├── teacher/ # Teacher dashboard & tools
│ └── wallet/ # Wallet, codes, payments
├── shared/ # Cross-cutting concerns
│ ├── components/ # Layout, SEO, video players
│ ├── contexts/ # Auth, Tenant, Theme, Language
│ ├── hooks/ # Reusable custom hooks
│ ├── lib/ # Utilities, AI client, schemas
│ ├── routes/ # Route definitions
│ └── integrations/ # Supabase client & types
├── components/ui/ # 50+ shadcn/ui primitives
├── App.tsx # Root app component
└── main.tsx # Application entry point
<Sentry.ErrorBoundary>
<BrowserRouter>
<TenantProvider> {/* Resolves tenant from subdomain */}
<AuthProvider> {/* Manages Supabase auth session */}
<ThemeProvider> {/* Dark/light mode */}
<LanguageProvider> {/* Arabic/English, RTL/LTR */}
<ChatbotProvider> {/* AI chatbot state */}
<ToastProvider>
<App />
</ToastProvider>
</ChatbotProvider>
</LanguageProvider>
</ThemeProvider>
</AuthProvider>
</TenantProvider>
</BrowserRouter>
</Sentry.ErrorBoundary>All routes use React.lazy() for code splitting:
sharedRoutes— Public pages (landing, auth, legal)teacherRoutes— Teacher dashboard, course management, analyticsstudentRoutes— Student dashboard, courses, wallet, quizzesadminRoutes— Admin panel, user management, system settings
- Server State: TanStack Query (
useQuery,useMutation) - API Functions: Located in
src/features/<domain>/api/ - Realtime: Supabase subscriptions for chat, multiplayer, notifications
Lrnflix uses subdomain-based multi-tenancy:
main.lrnflix.com→ Main tenantpola.lrnflix.com→ Pola-branded experiencesmart.lrnflix.com→ Smart-branded experience
Each tenant has:
- Config:
tenants/<slug>/config.json - Assets:
public/<slug>/(logos, favicons, manifest) - Branding: Dynamic CSS variable injection (
--primary,--secondary, etc.) - Feature Flags: Tenant-specific toggles via
app_settingstable - Mobile Builds: Dedicated Android APKs per tenant
The TenantContext resolves the current tenant from the subdomain and injects branding data throughout the app.
- Node.js 18+
- npm or yarn
- Supabase project (with migrations applied)
- Clone the repository
git clone https://github.com/yourusername/lrnflix.git
cd lrnflix- Install dependencies
npm install- Set up environment variables
cp .env.example .envFill in your Supabase credentials and API keys:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_AI_SERVER_URL=http://localhost:3001
VITE_GEMINI_API_KEY=your_gemini_key-
Apply database migrations Run the SQL files in
supabase/migrations/via the Supabase dashboard or CLI. -
Start the AI proxy server
cd ai-server
npm install
npm start- Start the development server
npm run devThe app will be available at http://localhost:8080.
Create a .env file in the project root:
# Supabase (Required)
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_publishable_key
VITE_SUPABASE_PROJECT_ID=your_supabase_project_id
# Voice AI — Vapi (Required for voice tutoring)
VITE_VAPI_ACCOUNT_PUBLIC_KEY=your_vapi_public_key
VITE_VAPI_TUTOR_AGENT_ID=your_vapi_tutor_agent_id
VITE_VAPI_QUESTIONS_AGENT_ID=your_vapi_questions_agent_id
# AI Proxy Server (Required for secure AI routing)
VITE_AI_SERVER_URL=https://your-ai-server.com
VITE_AI_SERVER_KEY=your_ai_server_api_key
# AI Providers (Route through ai-server proxy in production)
VITE_GEMINI_API_KEY=your_gemini_api_key
# Sentry (Optional — configure via build environment)
VITE_SENTRY_DSN=your_sentry_dsnSecurity Note: AI provider API keys should be routed through the
ai-server/proxy in production to prevent extraction from client bundles.
# Main app
npm run build:mobile:main
# Tenant-specific apps
npm run build:mobile:pola
npm run build:mobile:smart--no-sentry— Disable Sentry for the build--no-gradle— Skip APK generation, sync assets only
npm run buildDeploy the dist/ folder to Netlify, Vercel, or any static host.
Use the Capacitor build scripts to generate signed APKs/AABs for Google Play Store.
| Integration | Purpose | Location |
|---|---|---|
| Supabase Auth | User authentication | src/shared/integrations/supabase/client.ts |
| Supabase DB | PostgreSQL database | supabase/migrations/ |
| Supabase Storage | File uploads | src/shared/hooks/useImageUpload.ts |
| Supabase Realtime | Live data sync | Group chat, multiplayer, notifications |
| Supabase Edge Functions | Serverless backend | supabase/functions/ |
| Gemini API | AI chat & image generation | src/shared/lib/ai/providers/geminiProvider.ts |
| OpenRouter | Multi-LLM routing | src/shared/lib/ai/providers/openrouterProvider.ts |
| Groq | Fast LLM inference | src/shared/lib/ai/providers/groqProvider.ts |
| Vapi | Voice AI tutoring | src/features/courses/components/lessons/VoiceTutor.tsx |
| AI Proxy | Secure AI API routing | ai-server/src/index.ts |
| Sentry | Error tracking | src/main.tsx |
| Script | Description |
|---|---|
npm run dev |
Start dev server on localhost:8080 |
npm run build |
Production build with Sentry source maps |
npm run build:dev |
Development-mode build |
npm run lint |
ESLint check (no typecheck configured) |
npm run build:mobile:main |
Build main tenant Android APK |
npm run build:mobile:pola |
Build Pola tenant Android APK |
npm run build:mobile:smart |
Build Smart tenant Android APK |
npm run mobile:restore |
Restore Android files to defaults |
Contributions are welcome! Please open an issue or submit a pull request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
- Google Gemini for powering the AI brain of Lrnflix
- Supabase for the rock-solid backend infrastructure
- shadcn/ui & Radix UI for the beautiful, accessible component foundation
- The open-source community for making projects like this possible
Made with passion for the future of education
Lrnflix — Learn Without Limits