Skip to content
Live Demo

Sakenah

A bilingual prayer-times PWA with location-based schedules, a live next-prayer countdown, Hijri date, adhkar and Qibla guidance.

Role
Product design and full-stack delivery
Category
Progressive Web App
Status
Live public app
Built with
Vanilla JS · no framework
Sakenah prayer-times app on a dark green brand background showing the next-prayer countdown in Arabic

Overview

Sakenah answers one question well: when is the next prayer, and how long do I have? Around that it adds the day’s full schedule, the Hijri date, morning and evening adhkar, and a Qibla bearing — in Arabic and English, with no account and no tracking.

The problem

  • Most prayer apps ask for an account, or carry advertising and trackers.
  • Arabic is often an afterthought — a translated layer over a left-to-right layout.
  • Times go stale or stop working entirely when the connection drops.
  • Qibla features frequently show a moving needle even where no compass exists.

The solution

  • Open it and the next prayer and countdown are already on screen.
  • Arabic-first: a genuine right-to-left layout, with English as the second language.
  • A month of times is cached, so a normal day needs no network at all.
  • The Qibla states plainly whether it is a fixed bearing or a live compass.

My role

Product planning, UX structure, full-stack implementation, bilingual experience, offline and caching strategy, Qibla correction and device-sensor handling, and production deployment.

Core features

  • Prayer times by location — device location or manual country and city selection.
  • Next-prayer countdown — live hours, minutes and seconds to the next adhan.
  • Daily schedule — Fajr through Isha with the active prayer highlighted.
  • Gregorian and Hijri dates — both shown together.
  • Adhkar — morning, evening and after-prayer, with a counter and cited sources.
  • Qibla guidance — a bearing from true north, plus a live compass where the device supports one.
  • Calculation methods — selectable, with the method named under the schedule.
  • Arabic and English — full RTL, switchable at any time.

How the times are produced

Times come from the AlAdhan calendar service, requested a whole month at a time and cached locally. The calculation method is explicit and selectable, and the app names the method it used underneath the schedule rather than hiding it.

  • One request per location and month, not one per day.
  • Method and school are part of the cache key, so switching either refetches correctly.
  • Tomorrow’s Fajr is fetched ahead of a month boundary so the countdown never gaps.
  • Times are presented as the chosen authority calculates them; Sakenah does not adjust them.

Qibla guidance, honestly

The Qibla is the great-circle initial bearing from your position to the Kaaba, in degrees clockwise from true north. What the app can promise depends on the device, so it says which one you are getting.

  • Coordinates come from the device when permission is granted, otherwise from the selected city.
  • The panel states the source and whether the reading is a fixed bearing or a live compass.
  • On iOS the compass is requested only from a deliberate tap, never on page load.
  • Where the browser exposes no absolute heading, the needle stays still and says so — a compass that moves without a sensor would be worse than none.
  • Calibration guidance appears once a live heading is actually running.

Magnetic interference and device sensors affect any phone compass, so the live heading is offered as guidance rather than a precision instrument.

Privacy and location

  • No account, no sign-in, no analytics and no advertising.
  • Location is requested only when you ask for it, and is rounded to roughly a kilometre.
  • That rounded value stays in your browser — it is used to fetch times and is never sent anywhere else.
  • Choosing a city instead of sharing location is a first-class option, not a penalty.

Offline and installable

Sakenah is a progressive web app. It installs to the home screen and keeps working without a connection.

  • A month of times is stored locally, so a normal day makes no network request.
  • A service worker caches the app shell and falls back to the last good response.
  • The cache is versioned, so a shipped fix reaches people rather than sitting behind a stale copy.

Selected interface

Captured from the live app.

Technology

Deliberately small: no framework, no build step, no dependency tree.

Stack
  • Vanilla JavaScript (ES modules)
  • CSS custom properties
  • Service worker
  • Web app manifest
  • localStorage caching
  • AlAdhan API
  • Arabic / English i18n
  • Node test runner

Open it

No sign-in, nothing to install unless you want to. Pick a city and the times are there.

Need something like this?

Tell me what your team is doing manually today and I will tell you honestly whether software is the right answer.