-
-
Quran Habit Homepage - Design (Lottie animations)
-
Weekly leagues to compete and get promoted to next
-
Journey of personalized reading plan
-
Streak ranking
-
Badges based on activity
-
More section with additional contents
-
Total activity metrics and habit progress
-
Heatmap and Detailed Habit insights
-
Celebrations in milestones and motivate users
-
Multiple widgets to return back users
-
Listen with autopilot mode, tap to pronunciate the word.
-
Quran Habit Logo
Inspiration
I have always wanted to create highly daily engaged app with using gamification mechanics, personalized messages and giving experience for the user - learn/grow as they use the app.
The first screen of Quran Habit is a Quran verse: "And the Messenger has said, 'O my Lord, indeed my people have taken this Qur'an as [a thing] abandoned.'" (Al-Furqan 25:30). That is the problem I wanted to work on. Many Muslims own a mushaf and rarely open it, and a daily habit is easier to keep than a big promise.
I live in Baku. I wanted an app that speaks the reader's own language, including Azerbaijani, Bosnian, Albanian and Urdu, that makes a little reading every day feel natural, and that never asks anyone to pay for the Quran.
What it does
- Personalized Habit building mechanism - I designed it by using Duolingo's weekly leaderboard logic, at the same time friends invitations - showing how much you contributed friends' habit. As you grow you get badges, 7 different persona model - each receives notifications in different frequencies. Notification is the most DAU improving feature of current
- Celebrates progress. - App has multiple celebration screens, designed with Lottie animations - engaging and dopamin-friendly. It improve the daily engagement and create quick-winning points for the users.
- Lives on the home screen. iOS widgets for the streak, the ayah, the dua and the Name of the day, and Android widgets. Widgets aims to get user back.
- Speaks 14 interface languages: Arabic, Azerbaijani, Bosnian, German, English, Spanish, Persian, French, Indonesian, Malay, Russian, Albanian, Turkish and Urdu, right to left for Arabic, Persian and Urdu. Spanish is new in version 1.0.1.
- Is free to read. There are no ads. Paying makes you a Supporter: a badge next to your name and double daily gems. Nothing that helps you read is behind the paywall, and if you close it the app tells you that you can use it free if you really cannot afford to pay.
How we built it
I built it alone, in Baku, starting in March 2026. I built it with Claude Code as my pair programmer; 1,954 of the 2,103 commits carry its co-author line. Millions of tokens :D
- App: Expo SDK 55, React Native 0.83, React 19.2 and TypeScript, with Expo Router, EAS Build and EAS Update.
- Money: RevenueCat (
react-native-purchasesand Paywalls v2 throughreact-native-purchases-ui). Onboarding shows whatever paywall RevenueCat's current offering names, so I can change it without a store release. A RevenueCat webhook into a Supabase edge function keeps the Supporter state on the server. - Backend: Supabase (Postgres, Auth, Edge Functions). Gems are kept in a server-side ledger.
- The mushaf (Book layout of Quran): a page image has no text in it, so for every image set I measured a box for every word on every page, at that image's own width, and a hit test turns a tap into a word. Madinah pages also render from per-page QCF fonts, and colour tajweed text comes from a small native module.
- Widgets: Swift WidgetKit on iOS, Kotlin on Android.
- Motion: Reanimated 4, Moti, Lottie and react-native-svg.
- Website: quranhabit.com, built with Astro on Cloudflare Workers, with page images and data on Cloudflare R2. It carries the Quran in 14 languages and sends readers to the stores.
Challenges we ran into
- Tapping a picture. Word boxes measured on one image set are wrong on another, even for the same edition at a different width, and IndoPak and Naskh do not share Madinah's page numbers. Every set needed its own boxes and its own checks.
- Right to left, everywhere. Arabic, Persian and Urdu readers get a mirrored interface, not only right-to-left ayahs.
- Earning without selling the Quran. I did not want a paywall in front of reading. I settled on support instead of access, and a plain way out for anyone who cannot pay.
- Counting honestly. App Review and pre-launch test devices look like installs in the US, bots tap links, and closed testers sit in the same tables as readers. I had to filter before counting, and I quote counts instead of percentages because my groups are small.
- A store listing mistake. The app speaks 14 languages, but its App Store page says "Languages: English", because the build never declared them.
Accomplishments that we're proud of
- Both first public releases landed inside Shipaton: Google Play on 1 September 2026 (174 countries) and the App Store on 8 September 2026.
- As of 29 September: 131 people from 31 countries created accounts, 98 finished onboarding, and 90 have read 19,351 ayahs, 79.5 hours of reading, since closed testing began on 11 August.
- 12 readers reached a 7-day streak, 5 reached 14 days, and one reached 34. 15 repaired a missed day instead of starting over.
- quranhabit.com went live on 17 September with 103,107 pages in 14 languages; its store badges were tapped 341 times since 4 September.
- Revenue is $0 so far. Five readers are in a free trial, and the first can convert around 1 October. I would rather show that than a nicer number.
What we learned
- Small, honest numbers are more useful than big vague ones, to me and to anyone I show them to.
- A habit app is decided on the day someone misses. Forgiveness that still asks for reading brings people back without turning the streak into something you can buy.
- Building a feature is not the same as telling the store about it: the languages have to be declared in the build.
- Whether "support, not access" can pay for itself is still an open question. The first trials end in October, and I will learn from them.
What's next for Quran Habit
- Watching the first trials end, and learning whether readers choose to support the app.
- Preparing for Ramadan season, testing different channels to increase users and revenue.
Built With
- astro
- claude
- cloudflare-r2
- cloudflare-workers
- eas
- expo-router
- expo.io
- firebase
- google-sign-in
- kotlin
- lottie
- moti
- postgresql
- posthog
- react
- react-native
- react-native-reanimated
- react-native-svg
- revenuecat
- revenuecat-paywalls
- sign-in-with-apple
- supabase
- swift
- typescript
- widgetkit
Log in or sign up for Devpost to join the conversation.