Quran Web App

Project Overview

A modern, accessible digital Al-Quran web application built for daily recitation and spiritual study. Features comprehensive 114 surah navigation, verse-by-verse Indonesian and English translations, audio recitation playback, tafsir explanations, and local prayer schedule integration.

Key Features

• 114 Surah Reader with Arabic Typography: Beautiful, crisp Arabic font rendering with Tajweed-friendly line spacing and customizable text magnification.
• Instant Verse & Surah Search: Real-time client-side search filtering surahs by Latin name, Arabic name, number, or translation keywords in milliseconds.
• Synchronized Audio Murottal: Integrated audio player supporting multiple world-renowned Qaris with active verse highlighting for memorization.
• Geolocation Prayer Times: Calculates accurate daily Islamic prayer times automatically derived from the visitor's browser geolocation coordinates.

Engineering Challenges & Solutions

• Arabic Diacritics (Harakat) Clipping: Calibrated CSS line-height, text-align, and font-rendering properties to ensure complex Arabic diacritics never truncate on compact mobile screens.
• Strict TypeScript API Schema: Constructed strict TypeScript interfaces mapping deeply nested external Quran API payloads to avoid undefined rendering crashes.