Mosque Prayer Display Screen App

'بِسْمِ ٱللَّٰهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ

In the Name of Allah the Merciful, the Compassionate.

This project has been open-sourced as a form of sadaqah jariyah - may Allah reward every single contribution, technical, non-technical and those who share with others.

Introduction

This application allows mosques to run a prayer display screen for the worshipers and also an offline progressive web app that runs on any modern web browser.

This version of the application supersedes the original version which was created in association with East London Mosque.

The commentary on why we built this version, can be found in the following blog: https://medium.com/mosque/design-concept-direction-for-mosque-screens-51c4f9bb82.

The original contributors of this project can be found here.

A special thanks should be given to the UK Government Digital Service who provided voluntary days which allowed the original project to come to life.

Features

To keep track of features implemented and in the pipeline, please have a look at our project board: https://github.com/orgs/MosqueOS/projects/1/views/1

If you want to request a new feature, please raise an issue on this repo with a description of what you want.

Demo

You can see a working demo here: https://mosque-prayer-display-screen.vercel.app/

All of the code sits here: https://github.com/MosqueOS/Mosque-Prayer-Display-Screen

Screenshots

Mosque views

Mobile app

How to get set up as a Mosque

Prerequisites

• Google Account

Step 1: Make a copy of the prayer times spreadsheet

Go to the following link and make a copy of the spreadsheet: https://docs.google.com/spreadsheets/d/1o9dngtGJbfkFGZK_M7xdlo2PtRuQknGEQU3FxpiPVbg/copy.

Step 2: Share "viewer" access to the spreadsheet with our Google Account

Click on the share button and add [email protected] as a viewer. We don't need any write access, so please do not give us this.

This allows our API to access your spreadsheet and read your data.

Step 3: Generate API Endpoint

To generate the API endpoint, you need to extract the spreadsheet ID from your spreadsheet link.

For example, if your spreadsheet URL is:

https://docs.google.com/spreadsheets/d/1o9dngtGJbfkFGZK_M7xdlo2PtRuQknGEQU3FxpiPVbg/edit

Your ID would be:

1o9dngtGJbfkFGZK_M7xdlo2PtRuQknGEQU3FxpiPVbg

You then add this ID to the following URL, like this:

https://api.mosque.tech/mosque-data/1o9dngtGJbfkFGZK_M7xdlo2PtRuQknGEQU3FxpiPVbg

You can use the following tool to automatically generate an API endpoint: https://codepen.io/DilwoarH/full/mdvOexr

Note: You don't need to use our API endpoint, you can generate your own endpoint but please make sure it has all the required properties.

Step 4: Deploy your app

We currently use Vercel (we found others not to work as well).

Click on the following button:

Step 5: Test your display

Once your app has deployed, visit the URL and test your screen. Make sure it works on the TV you want to use for the mosque. Our app is designed for 1080p Full HD TV screens.

Optional things you might want to do

Custom domain

You can set up custom domains like: prayertime.mymosque.com

If you want to update your domain, you can do so by following the Vercel documentation: https://vercel.com/docs/projects/domains/add-a-domain

Environment variables

KEY	VALUE	DEFAULT	DESCRIPTION
MOSQUE_API_ENDPOINT	https://api.mosque.tech/mosque-data/1o9dngtGJbfkFGZK_M7xdlo2PtRuQknGEQU3FxpiPVbg	REQUIRED - NO DEFAULT	Data from Mosque API
BLACKOUT_PERIOD	13	13 minutes	How long your mosque screen dims / blacks out during congregation prayer
UPCOMING_PRAYER_DAY	3	3 upcoming days shown in slider	How many upcoming days it shows in the sliding section
SLIDE_TRANSITION_TIME	7	7 seconds	How long each slide shows for in the sliding section

Dev set up

cp .env.local.example .env.local

npm install

npm run dev

Raspberry Pi Setup

Raspberry Pi (RPI) is an easy way to get the screen running, the screen doesn't need too much power - a lightweight computer like an RPI is enough.

You can buy one from the official suppliers: https://www.raspberrypi.com/products/

We recommend you buy a case with a fan or some heat-cooling solution - the screen will run all day so it's good to have a good cooling solution.

RPI set up steps

0. Install Raspberry Pi OS on the SD Card
1. Install chromium-browser - Do this step only if you do not have Chromium
2. Open Terminal
3. cd .config
4. sudo mkdir -p lxsession/LXDE-pi
5. sudo nano lxsession/LXDE-pi/autostart
6. Add the following line at the end of the file:

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
point-rpi
@chromium-browser --noerrdialogs --noerrors --disable-session-crashed-bubble --disable-features=InfiniteSessionRestore --disable-infobars --start-fullscreen --start-maximized --app=https://mosque-prayer-display-screen.vercel.app

(make sure to replace the --app=https://mosque-prayer-display-screen.vercel.app with your URL)

7. sudo reboot
8. Once it reboots, it should start with start-up to your screen automatically.

Still need help?

We don't provide any free support, you can join our discord channel to get help from the community using the following invite link: https://discord.gg/CG7frj2.

If you would like paid support, you can contact us here for pricing: [email protected].