The Need for a Modern, and Better Athan App

Preview of the large-scale version of “Athan App.”

Update: Athan App is currently available as a PWA at https://athan-app.vercel.app/

You can add it to your home-screen and have it function as a regular application on desktop and mobile.

Within Islam, Muslims are expected to pray five times a day. The Quran, the central religious text in Islam, specifies that these prayers occur at times that the glance of an eye could easily determine. For example:

Fajr is at dawn

Dhuhr is mid-day

Asr is during the late afternoon

Maghrib occurs at dusk, and Isha is between sunset and midnight.

For many, it is near impossible to determine the time of prayers. This is due to many reasons such as

• large buildings blocking the sun
• being at work/not being able to go outside consistently
• the issues that come with interpreting the Quran.

What does it really mean for Isha to be between sunset and midnight? With how the world operates today, people want a specific time to pray. So groups came up with the many methods of determining prayer times that Muslims use on a daily basis.

In North America, one of the most common methods is ISNA, short for the Islamic Society of North America. However, each mosque decides which method they will use when planning the Iqamah, or beginning of group prayer.

Some of the other methods that are used around the world are the “Muslim World League”, and “Umm al-Qura.”

Luckily, Jean Meeus, in their book: “Astronomical Algorithms” describes how to figure out the times for sunrise and sunset with extremely high precision. With these calculations, we can find when the sun will be above the horizon at a certain degree count (which comes from any method chosen above).

With this information, it’s possible to create an app that enables users to see the times of prayer. Given the little maintenance required after building the app (because the algorithms already figure out the athan times for you), it becomes easy to try to monetize the app for whatever it's got, whether it is selling user data, including location, and app usage. Sadly, this is what happened to a very popular app named Muslim Pro.

[embed]Muslims reel over a prayer app that sold user data: 'A betrayal from within our own community' Five times a day, tens of millions of phones buzz with notifications from an app called Muslim Pro, reminding users…www.latimes.com

In light of this, I have decided to create an app for the public that:

• Is accessible with clear and easy to read information
• Has a large countdown for the next athan
• Has no advertisements
• Allows multiple locations
• Has different layouts for mobile and desktop
• Works on a time-zone relative basis
• Utilizes modern feature sets in the latest iteration of Javascript and ReactJS
• And lastly... an app that allows users to fully customize with a variety of different colors

This app utilizes Babel, Javascript, and React running in a contained Progressive Web App. The application most importantly depends on Athan.js. a library created by many wonderful software engineers. I have linked the GitHub repo for Athan.js below. This is also what makes the app do its one main job: calculate the prayer times! https://github.com/batoulapps/adhan-js

I have been working on this for a while now, and want to iron out the knicks, all while adding features that increase productivity and accessibility. There are a few select individuals who have interacted with the athan app and they are all excited about the upcoming public release.

To not leave you waiting around, I’ll give a sneak peek of what this app has to offer:

1. Countdown: time until the next athan that updates every second. This is large enough to glance at and know when the athan is near.
2. State management: using ReactJS, the athan app treats individual locations separately. It’s as if New York and Chicago never knew each other's existence.
3. Reusable components/elements: Once a time for an athan is computed, it is stored in memory, allowing for enhanced performance. The same colors are used in the app. Also, components change only if they need to.
4. Adding additional locations: as many locations as you want can be tracked using this app. These are added using the search function powered by OpenStreetMap.
5. Individual day lookup: users can see previous and future athan times, and see the text change.
6. Hover/Touch relative time: When you tap on an individual athan, you can see how many hours or minutes away it is (powered by the native RelativeTimeFormat object in JavaScript.