Read
The complete Quran, two translations, adaptive typography, themes, and saved reading progress.
Selected work
Offline-first product case study
Al-Quran
A multilingual reading and listening experience designed to remain useful without a network connection.
Project overview
Reading should not depend on a strong signal—or perfect eyesight.
Many Quran apps become limited when connectivity is poor, hide essential preferences behind complex menus, or make audio storage difficult to understand. Al-Quran starts from a different premise: the core reading experience belongs on the device.
The static PWA and Capacitor Android app need no application server. Quran content and personal data remain local, while Cloudflare R2 supplies recitation only when it has not been downloaded.
Listen
Streaming plus deliberate per-surah downloads, repeat controls, a sleep timer, and continuous playback.
Study
Offline multilingual search, categorized bookmarks, personal notes, and exact-ayah navigation.
Product goals
Useful everywhere.
Personal by default.
- 114
Complete offline libraryEvery surah and ayah is available without an account or connection.
- 02
Translation languagesBangla and English flow through the interface, hierarchy, and search.
- 04
Typography sizesLarger Arabic and translation choices appear with live previews.
- 01
Device-owned profileSettings, bookmarks, progress, and downloads stay private and local.
Core experience
Designed around the act of reading.
01
Preferences before complexity
First run introduces one decision at a time: language, Arabic and translation sizes, visible translations, and theme. Those choices shape every screen that follows.
- English and Bangla interface modes
- Four Arabic and translation sizes
- Sepia and dark themes
- Primary and secondary translation order
02
A calm, layered reader
Arabic receives visual priority. The selected primary translation follows, while a quieter secondary translation remains available. The reader remembers the most visible ayah.
- Language-aware typography and RTL metadata
- One ayah per readable visual unit
- Quick play and bookmark actions
- Safe-area and reduced-motion support
03
One player, everywhere
A persistent player follows the reader throughout the app. Common playback stays simple; memorization and sleep controls live in a compact panel.
- Previous, next, seek, play, and pause
- Repeat counts for memorization
- Sleep timer and continuous playback
- Optional transition to the next surah
04
Downloads with visible state
Users choose which surahs to store. A global queue processes one MP3 at a time and reports byte percentage alongside completed-ayah progress.
- Pause, resume, queue, and delete states
- Completed files survive interruptions
- Confirmed deletion clears every layer
- No unintended service-worker audio cache
05
Search and personal study
A Web Worker searches Arabic, Bangla, English, and surah names on-device. Results jump to the exact ayah; bookmarks add categories and private notes.
- Arabic normalization without tashkeel
- Case-insensitive Latin text matching
- Free-form bookmark categories
- Private notes stored locally
Technical architecture
No account.
No application server.
The browser gets a versioned Quran seed, then IndexedDB becomes the local operating layer. Android contains the same static export. Only recitation audio leaves the device workflow.
One codebaseNext.js static export
→WebInstallable PWA
AndroidCapacitor APK
On-deviceDexie / IndexedDB
Audio deliveryCloudflare R2
Interface
Next.js App Router, React, TypeScript, Tailwind CSS, Radix primitives
Canonical source
Validated read-only SQLite database
Browser data
Versioned seed imported transactionally into Dexie / IndexedDB
Offline shell
Serwist service worker with app and Quran-data precaching
Search
Web Worker with normalized Arabic, Bangla, and English text
Audio
Cloudflare R2 streaming with explicit on-device Blob downloads
Android
Capacitor 8 wrapper containing the static application
Data integrity
Static does not mean unverified.
The canonical SQLite source is checked before a reproducible generator creates the browser seed. Existing installs fetch only a tiny version manifest unless the data changes or the local database is incomplete.
Engineering challenges
Offline reliability is a systems problem.
Reliable initialization
Transactional chunked writes, visible progress, and a lightweight version check keep thousands of records from making repeat launches expensive.
Correctness under interruption
Abort controllers, queue state, active-task tracking, and a final transactional deletion check stop late writes from resurrecting deleted files.
One copy of every audio file
MP3 requests remain network-only in the service worker, while explicit downloads bypass HTTP cache. Audio is never silently stored twice.
Native behavior from a PWA
The static export ships inside the APK. Capacitor supplies the native shell while WebView storage retains personal study data through upgrades.
Outcome
One codebase.
Reading everywhere.
The completed first version works as an installable website and Android application while keeping the full reading experience offline. Users control language, readability, personal data, and audio storage without an account or backend.