Tilawa
Read, search, and listen to the Quran — with bilingual translations, 15 world-class reciters, and a full Du'a & Remembrance reference. Built for comfort, speed, and beauty.
Platform Overview
Tilawa (تلاوة) is a premium Quran web application built with Next.js 16, React 19, TypeScript, and Tailwind CSS v4. It serves the complete Quran via the Al-Quran Cloud API with three simultaneous editions: Uthmani Arabic script, English Sahih International translation, and Bangla Muhiuddin Khan translation. The audio engine is a custom HTML5 player built in React context, supporting 15 renowned reciters, ayah-by-ayah autoplay with automatic next-ayah progression, seek-to, loop mode, speed control (0.5× to 2×), and volume slider. The Du'a & Remembrance module contains the 99 Names of Allah, the 5 Kalimas with full transliterations, Azan phrases, and 40+ Tasbih Azkar — all with Bangla translations and per-item copy/share. The application features full dark mode, a mobile bottom navigation bar, a global search bar in the navbar, instant client-side surah search by name and number, last-read bookmarking via localStorage, and complete SEO with Open Graph metadata, Twitter cards, an XML sitemap, and robots.txt.
Enterprise Subsystems & Feature Hub
Explore all 9 production-ready modules, engines, and background services included out of the box.
Complete Quran with Bilingual Translations
All 114 Surahs, 6,236 Ayahs served via the Al-Quran Cloud API with 24-hour ISR (Incremental Static Regeneration). Each ayah displays three editions simultaneously: the Uthmani Arabic script (using the Amiri font from Google Fonts for proper diacritics), the Sahih International English translation, and the Muhiuddin Khan Bangla translation. Surah metadata includes revelation type (Meccan or Medinan), ayah count, and the full Arabic name alongside the English name and English meaning.
Custom HTML5 Audio Engine with 15 Reciters
A fully custom audio engine built in React context powers continuous ayah-by-ayah Quran recitation. Choose from 15 world-class reciters including Mishary Rashid Alafasy, Abdurrahman As-Sudais, Maher Al-Muaiqly, Mahmoud Khalil Al-Husary, Mohamed Siddiq Al-Minshawi, Abdul Basit, Abu Bakr Ash-Shaatree, and more. Controls include: play/pause, skip next/previous ayah, seek to any position via progress bar, playback speed (0.5× / 0.75× / 1× / 1.25× / 1.5× / 2×), volume slider with mute toggle, loop single ayah, and autoplay next ayah with automatic Surah progression. Audio is fetched from the alquran.cloud CDN per ayah.
Du'a & Remembrance Reference Page
A comprehensive Islamic reference module at `/dua-remembrance` covering: the 99 Names of Allah (Asma ul-Husna) with Arabic script, transliteration, English meaning, and Bangla meaning; the 5 Kalimas with full Arabic, transliteration, English, and Bangla translations in collapsible cards; the full Sana (opening supplication of Salah); the complete Azan phrases; and 40+ Tasbih Azkar (daily remembrance supplications) with Arabic text, transliteration, and Bangla. Each item has a copy-to-clipboard button and a native share button via the Web Share API.
Instant Search & Smart Filters
The Surah list homepage features instant client-side search — type any Surah name (Arabic or English), its English meaning/translation, or its number and matching results appear immediately with no page reload. A filter bar lets users narrow results to Meccan Surahs, Medinan Surahs, or All. The Surah reader page (`/surah/[id]`) includes a per-ayah search bar that scrolls and highlights the matching ayah. A global search bar in the Navbar supports searching across Surahs from any page.
Typography Comfort Controls
Each Surah reader page provides dedicated font size sliders for Arabic script and for translations independently. Readers can increase the Arabic text size to improve readability of diacritical marks, or increase translation text size for aging eyes — independently, without affecting each other. Settings are applied inline and persist during the reading session. The Arabic script uses the Amiri font (a high-quality Naskh typeface) loaded from Google Fonts, ensuring proper glyph rendering for Uthmani script with full harakat (vowel marks).
Last Read Bookmark & Jump to Ayah
When a user plays audio for an ayah or scrolls past it, the last-read position is saved to localStorage. Returning users see a 'Continue Reading' banner pointing to their last-read Surah and Ayah. The 'Jump to Ayah' button on each Surah page accepts a number input and instantly scrolls to that ayah, highlighting it briefly. Direct URL links include the ayah hash (`/surah/2#ayah-255`) — navigating to a deep link automatically scrolls to and highlights the correct Ayah on page load.
Ayah Share & Copy
Every Ayah in the Surah reader has a share menu (three-dot button). The menu provides: copy Arabic text, copy English translation, copy Bangla translation, copy the direct link to this specific Ayah (`/surah/[id]#ayah-[number]`), and native device share via the Web Share API (WhatsApp, Telegram, Messages, etc.). The Du'a & Remembrance page has the same copy/share per entry. A 'Copied!' confirmation state with a check icon appears for 2 seconds after copying.
Dark Mode & Mobile-First Design
Full dark mode support via `next-themes` — toggled with a sun/moon button in the Navbar, persisted to `localStorage`. The mobile bottom navigation bar provides thumb-friendly access to the three main sections: Home (Surah list), Du'a & Remembrance, and Settings. Glassmorphism card styling with `backdrop-filter: blur` and subtle gradient borders. Micro-animations using `animate-fade-in-up` CSS keyframes on page transitions. The layout is fluid from 320px mobile to 1440px+ desktop.
SEO & Performance
Complete SEO setup: dynamic `<title>` and `<meta description>` per Surah page, Open Graph and Twitter Card metadata with a 1200×630 OG image, canonical URLs, a dynamic XML sitemap (`/sitemap.xml`) listing all 114 Surah pages, and a `robots.txt`. Surah data is fetched server-side with ISR (`next: { revalidate: 86400 }`) — cached for 24 hours at the edge on Vercel. The homepage pre-renders all 114 Surah entries statically. Core Web Vitals: no layout shift from font loading (fonts are `display: swap`), no unoptimized images (Next.js Image component).
Frequently Asked Questions
Answers to common questions regarding licensing, deployment, POS hardware, and courier integrations.
Yes — completely free. No account required, no ads, no paywall. The source code is also open on GitHub at `github.com/mustafa-Mlab/tilawa-app`. You can fork it and self-host on Vercel or any Node.js host.
English: Sahih International — widely considered the most accurate modern English translation. Bangla: Muhiuddin Khan — the most widely read Bangladeshi Quran translation. Both are served simultaneously alongside the original Uthmani Arabic script for every Ayah.
15 reciters are included: Mishary Rashid Alafasy, Abdurrahman As-Sudais, Maher Al-Muaiqly, Mahmoud Khalil Al-Husary, Mohamed Siddiq Al-Minshawi, Abdul Basit Abdus Samad (Murattal), Abu Bakr Ash-Shaatree, Ahmed Al-Ajamy, Ali Al-Hudhaify, Muhammad Ayyoub, Sa'ud Al-Shuraim, Abdul Basit Abdul Samad, Abdullah Basfar, Hani Ar-Rifai, and Ibrahim Walk (English translation recitation). Audio is streamed from the alquran.cloud CDN.
No — Tilawa requires an internet connection to load Surah data and stream audio from the Al-Quran Cloud API. However, all 114 Surah list metadata is cached at the CDN edge via Vercel's ISR, so the homepage and Surah list load very fast. Individual Surah data is fetched on demand with a 24-hour server-side cache.
Yes. Fork the repo at `github.com/mustafa-Mlab/tilawa-app`, run `npm install && npm run dev`, and it works locally immediately — no API keys needed (the Al-Quran Cloud API is public). To deploy, connect the GitHub repo to Vercel with a single click. Contributions via pull requests are welcome — especially new language translations, additional reciters, and accessibility improvements.
Al-Quran Cloud API v1 (`api.alquran.cloud/v1`) — a free, open-source RESTful API providing the complete Quran text in 80+ editions and audio in 40+ recitations. Tilawa uses the `surah/{id}/editions/quran-uthmani,en.sahih,bn.bengali` endpoint to fetch all three editions for each Surah in a single API call.
Yes. Tilawa uses the `quran-uthmani` edition — the Uthmani script is the standard preserved orthography of the Quran used in official Mushaf printings worldwide. The font used is Amiri (a digital Naskh typeface specifically designed for Arabic text and the Quran), loaded from Google Fonts with full harakat (diacritical vowel marks) support.