01
Industry
Digital Quran Education & Quran Memorization Technology
Alaa Amer Projects
A collection of outstanding projects I have developed
React
Next.js
IndexedDB
JSON
Tailwind CSS
TypeScript
PWA
Framer Motion
i18n
RTL Support
Cloudflare
Bootstrap
GitHub Actions
The Holy Quran of Medina - Hafs
a digital Madinah Mushaf experience based on the Hafs narration within an integrated digital platform combining an interactive Mushaf, surah and ayah study tools, memorization features, listening, and search.
The Holy Quran of Medina - Hafs is a digital Quran project focused on delivering a digital Madinah Mushaf experience based on the Hafs narration. The experience goes beyond displaying Mushaf pages by connecting each page to interactive ayah regions mapped to their exact positions. At the surah level, users can study virtues, characteristics, names and naming reasons, lessons, and numerical statistics. At the ayah level, the platform brings together meanings from 5 sources, more than 65,000 tadabbur pauses and reflections, tafsir from more than 20 sources, word-level I'rab, Mutashabihat, reasons for revelation from 5 sources, readable and audible Qira'at, and thematic coherence. It also includes full-Quran search, listening with more than 52 reciters, range selection and repetition, synchronized page progression, visual and voice memorization, bookmarks, light and dark modes, and companion mobile apps.
Status
Production
Pricing Model
Free
Key Features
Digital Madinah Mushaf in an interactive Hafs experience
Clickable ayah regions mapped to their exact positions on Mushaf pages
Surah study covering virtues, characteristics, names, naming reasons, and lessons
Numerical statistics for each of the 114 Quranic surahs
Ayah meanings from 5 sources
More than 65,000 tadabbur pauses, rhetorical insights, practical reflections, applications, and interactions
Tafsir resources from more than 20 sources
Detailed word-level I'rab analysis
Mutashabihat references and reasons for revelation from 5 sources
Readable and audible Qira'at resources for individual ayahs
Thematic links and contextual coherence between consecutive ayahs
Full-Quran search
Range-based and repeat listening with more than 52 reciters
Automatic page progression synchronized with recitation
Visual memorization mode that hides ayahs and reveals them on hover
Voice memorization with reading assessment and correction feedback
Bookmarks for saved memorization and revision locations
Light and dark modes
Companion apps on Google Play, Apple App Store, and Huawei AppGallery
Target Audience
Quran memorization students
Quran teachers and study circles
users looking for ayah meanings and tafsir
people interested in tadabbur and Qira'at
and anyone using a digital Mushaf for memorization
revision
and listening.
Professional Project Narrative
02
Project Type
Interactive digital Quran platform combining Mushaf presentation, surah and ayah study, memorization tools, and recitation.
03
Challenge
The challenge was not simply displaying the Mushaf. It was turning image-based Mushaf pages into an interactive experience connected to individual ayahs while organizing a very large body of Quranic, tafsir, linguistic, and tadabbur data so relevant information remains accessible from the ayah itself.
04
Solution
The solution combines precise ayah coordinates on Mushaf pages with Next.js interactive interfaces and Laravel APIs, organizing surah, ayah, tafsir, tadabbur, Qira'at, memorization, and listening resources into one connected experience.
05
My Role
I handled the project's technical design and development, including interactive Next.js interfaces, Laravel APIs, mapping ayah data to Mushaf pages and coordinates, and implementing search, listening, memorization, and assessment features with attention to performance and usability.
06
Business Goals
The goal is to help users move from simply reading the Mushaf to studying surahs, understanding and contemplating ayahs, then using them for memorization, revision, and recitation, while supporting multiple narrations and Mushaf editions within one ecosystem.
07
SEO Positioning
Content is organized around real search intents related to digital Mushafs, Quran memorization, ayah interpretation, and tadabbur. Each edition has its own contextual copy rather than duplicating the same description across narrations, while related internal links connect the case study to relevant services and projects.
08
Performance
The experience is designed to handle substantial content and multiple interactive flows without making users wait for ayah-related information, with attention to smooth navigation across Mushaf pages, study content, listening, and memorization.
09
Security
The frontend is separated from the data layer through APIs, with application-level and backend data access controls designed to help maintain platform stability and content integrity.
10
Results
The project was launched and made freely available, becoming part of the HefzMoyaser ecosystem that brings together multiple Quran narrations and Mushaf editions with study, memorization, listening, and tadabbur tools.
11
Why This Project Matters
The project's technical value comes from combining dense Quranic data with a visual interactive interface: an ayah is not treated as isolated text, but as an entry point to multiple layers of meaning, tafsir, I'rab, tadabbur, Qira'at, and memorization.
The Holy Quran of Medina - Hafs
Client Feedback
The project needed a clear way to present the Holy Quran of Medina in the Hafs narration with an easy reading experience. The website made access to the Quran and related content more organized.
Frequently Asked Questions About This Project
Yes, the platform is fully free with no subscription or purchase required, and all its tools are directly accessible via https://hefzmoyaser.net/madina/.
There is no separate Google Play app at the moment, but the platform is built as a PWA (Progressive Web App), which can be installed to your phone's home screen and used with a near-native app experience directly from the browser, without needing an APK file.
The platform is not a static PDF file — it's an interactive digital experience with memorization, tadabbur, and verse-level analysis tools, and it partially works offline thanks to local storage, offering a richer experience than a plain PDF.
The platform was fully designed and developed by Alaa Amer using React and Next.js for high performance and a smooth user experience. Full project details are available on his portfolio page.
Similar Project Idea?
Have a similar project idea you want to develop? Contact me directly via WhatsApp to discuss all the details and requirements
Technologies Used
This project was built using the latest technologies and tools to ensure best performance and security
React
Next.js
IndexedDB
JSON
Tailwind CSS
TypeScript
PWA
Framer Motion
i18n
RTL Support
Cloudflare
Bootstrap
GitHub Actions
Related Projects
