Building Ibadah: A Full Islamic Companion for iOS
"I wanted an Islamic companion that felt like it was made for iOS, not just ported to it."
Ibadah is a full Islamic companion app for iOS: prayer times, Quran reading with audio, hadith collections, duas, prayer tracking and analytics, a tasbeeh counter, Arabic learning, and an on-device verse identification feature called Tarteel. This post covers the thinking behind it, the design system, and the engineering that made each feature work at the quality level I wanted.
What It Does
Eight features, each built to a finish. Not a feature list padded out to fill a store page. Every screen has a reason to exist.
Accurate five-daily prayer times calculated locally using Adhan.js, respecting your GPS location and preferred calculation method. No network required.
Log each prayer and build a streak. Analytics visualize patterns over time so you can see where consistency is strong and where it needs work.
Browse all 114 surahs, read verse by verse or page by page in Mushaf layout, listen to recitation from your chosen reciter, and annotate verses with personal notes.
Search across major hadith books. Bookmark the ones that resonate. A daily hadith surfaces on the home screen every morning.
A curated collection of authentic supplications organized by occasion, from morning and evening adhkar to travel and gratitude.
A tactile bead counter rendered on a Skia canvas. The beads move, the haptics respond. It feels like holding something physical.
Structured lessons for the Arabic alphabet with letter detail modals, pronunciation guides, and a progress tracker that persists across sessions.
Soundhound for Quran. Listen to any recitation and identify the verse in real time using an on-device ONNX speech recognition model. No data leaves the device.
The Design System
Before writing a single screen I defined the visual language. Color, typography, surfaces, and motion all needed to work as a coherent system, not as individual decisions made screen by screen.
Green is deeply rooted in Islamic visual culture. The custom color palette uses emerald and jade tokens that shift naturally between light and dark modes without losing their warmth.
Tajawal handles all UI text with four weights for clear hierarchy. Amiri carries the Arabic scripture, a calligraphic font with the weight the Quran deserves.
Every rounded surface uses iOS-native squircle curves. It is a small detail that makes cards, sheets, and overlays feel like they belong to the platform.
Blur views create visual depth without hard cutoffs. The sliding audio player, overlays, and modals all use adaptive blur that reads cleanly in both light and dark mode.
Building the Prayer System
Prayer times are the heartbeat of the app. They had to be accurate, offline-capable, and configurable without overwhelming the user.
Local, always accurate
Adhan.js computes prayer times on-device from GPS coordinates. Multiple calculation methods and madhab support means global accuracy without a server.
Streaks and analytics
Log each prayer with a tap. The analytics screen visualizes consistency over time with charts that surface real patterns, not just counts.
Per-prayer control
Each prayer has independent notification settings. Adhan reminder, offset timing, and notification style are all configurable individually.
The Quran Reader
Reading the Quran in a mobile app is a solved problem. Doing it beautifully is not. I wanted something that felt worthy of the text.
The sliding audio player
Recitation audio plays through a persistent overlay at the bottom of the screen. It slides up from the tab bar, blurs the content behind it, and stays out of the way until you need it. Navigating between screens does not interrupt playback.
Design note: The Amiri font carries all Arabic text in the reader. Its calligraphic weight gives the verses the visual gravity they deserve on a small screen.
Tarteel: Soundhound for Quran
The most technically ambitious feature. Hear a recitation, open Tarteel, and it identifies the verse in real time. Entirely on-device. No data sent to any server.
A 115 MB FastConformer ONNX model is bundled with the app and loaded via expo-asset at runtime
Audio is captured at 16kHz mono WAV and converted to mel spectrograms entirely in TypeScript
CTC decoding produces Arabic token sequences which are matched against the full Quran corpus
Levenshtein distance handles imperfect recognition and noisy recordings gracefully
The entire inference pipeline runs on the device with no network dependency
Tech Stack
Every dependency earned its place.
What I Learned
Built with intention.
Ibadah started as a personal project. I wanted an Islamic app that matched the quality of the best iOS apps I use daily. Something that felt native, looked considered, and treated the spiritual content it carries with the weight it deserves.
Every screen, every animation, every piece of Arabic typography was a deliberate decision. The result is an app I actually use every day, and that matters more than any metric.