Community website · 2026In progress
Masjid E Vali
A masjid website that keeps itself up to date.
Masjid E Vali in Blackburn needed a site that worshippers check every day, not once a year. Prayer times, live broadcasts, khuṭbahs and giving now sit in one place, and the office runs it without a developer.
- 0
- prayer times retyped by hand
- 6
- areas the office edits itself
- 4
- giving causes, with Gift Aid
- Live
- on-air band, only while broadcasting
01 · The challenge
The daily timetable lived in a spreadsheet the office already kept, and the website had to be retyped to match it. Broadcasts from the masjid went out with no way for the site to show when they were live. Every change to wording or images meant asking someone technical, and if anything behind the scenes failed, the whole site went down with it.
02 · What we built
We built the site around the things people come back for. Prayer times are read from the office's own spreadsheet and drawn on a 24-hour dial with a live countdown to the next jamāʿah. An on-air band appears only while the masjid is actually broadcasting. Giving is a short pledge flow with Gift Aid. Behind it sits a small admin where every field has a safe default, so a blank or reset field goes back to it and the public site keeps working even if the database does not.
Inside the product
Masjid E Vali, from every side.
Replicas of real screens, rebuilt here so you can see how it works for the people who use it. Names and data are made up.
01 · Worshipper
Today's prayers, drawn as a day
The prayer times page on a phone. A gold mark where each prayer begins, a green dot where the jamāʿah stands, and a hand sweeping round to now, with a countdown to the next jamāʿah.
02 · Listener
On air, the moment the masjid is
While the masjid is broadcasting, an on-air band appears on the Listen page with a live link. When it stops, the band goes. Recorded khuṭbahs and series play in a dock that follows you around the site.
03 · Donor
Give in three short steps
Amount and frequency, the fund it goes to, then Gift Aid and a name for the receipt. A running summary at the bottom shows exactly what is being pledged.
04 · Office
Change the sheet, the site follows
The office edits a jamāʿah time in the spreadsheet it already keeps. Moments later the website's header pill, today's table and the monthly timetable all show the new time.
Masjid E Vali · Timetable 2026
FileEditViewInsertFormatDataTools
ON THE WEBSITE
No logins and nothing to retype. The office edits the sheet it already keeps, and the header pill, today’s table and the monthly timetable all follow.
Swipe to see the full screen
05 · Office
Edit the homepage, safely
Every page is a simple form. Change a heading and save, and it is live in seconds. Reset a field and it goes back to its default, so nothing on the public site is ever left blank.
Swipe to see the full screen
What it does
- 01
Prayer times on a 24-hour dial
Today's row of the timetable drawn as a day: when each prayer begins, when each jamāʿah stands, and a countdown to the next one.
- 02
Timetable from the office's spreadsheet
The office keeps editing the sheet it already used. The header, today's table and the monthly timetable follow without anyone retyping a time.
- 03
On air only when it's true
A live band and a 'Live now' bar appear while the masjid is broadcasting, and disappear when it stops. No guessed schedules.
- 04
Khuṭbahs and series in one player
This week's khuṭbah, earlier ones and running series, with a player that keeps going as you move around the site.
- 05
Giving with Gift Aid
A three-step pledge: amount and frequency, the fund it goes to, then Gift Aid and a receipt by email.
- 06
An admin that can't break the site
Text, images, imams, announcements and recordings are all editable. Every field has a default, so the public site always has something sensible to show.
What we did
Design · Website · CMS · Integrations · Motion
Built with
Next.js · Supabase · Drizzle · Google Sheets · Motion · Lottie
Next project
Balkans Campaign→
Fundraising campaign