Digital Publication & Web Platform2024• Open Islamic Tech Foundation

DiQuran: Modern & Accessible Digital Quran Experience

An ultra-fast, offline-first digital Quran reader with localized audio recitations, phonetic search, word-by-word transliteration, and bookmark sync.

Live Project Demo Source Code

Role: Full-Stack Engineer & Product Designer

DiQuran: Modern & Accessible Digital Quran Experience

Verifiable Architectural Benchmarks

38msInitial Page Load

15,000+Daily Active Readers

100%Offline Availability

114Surah Chapters

Technologies & Framework Stack

Next.js 16TypeScriptSupabaseTailwind CSSIndexedDBWeb Audio API

Executive Overview

DiQuran delivers a distraction-free, respectful digital reading environment. Designed to run flawlessly on low-end smartphones with intermittent 3G connectivity, it utilizes aggressive caching, service worker pre-buffering, and IndexedDB storage to guarantee instant verse lookup.

Key Highlights * Zero-Latency Audio Player: Custom Web Audio API implementation with synchronized verse highlighting and gapless playback. * Optimized Font Rendering: Precision font-display strategy utilizing Amiri and Scheherazade New with zero Cumulative Layout Shift (CLS). * Multi-language Tafsir: Searchable database of classical and contemporary interpretations with full-text search capability.

Previous Case Study

ErzenUI: Enterprise Component Library & Design Tokens

Next Case Study

MatchaLabs: Automated Deployment Pipeline & Telemetry