Learning operations · Real-time administration
Mutoon Admin
The internal operations platform behind a multilingual Islamic learning and memorization product.
Visit productRole
Frontend engineer from the application’s initial setup, responsible for broad administration architecture and major real-time workflows.
Scope
Learners, schools, instructors, authorization documents, admins, roles, and permissions · Books, exams, question banks, difficult words, audio, badges, certificates, and support content · Live hearing councils with video, real-time attendance, onsite QR flows, and certificate export · Reusable multilingual forms, validation, API operations, and admin patterns
Team
Two frontend developers, one backend developer, one QA engineer, a design team, and a project manager.
Challenge
Turning complexity into legible state.
Challenge
The product combined large administration surfaces with live learning sessions whose participant state, attendance, media, and certification had to stay coherent across multiple integrations.
Approach
I established reusable React/MUI administration patterns, integrated generated GraphQL operations with Hasura, and built the live-council experience around Jitsi, YouTube, Socket.IO, QR attendance, and certificate export.
Outcome
Operations teams could manage the learning lifecycle in one Arabic/English dashboard, while live councils supported both remote participation and onsite attendance workflows.
Selected contributions
- 01Developed the admin dashboard from its initial setup.
- 02Built teacher authorization with document review, approval/rejection, and categorization.
- 03Integrated GraphQL Code Generator and Hasura-backed queries and mutations.
- 04Implemented Socket.IO attendance without misrepresenting GraphQL queries as subscriptions.
Stack
Repository snapshot
561 of 655 commits in the inspected repository history were attributed to my identified Git identities.
The public Mutoon page is linked only for product context; I did not build that page.
Continue exploring
Mushaf Eqrra
Frontend integration for live recitation sessions, browser audio, verse-level feedback, and a six-language Quran reader.
View case study
Univerta
Broad admin and student workflows, plus an Nx dependency cleanup that restored hot reload and improved a controlled Lighthouse run from 78 to 92.
View case study
Adam Radar
Data-rich dashboards and a resilient custom-report workflow with polling, cancellation, pagination, notifications, and CSV export.
View case study