Personal, published
Rattel
رتّل · my own app
A Quran and prayer companion, published on Google Play and the App Store.
- Google Play
- App Store
- rattel.appThe app’s website
Overview
Rattel is the app I build for myself and my family: a Mushaf reader and audio player, prayer times with azan alarms, Qibla, Hijri calendar, hadith and azkar, group khatmas, and a memorisation mode that records your recitation so you can compare it with the reciter.
In the recording
The home screen, the Mushaf, bookmarks, azkar, a khatma, the Hijri calendar, hadith, the names of Allah, Qibla and settings, then the app in Arabic and three of its colour themes.
Recorded from the real appRecorded from the real Flutter app in the iOS Simulator by an integration test that drives it. Offline, with sample bookmarks and a sample khatma on the device. The location is set to Cairo.
The repository is private. The Quran text on screen is the app’s own bundled data.
Screens
15 stills from the recording above. Select one to see it larger.
01Home: next prayer for Cairo, last page read, shortcuts 02Quran index by surah, juz or page 03Mushaf page 255, Ar-Ra‘d into Ibrahim 04Saved pages and hadith 05Azkar with progress per set 06A khatma: progress, streak and the week’s pages 07Hijri calendar with occasions 08The ninety-nine names 09Qibla compass 10Settings: Mushaf layout, Quran font, reciter, theme 11Home in Arabic, right to left 12The same Mushaf page with Arabic chrome 13Gold theme 14Blue theme 15Red theme
Reading the Mushaf
The reader lays out all 604 pages line by line from a bundled dataset in the Madani layout, rendered with the King Fahd Complex Hafs font. Pages turn right to left, bookmarks and the last page read persist, and the reader reports each page read to the khatma tracker through a callback wired in the router, so the reader never imports the khatma feature.
Native where Flutter stops
The home screen widgets are written natively: nine for Android in Kotlin on a shared base provider, and twelve for iOS in SwiftUI and WidgetKit. All of them read prayer times and Quran data the Flutter side shares with them.
The in-app browser blurs inappropriate images on the device. Three TensorFlow Lite models (an NSFW classifier, face detection and gender classification) run in a long-lived background isolate so scrolling stays smooth.
Group khatmas backend
Group khatmas need a server, so I wrote one in TypeScript with Fastify and MongoDB. Claiming a juz is atomic: two people can’t take the same part, and the loser gets a 409. Khatmas expire after seven days through a TTL index. It has rate limiting, integration tests against an in-memory MongoDB, and a Docker image for Cloud Run.
Architecture
Features never import each other. Shared models and state move down into common/; when that doesn’t fit, features are wired together in the composition root. A Dart script in CI rejects any import that points the wrong way. Twenty-eight test files include integration tests that drive the real app, one of which produces the store screenshots.
Stack
- Flutter
- Riverpod
- just_audio
- adhan_dart
- TensorFlow Lite
- Kotlin
- SwiftUI / WidgetKit
- Fastify
- MongoDB