Qutbah — Case Study

01 / Overview

What Qutbah is

For a non-Arabic speaker, the Friday sermon can pass by untranslated. Qutbah closes that gap in real time — point your phone at the khutbah and read along in English as the imam speaks.

What sets it apart is reverence for the source. When the imam recites Quran or quotes a Hadith, Qutbah doesn’t just translate the audio — it recognises the passage, pulls the canonical text and a trusted translation from an on-device corpus, and cites chapter, verse and grading. Everything runs locally, in seconds, with no connection required.

6,236

Ayahs indexed

<2s

Translation latency

On-device

Arabic speech-to-text

Quran+Hadith

Verified corpus

02 / The big idea

It doesn’t guess at scripture — it verifies it.

A raw translator would paraphrase a Quran verse and get it subtly wrong. Qutbah treats scripture differently: spoken Arabic is matched against the full Quran and a Hadith corpus, and when it locks on, it shows the verified verse — exact text, reference and translation — set apart on a warm scripture card.

Qutbah live screen — translation with a verified Quran card and an attributed Hadith

Qutbah — a verified Quran verse, cited and set apart

Left: live transcription with cited cards inline. Right: the moment a verse is matched — shown verified, with chapter and verse.

03 / Design language

Calm enough to read in the moment.

The app is intentionally quiet: a white-to-ice-blue gradient, near-black controls, and warm cream cards reserved exclusively for sacred text — so scripture is always visually distinct from ordinary speech. Arabic is set in Amiri; the interface in a clean geometric sans.

Ice Gradient

#FFFFFF → #EAF4FF

The app background — soft, bright, focused.

Scripture Cream

#FFFBF5

Reserved for Quran & Hadith surfaces.

Verified Green

#16A34A

Quran match — the “this is confirmed” signal.

Hadith Gold

#D4AF37

Hadith attribution & the Qutbah wordmark.

A light app, a dark brand

The product itself is bright and legible for use inside a mosque; the brand world around it — this case study, the marketing — runs deep navy with emerald and gold, echoing the scripture accents. Two registers, one identity.

Every colour, type ramp and radius comes from a single Material-3 token file — the source of truth the whole codebase references, so nothing is ever hard-coded.

04 / The intelligence

From spoken Arabic to a cited verse.

Behind the calm screen is a multi-stage pipeline. Audio becomes text, text becomes translation, and a pair of specialists decide whether what was said is scripture — and if so, prove it.

Arabic STTApple · on-device

→

Live translationGroq LLaMA

→

Quran verifier6,236 ayahs

→

Hadith specialistcorpus + grading

→

Arbiterdecides & cites

01

On-device speech

Arabic is transcribed live with Apple’s on-device speech recognition — private, fast, and fully offline.

02

Quran verification

Candidate text is matched against all 6,236 ayahs with a composite similarity score; a high match swaps the paraphrase for the canonical verse and reference.

03

Hadith attribution

A specialist scans a local Hadith corpus, attributing quotes to their collection and number — with the authenticity grade (Sahih, etc.).

04

The arbiter

A final arbiter weighs the signals — translation, Quran score, Hadith confidence — and decides what to surface, so the screen never shows a guess as if it were a fact.

05 / The app, screen by screen

One tap, then just listen.

Open, tap record, and place the phone down. Translation streams in; verses and Hadith surface as they’re recognised; and every session is saved to revisit later.

Live translation — Live — translation streams as the imam speaks.

Quran verse detected — Verified — a Quran verse, cited and set apart.

Hadith attribution — Attributed — Hadith with source & grade.

History — every khutbah is kept: date, mosque, duration, and a preview, flagged when it contains scripture you can jump back to.

06 / Under the hood

How it’s built.

A cross-platform React Native app with the heavy lifting kept on-device: native speech, local scripture databases, and a thin LLM layer only where paraphrase is genuinely needed.

React NativeExpo SDK 54expo-routerApple on-device STT Local Quran DB (6,236)Local Hadith corpusGroq LLaMA 3.1expo-translateZustandMaterial 3 tokens

A.

Listen

@jamsch/expo-speech-recognition streams Arabic audio into live transcript chunks on-device — no audio ever leaves the phone.

B.

Translate

Ordinary speech is translated through a thin LLM layer (Groq LLaMA) and expo-translate, tuned for the register of a sermon and streamed in under two seconds.

C.

Verify & attribute

A local Quran database and Hadith corpus run similarity matching with position tracking; specialists score candidates and an arbiter decides whether to show a verified verse, an attributed Hadith, or plain translation.

D.

Keep

Sessions persist to history with their detected quotes; a Zustand store drives the live UI while everything reads from one Material-3 design-token source of truth.

07 / Outcome

The result

An app that makes the Friday sermon accessible to anyone — without ever putting words in the imam’s mouth.

It pairs a hard real-time pipeline (on-device STT, live translation, Quran and Hadith verification, an arbiter) with an interface calm enough to read mid-prayer. The hard engineering disappears behind a single tap — which is exactly the point.