07 / 08 · PWA · Audio
Quran Web App
Offline-first scripture PWA, dual Arabic typography & audio recitation engine
Overview
A feature-rich, accessible scripture study Progressive Web App. Includes complete 114 Surahs with dual Arabic typography options (Uthmani and Simple scripts), English and Bengali translations, and verse-by-verse transliteration. The embedded audio engine begins streaming in under 150ms through pre-buffered audio pooling, while service-worker caching enables seamless offline study. User preferences, bookmarks, and daily reading goals are persisted locally via Zustand.
- Next.js 16
- React 19
- TypeScript 5.7
- Tailwind CSS 4.2
- Zustand 5
- HTML5 Audio API
- Service Workers
- Radix UI
- Audio start
- < 150 ms
- Offline
- Full PWA
- Bundle
- Ultra-light
- Install
- One tap
Engineering decisions
Low-Latency Audio Pooling
HTML5 Audio streaming engine with audio segment pre-buffering that begins clear recitation in under 150ms.
Offline-First Service Worker
Cache-first progressive web app strategy delivering full offline scripture accessibility on both iOS and Android.
- 01
Low-latency HTML5 audio playback architecture with pre-buffered surah streaming, per-ayah sync, and a persistent global player.
- 02
Offline-first PWA caching strategy via Service Workers ensuring complete chapter and verse availability without network connectivity.
- 03
Persisted Zustand store managing user reading bookmarks, custom Arabic font scaling, and theme preferences.
- 04
Fast client-side verse indexing enabling real-time search across Arabic text, English translations, and Bengali transliterations.
Screens & Walkthrough
Production gallery(3 high-res captures)
Next project