Mobile2025
Al-Tibyan Educational Center
Quran memorisation circles, run properly on a phone.
A companion app for a Quran teaching and memorisation centre, linking the centre, the student and the family. Students sit in circles that mirror the real ones, the teacher follows a student's recitation on a synchronised mushaf, and games and tests turn revision into something students return to.
- Production
- Al-Tibyan Educational Center
- Role
- Solo: mobile and backend
- Year
- 2025
- Status
- Shipped
- Format
- Mobile
- Built with
- React NativeTypeScriptFirebaseZustandReact QueryReanimatedSkiaRestyleZodPush Notifications
- Where to find it
- Google Play
Treatment
A memorisation centre runs on relationships that software usually flattens: a teacher knows where each student stopped, what they struggle with, and whether the family is following along. Most apps replace that with a progress bar.
يقوم مركز التحفيظ على علاقات تُسطّحها البرمجيات عادةً: المعلّم يعرف أين وقف كل طالب، وما يتعثّر فيه، وهل تتابع الأسرة أم لا. ومعظم التطبيقات تستبدل بذلك شريط تقدّم.
This one models the actual structure. Circles mirror the real ones. During recitation the teacher sees the same page the student is reading, so they can follow and correct without asking the student to say where they are. Parents get visibility into their child's progress without having to phone the centre.
يُنمذج هذا التطبيق البنية الفعلية. الحلقات تحاكي الحلقات الحقيقية. وأثناء التلاوة يرى المعلّم الصفحة نفسها التي يقرؤها الطالب، فيتابع ويصحّح دون أن يسأله أين وصل. ويطّلع الأهل على تقدّم أبنائهم دون الاتصال بالمركز.
The competitive layer, tests, games and a leaderboard, exists because revision is the part students skip, and it is the part that decides whether memorisation holds.
أما الطبقة التنافسية، الاختبارات والألعاب ولوحة المتصدرين، فموجودة لأن المراجعة هي ما يتجاوزه الطلاب، وهي ما يحدّد ثبات الحفظ.
Challenges
The mushaf is not a text view
The problem
Quranic text has to be laid out exactly. The page breaks, line breaks and word positions are fixed, and readers notice immediately when they are not. Standard text rendering reflows, which makes the page wrong.
What I did
Pages are drawn on a Skia canvas with fixed geometry rather than laid out as flowing text, so a page looks the same on every device size and word-level positions stay addressable for highlighting.
Two devices on the same page
The problem
The teacher's view has to track the student's position closely enough to be useful for correction. Polling is too slow to feel connected, and pushing every scroll event floods the connection in a circle of a dozen students.
What I did
Position updates are throttled and sent as a compact cursor rather than a stream of scroll events, and only within an active session. The teacher sees the current line quickly without the app maintaining a live channel per student all day.
Three roles, one codebase
The problem
Teacher, student and parent need genuinely different screens and different permissions, but shipping three apps for one centre is unreasonable to build and worse to maintain.
What I did
One app with role-derived navigation, and the permissions enforced server-side in security rules rather than by hiding buttons. A student who inspects the traffic still cannot read another circle's data.
Results
- Live on Google Play, serving a real centre's teachers, students and parents.متاح على Google Play، ويخدم معلّمي مركز حقيقي وطلابه وأولياء أمورهم.
- Synchronised recitation view for teacher-led correction.عرض تلاوة متزامن للتصحيح بقيادة المعلّم.
- Revision framed as tests, games and a leaderboard.المراجعة مصاغة كاختبارات وألعاب ولوحة متصدرين.
