A responsive, installable prayer-times PWA. Web port of the React Native package @shkomaghdid/react-native-prayer-times — the same astronomical engine, the same offline geocoder, the same Hisnul Muslim azkars and 99 Names of Allah, plus Quran reading with a Sorani translation.
This repo is published for code reference only. The data backend is a private Supabase project; the schema and migration tooling are not included. Browse the code, copy patterns, build something of your own — but you won't be able to spin up a working instance from this repo alone.
- Prayer times — calculated via 7 well-known methods (Umm al-Qura, MWL, ISNA, Karachi, Egypt, Jafari, Tehran) plus a custom-angle method, with Hanafi / Shafi'i asr, four higher-latitude adjustments, per-prayer offsets, and an optional fixed-table fallback for cities the source database covers.
- Offline geocoder — search 6,700+ cities across 252 countries, reverse-geocode from device location. Recently picked cities are remembered.
- Qibla compass — live device-orientation compass on mobile (HTTPS required); static bearing on desktop. Distance to the Kaaba.
- Hisnul Muslim azkars — 12 categories, 133 chapters, 310 items, all with multilingual translations. Star a chapter to pin it; per-item dhikr counters persist across reloads.
- 99 Names of Allah — name, transliteration, translation in every supported language.
- Quran — full text from alquran.cloud (Quran Uthmani + the Burhan Muhammad-Amin Sorani translation, plus en.sahih and ar.muyassar). Bookmark whole surahs and individual ayahs; "Continue reading" picks up where you left off; tapping an ayah bookmark scrolls straight to it.
- Tasbih — large-bead counter with target presets (33 / 99 / 100 / ∞) and a running total. Two reset buttons: clear the current count or wipe the total too.
- Hijri date, monthly calendar (stacked day cards on mobile, full grid on desktop), next-prayer countdown.
- Languages — English, Arabic, Kurdish (Sorani), Kurdish (Badini). Full RTL.
- Theming — light / dark / auto with a green accent (
#1F8A4C). System-bar color follows the active theme on mobile. - Pickable Arabic typeface — Amiri Quran (default), Alyamama, Scheherazade, Naskh. Live previews; selectable from Settings or via a typography button on the Quran / Surah pages.
- Installable PWA — true standalone app on iOS Add-to-Home and Chrome
Install, with shortcuts for Qibla / Azkars / Quran. Custom splash screen with
a sliding-door reveal that gates on
document.fonts.ready.
Everything that doesn't need fresh data is cached in localStorage
(stale-while-revalidate): Names of Allah, Azkar categories / chapters / items,
the Quran surah list, individual surahs. Subsequent visits hydrate instantly.
Prayer times are intentionally not cached because they're date- and
location-dependent.
- Vite 8 + React 19 (JSX only, no TypeScript)
- react-router 7, react-i18next, lucide-react icons
- @supabase/supabase-js — read-only access to a Postgres copy of the source prayer / azkar / location data
- vite-plugin-pwa for the service worker + manifest
- @fontsource for self-hosted typefaces
- eslint + prettier
- Mobile: 5-tab bottom bar — Home, Azkars, Qibla, Quran, More. The More tab opens a bottom sheet containing Calendar, Names, Tasbih, Settings.
- Desktop: persistent left sidebar with all entries.
- Header + search are one sticky block per page; a content-only scroll area sits below it so chrome never moves while scrolling. Native scrollbars are hidden everywhere.
src/
├── lib/
│ ├── prayer-times/ # 1:1 JS port of the RN package's calculator
│ │ ├── calculatedPrayerTime.js
│ │ ├── calculationMethod.js
│ │ ├── asrMethod.js
│ │ ├── higherLatitudeMethod.js
│ │ ├── prayerAttribute.js
│ │ ├── prayerTime.js
│ │ └── prayerTimeRepository.js
│ ├── repositories/ # data access (locations, names, azkars)
│ │ ├── locationRepository.js
│ │ ├── nameOfAllahRepository.js
│ │ └── hisnulMuslimRepository.js
│ ├── quran.js # alquran.cloud client + cache
│ ├── qibla.js # bearing + Haversine distance
│ ├── hijri.js # Intl islamic-umalqura
│ ├── cache.js # localStorage SWR cache
│ ├── i18nLang.js
│ └── supabase.js
├── i18n/ # en, ar, ckb, ckb_Badini bundles
├── store/
│ ├── settings.js # theme, lang, calc method, font, location, ...
│ └── favorites.js # chapter stars, surah/ayah bookmarks, dhikr, tasbih
├── pages/ # one .jsx per route
└── components/<PageName>/ # one folder per page, plus Layout/ and ui/ primitives
The frontend talks only to two origins: the data backend and api.alquran.cloud.
- iOS Safari: Share → Add to Home Screen. The result is a real standalone app — no browser chrome, custom splash, theme color matches your light/dark setting.
- Android Chrome / desktop Chrome / Edge: the Install app prompt fires
once the app is loaded at a secure origin (HTTPS or
localhostdirectly on the same device).
The Qibla compass also requires HTTPS — DeviceOrientation is gated on a
secure origin in modern mobile browsers.
- Calculation logic and bundled offline data: muslim-data-flutter by @kosratdev, ported to React Native by @OneAboveAll1964 in react-native-prayer-times — this web app is a 1:1 port of that package's API.
- Quran data: alquran.cloud (Quran Uthmani + ku.asan / en.sahih / ar.muyassar editions).
- Hisnul Muslim azkars: traditional compilation by Sa'id ibn Ali ibn Wahf al-Qahtani, included in the source database.
- Fonts: Amiri / Amiri Quran, Alyamama, Scheherazade New, Noto Naskh Arabic, Inter, all served via @fontsource.
- Icons: lucide, with a custom in-house "99" mark for the Names of Allah tab.
Made by @OneAboveAll1964.
MIT.