YSBDesigns

← All work

Community project

Taiyabah Masjid

React Native app on Google Play · PWA · Cloudflare Worker · OneSignal push · Supabase/Postgres with Row Level Security · Stripe · Signage · Python build

Problem

A Bolton masjid needed prayer times in front of its community every day — on phones, on the wall, and on the web. Three separate problems, all being solved by hand.

Approach

I built one system: an installable app with live audio and push alerts, a public website, two always-on display screens inside the building, and a home display anyone can run on a spare tablet or TV that sounds the Adhan and Iqamah on time. A Python pipeline feeds all of them from a single timetable, so nothing is typed twice. The typefaces are served from the masjid’s own origin and kept by the service worker, so the Arabic still renders properly in the basement. It runs in four languages, and the Qur’anic, hadith and duʿā text is checked verbatim against its source on every build rather than trusted to stay right.

The website has since been rebuilt around accounts and an Admin Centre. Visitors register, confirm their email and sign in with two-step verification. Behind one sign-in sit seven staff areas — the screens the masjid runs itself — the prayer timetable it publishes a year at a time, notices, the appeal figure, hall rates, adult classes, Gift Aid rows for HMRC, food bank volunteers, charity collections, and a button that sends a notification to every phone with the app on it. Nobody needs a developer and nobody needs to push to GitHub. Hall hire takes a whole day, holds the date for thirty minutes while the hirer pays a deposit through Stripe, and confirms without an office step; the rate is stored on the booking, so one taken in March keeps March’s price.

Six roles and three gates, every one of them enforced in Postgres rather than in the page — a rail that hides a row in the browser is not a lock. The hall office role reaches hall bookings and provably nothing else.

The newest piece is the imam’s inbox, and it is the shape the rest is built in: a congregant writes from the phone app, and no imam’s address exists anywhere to be harvested or handed over. The question becomes a row the app cannot read back; the imam signs in with an authenticator like everybody else and answers; the server sends the reply by reading the answer out of the row rather than trusting anything the request said. That table has Row Level Security on and no policies at all, with every grant revoked — which is the denial, not an oversight — and the check that opens it deliberately does not fall back to admin, because somebody writing to the imam in confidence is not writing to the committee.

Outcome

The native rebuild shipped, and it is now what is on Google Play — version 2.0.1, version code 8. The Trusted Web Activity it replaced ended at version code 1. That is the part of this project I would most want read: the wrapper was a web page in a Chrome shell, and Android made it say so on first launch, put the tab bar wherever the browser left room, and stopped the audio whenever the phone was pocketed. None of that is fixable from inside a webview. Now the radio keeps playing with the phone locked and lock-screen controls, the qibla reads the magnetometer instead of asking a browser for a heading it may not give, and reminders are scheduled on the device, so they fire with no signal and cost the masjid nothing to send.

Almost none of its content was retyped. One command lifts the copy out of the website's own markup, and CI then opens both apps in a browser and compares the home screen's sections, the twelve tiles and their order, and the More menu — because asserting that two surfaces agree is easy and measuring it is the only version worth having. The web app stays live and maintained, and remains the source of every word the native one says. It runs in four languages — English, Urdu, Gujarati and Arabic — and the Qur’anic, hadith and duʿā text is checked verbatim against its source on every build.

The rebuilt website, the accounts and the Admin Centre are finished and staged, waiting on the move to the masjid’s own domain — robots.txt blocks crawlers until then, so the temporary address is never indexed and there is no duplicate to clean up afterwards. Hall hire now runs on real availability with the deposit paid online, and nikāḥ requests and adult course sign-ups are open. Two things stay deliberately switched off: paying the nikāḥ fee online, until the masjid's own payment links exist, and the madrasah application form, which is published as a preview that cannot send because it would collect children's medical and SEND details and its data-protection assessment is not signed.

iOS is the one still open. An Apple Developer Organization account for a charity needs a D-U-N-S number, and the charity's record needs correcting before one can be issued — so there is no iPhone build to talk about yet. Apple’s rules also mean the app must hand donations to the system browser rather than take them in-app, which is the shape the Stripe links already have, and push would have to be rebuilt on the native SDK rather than carried over.

The screens

Taiyabah Masjid website home page
Public website
Salah times display screen in the main hall
Salah times display · main hall
The home smart screen showing the countdown to the next jamā'ah and today's salah times
Home display · countdown, Adhan on time
The Taiyabah Masjid app on a phone, showing the next jamaʿah and the day’s beginning and jamaʿah times
App · on Google Play, and installable from the web
New-build appeal display screen in the foyer
New-build appeal · foyer
The Taiyabah Centre hall hire page, showing the availability calendar and the venue details
Hall hire · availability, slots and terms
The venue hire portal, showing incoming hall booking requests for staff to confirm or decline
Venue hire portal · the office's working screen

If this looks like your problem

Tell me about it and I'll tell you what it takes.