A full-stack, live-only teaching platform for Gulf students, with a self-hosted LiveKit video backbone and a dedicated dashboard for every role in the business.
We are recording a voice-over walk-through of Afaq Academy's primary features, dashboard modules, and server operations. In the meantime, explore the complete system architecture details below!
A Next.js/TypeScript frontend and a Django REST Framework backend, both designed, built, and deployed end to end — not just the UI layer.
Runs its own Dockerized, Redis-backed LiveKit media server for live classes instead of depending on a third-party video platform — full control over recording, screen sharing, Krisp-based noise suppression, and participant limits.
Distinct Admin, Teacher, Student, and Academic Supervisor dashboards, each scoped to what that role actually needs — from platform-wide oversight down to a single student's own sessions and assignments.
A dedicated finance module calculates and distributes teacher earnings from completed sessions automatically, instead of a manual reconciliation process.
Teachers create and grade assignments linked to specific sessions; students track progress and completion from their own dashboard.
Rebranded and re-scoped from an earlier Islamic-studies/recorded-content concept (Lisan Al-Hekma) to a focused live-only model for a broader Gulf audience — a scope cut made on purpose, not a missing feature.
Hover or click on the system modules to inspect their dynamic interactions and roles within the product stack:
Role-aware routing for Admin/Teacher/Student/Supervisor dashboards, Redux Toolkit for state, Radix UI + Tailwind CSS for components.
Architecture mapping diagram is currently loaded in the interactive matrix viewer on the left.
Self-hosted a LiveKit SFU (Dockerized, Redis-backed for distributed room routing) instead of a managed video API — more operational responsibility, in exchange for full control over recording, screen sharing, per-session participant limits, and Krisp-based background noise suppression.
Gave each role its own dashboard route and scoped API surface, backed by a dedicated Django permissions app, so authorization logic lives in one place instead of being re-implemented per view.
Rebranded to Afaq Academy and cut scope deliberately — live-only sessions, a broader subject catalog, and simple monthly packages instead of a per-course catalog — removing the legacy pages and framing outright instead of leaving the product half-migrated between two identities.
Initial build: Next.js frontend, Django backend, and three learning modes (live, recorded, interactive) around an Islamic-studies-heavy catalog alongside languages and tech.
Rebranded to Afaq Academy, removed the legacy Islamic-studies feature pages and the recorded/interactive course modes, and rebuilt live-teaching around a broader-appeal subject catalog and monthly session packages.
Fixed a site-wide build failure and a global stylesheet bug that had left buttons and inputs unstyled across the whole site, redesigned the login/register/course pages to match the new brand, and cleaned up dead code left over from the pivot.
Interested in discussing similar system integrations?