KH
Open navigation menu
Back to work
Mushaf Eqrra public product presentation showing its Quran reader on desktop and mobile

AI-assisted recitation · Advanced Quran reader

Mushaf Eqrra

A Quran platform combining an advanced reader with an AI-assisted recitation experience. I worked extensively across the consumer product and its administration system.

Visit product

Role

Major frontend contributor across the consumer application and admin dashboard; I also helped shape the session protocol with the backend engineer.

Scope

Smart-recitation session UX and transport · Advanced Quran reader and synchronized audio · Six-language localization and route behavior · Administration workflows and content operations

Team

A project manager, QA engineer, one backend engineer, two to three frontend engineers, and two designers.

Challenge

Turning complexity into legible state.

Challenge

A live recitation session has to coordinate browser audio, asynchronous analysis, verse position, categorized mistakes, timeouts, and recovery—while keeping the reader understandable and responsive.

Approach

I implemented the frontend session lifecycle, browser audio capture and processing, live transport, verse synchronization, feedback states, visualization, and error handling. I also contributed to cached Mushaf rendering, reader modes, RTL navigation, reciter switching, Arabic-number search, and page-boundary behavior.

Outcome

Readers receive contextual feedback inside the Quran experience instead of moving between disconnected tools. The product supports Arabic, English, Spanish, Indonesian, Turkish, and Urdu across a responsive consumer platform.

Selected contributions

  1. 01Helped define the frontend/backend smart-recitation session protocol without claiming ownership of the AI model.
  2. 02Integrated a browser audio-processing worker, MessagePack transport, live session behavior, privacy and timeout states.
  3. 03Synchronized selected verses, reciters, audio playback, and rendered Mushaf pages.
  4. 04Contributed to the newer React/Vite administration dashboard and its localized content workflows.

Stack

Next.jsReactTypeScriptnext-intlMUISocket.IOWeb AudioDexieTanStack Query

Repository snapshot

939 of 1,191 commits in the inspected consumer history and 110 of 125 commits in the inspected admin history were attributed to my identified Git identities.

Commit totals are repository snapshots, not a measure of product ownership; aliases, merges, and squashed work can affect them.

Continue exploring

Abstract blue modular system representing Univerta's shared frontend architecture
01Education platform · Frontend architecture

Univerta

Broad admin and student workflows, plus an Nx dependency cleanup that restored hot reload and improved a controlled Lighthouse run from 78 to 92.

View case study
Abstract council of connected learning participants around an open book and audio waveform
02Learning operations · Real-time administration

Mutoon Admin

An administration platform built from its initial setup, including live hearing councils, GraphQL workflows, attendance, and certification.

View case study
Abstract radar field connecting media signals, report progress, filters, and analytics
03Media analytics · Long-running reports

Adam Radar

Data-rich dashboards and a resilient custom-report workflow with polling, cancellation, pagination, notifications, and CSV export.

View case study