Project Overview
Mansa is a comprehensive digital education platform designed specifically for Egyptian secondary school students and their teachers. The platform provides a complete learning management system (LMS) that enables teachers to publish video lectures, create timed exams and assignments, manage student subscriptions, and track academic performance — all through a server-driven architecture optimized for the Egyptian educational system.
This single-teacher, single-subject (Physics) platform enables teachers to publish video lectures with attachments, allows students to watch lectures and ask questions via threaded comments, provides auto-grading of timed exams with instant reports, manages assignments with multiple attempts, tracks subscriptions and payments, and delivers performance reports with charts and trends.
Problem & Solution
Problems Addressed
- Fragmented Digital Learning — Egyptian secondary students rely on scattered resources (YouTube playlists, PDFs, messaging groups) with no centralized platform
- Manual Assessment Overhead — Teachers spend excessive time manually grading tests and tracking student progress
- No Content Access Control — No way to gate premium educational content behind subscriptions
- Limited Student-Teacher Interaction — No structured system for students to ask questions under specific lectures
- Performance Tracking Gap — Students lack consolidated performance reports across exams and assignments
- Subscription Management Chaos — Teachers manually track who has paid each month with no record system
Solutions Provided
- Centralized LMS — Single platform for lectures, exams, assignments, and performance tracking
- Auto-Grading System — Instant grading for MCQ and True/False questions; streamlined interface for essay evaluation
- Subscription Gating — Grade-level pricing plans with monthly payment records and content access control
- Threaded Comments — Per-lecture discussion threads with reply support for organized Q&A
- Performance Dashboards — Recharts-powered reports with score trends, subject breakdowns, and submission history
- Student Management — Complete CRUD for students, enable/disable, promote to teacher role
Key Features
Core Features
Video Lectures
YouTube and Google Drive video embeds with thumbnail, description, and duration tracking. Lectures can be published or kept as drafts.
Lecture Attachments
Upload and serve PDF/image files up to 50MB per lecture via Supabase storage with signed URLs.
Threaded Comments
Nested discussion threads under lectures with reply support, delete functionality, and real-time notifications.
Timed Exams
Time-limited exams with MCQ, True/False, and Essay question types. Auto-grading for objective questions with instant reports.
Multi-Attempt Assignments
Untimed assignments with multiple attempts per student, unique constraint per attempt, and manual essay grading.
Subscription Management
Per-grade pricing plans, student payment tracking with monthly records, and content access gating based on subscription status.
Performance Reports
Recharts-powered dashboards with score trends, subject breakdowns, recent submissions, and period toggles for both students and teachers.
Role-Based Access
Separate teacher and student portals with tailored navigation, grade-level content filtering, and role-based permissions.
Push Notifications
Real-time alerts for new content, grading completion, comments, and replies with typed notification metadata.
Global Search
Full-text search across lectures, exams, assignments, and students with server-side filtering.
Student-Specific Features
Bookmarks
Client-side localStorage-based lecture saving for quick access to favorite content.
Grade-Level Filtering
Students automatically see only content matching their academic year (1st/2nd/3rd secondary).
Instant Reports
Immediate exam results with score breakdowns, correct answers, and performance summaries.
Teacher-Specific Features
Student Management
Add, edit, disable, delete students, and promote students to teacher role with full CRUD operations.
Content Builder
Intuitive interfaces for creating lectures, exams (with question bank), and assignments with drag-and-drop simplicity.
Analytics Dashboard
Overview stats, per-student performance analytics, and grade-level insights with exportable data.
Tech Stack
Frontend
Backend & Infrastructure
Design & Typography
Architecture Highlights
System Architecture
▶ mansa-platform
▶ Client Layer
▶ Web Application (Next.js 16)
▶ Student Portal
▶ Teacher Portal
▶ Middleware Layer
▶ API Layer 42 endpoints
▶ /api/auth/*
▶ /api/teacher/*
▶ /api/student/*
▶ Data Layer
▶ Supabase (PostgreSQL)
▶ Supabase Storage (S3)
Key Architectural Decisions
- Server-Driven Architecture — Every page is a Server Component; data fetching from URL search params. No useState for list data, no useEffect for data fetching. Mutations end with router.refresh().
- Supabase SSR Auth — Cookie-based session management with proxy.js middleware refreshing sessions on every request. Role-based redirects enforce portal boundaries.
- 42 RESTful API Routes — Organized by domain (teacher/*, student/*) with Server Components accessing Supabase directly via createClient().
- Content Access Control — Students filtered by grade_id, subscription status gating, and published/draft status for lectures.
- Grade & Subject System — 3 academic years with extensible subjects via management UI.
- Typed Notification System — Auto-created notifications with JSONB metadata for flexible payloads.
Challenges & Solutions
- Server-Driven Architecture Enforcement → Strict rules prohibit useState for list data and useEffect data fetching; all list pages read from searchParams
- Tailwind v4 Spacing Hijack → Custom spacing tokens break semantic values; use arbitrary values like max-w-[448px] instead
- Arabic RTL Layout → Full RTL with dir="rtl" in root layout; sidebar on the right; custom margin tokens (mr-sidebar: 280px)
- Exam Auto-Grading → MCQ uses 0-based index correct_answer; True/False uses "true"/"false" string; essay requires manual teacher grading
- Multi-Attempt Assignments → attempt_number column with unique constraints per (student, assignment, attempt)
- Subscription Gating → student_subscriptions.status checked in layout; pending/cancelled renders SubscriptionLockedPage component
- Grade-Level Content Isolation → All content queries filter by grade_id; students auto-assigned grade on registration
- Comment Threading → parent_id self-referential foreign key on lecture_comments; server renders nested replies
- License Protection → External Supabase project queries mansa_licenses table; 5-minute cached validation
- Notification Flood Prevention → notifyGradeStudents() utility batches notifications per grade, avoiding N+1 inserts
Screenshots
Database Schema Overview
▶ mansa_db
▶ Core Tables
▶ Content Tables
▶ Assessment Tables
▶ Business Tables
▶ System Tables
Future Improvements
Short-term (Q3-Q4 2026)
- Enhanced Exam Features — Random question ordering, question bank with categories, exam analytics
- Content Enrichment — Rich text editor for descriptions, in-video quizzes, lecture series grouping
- Performance Optimization — Database query optimization with composite indexes, SWR for client-side revalidation
Medium-term (Q1-Q2 2027)
- Multi-Subject Expansion — Full curriculum across all secondary subjects with subject-specific dashboards
- Communication Suite — WhatsApp Web.js integration, in-platform messaging, automated payment reminders
- Advanced Reports — PDF report export, comparative analytics across terms
Long-term (2027+)
- AI Integration — AI-powered question generation, plagiarism detection, personalized study recommendations
- Platform Scaling — Multi-teacher support, school/district-level administration, white-label platform
- Mobile & Offline — PWA with offline lecture viewing, native mobile apps, offline exam submission