ISNA Canada Community App

This is a concept. ISNA Canada is one of the larger Muslim community organizations in the country, running a mosque, programs, a food bank, housing services, and a campus cafe out of their Mississauga location. They have no native mobile app.

This is what one would look like. The app pulls together the things a community member needs day to day: prayer times, upcoming events, community services, and a way to donate. Right now all of that is split across multiple websites with no consistent experience between them.

ISNA runs a mosque, a food bank, housing services, youth programs, and a campus cafe. There is no app that brings any of it together.

For a community member, that means finding prayer times, signing up for a program, and making a donation are three separate tasks with no single place to do any of them. A native app does not exist.

• No native app for prayer times, events, or community services.
• No centralized place for housing and job listings.
• Donations require navigating to an external page.
• Community members have no single touchpoint for ISNA's full range of services.

A responsive web app was considered. But the features that make a community app genuinely useful day-to-day need device access that a browser cannot provide reliably. Prayer time notifications, Qibla compass from the device magnetometer, location-based calculation without a prompt every session.

The stack is React Native with Expo, NativeWind for styling, and Expo Router for navigation. It targets both iOS and Android from a single codebase. The donation flow uses a bottom sheet with preset tiers rather than routing to an external page, keeping the user inside the app.

Five tabs

Home, Prayer, Programs, Community, and Donate. The Donate tab is a center FAB that opens a full-screen bottom sheet instead of navigating to a new screen. That keeps the gesture feel native and makes the action feel intentional rather than buried in a flow.

Green and bilingual

ISNA uses a deep forest green. The app extends that into a full design system: dark green for headers, a lighter green for active states, and amber reserved exclusively for the donate CTA and urgent notices. Typography is set up for both English and Arabic, since prayer names and event titles frequently appear in both.

Prayer tab

Location-based calculation using established Islamic methods. All five daily prayers are listed. The current one is highlighted; past ones fade. A large countdown shows time remaining to the next prayer. The Qibla compass reads from the device magnetometer and adjusts for magnetic declination based on the user's coordinates.

Community hub

Housing listings, job postings, Hub Cafe info, and ISNA's key services (food bank, Nikkah, Halal certification) under one tab. An emergency contact for Janaza services is pinned at the top in amber. Browse without creating an account.

Home

Daily Islamic reminder at the top, next prayer time with a live countdown, announcement feed, and a quick-action row for community utilities.

This is a concept. The codebase is a working React Native app built on Expo with a real navigation structure, prayer calculation logic, and a complete design system.

Community apps are harder to scope than commercial ones. The people using this are not one type of user. A student looking for a roommate has a completely different session than a parent signing up for summer camp or an elder checking prayer times. Each tab has to hold up as a self-contained experience.

Designing for a community organization also means working around the org structure, not against it. The directory in the More tab mirrors how ISNA actually categorizes its services internally. That made it easier to reason about what goes where.

ISNA runs a mosque, a food bank, housing services, youth programs, and a campus cafe, all under one roof. The app treats it that way. Prayer, programs, community, giving: one place, one experience. The codebase works. Whether it ships is ISNA's call.