NoorPath

Inspiration

Quran learning often requires moving between separate tools for reading, tafsir, memorisation, vocabulary, and personal consistency. We wanted to create one calm, focused learning space that helps learners return to the Quran every day without making AI the source of truth.

What it does

NoorPath is a browser-based Quran learning prototype built around a local Quran corpus.

Users can:

Read the Quran by Surah, Ayah, or global ruku.
Switch between English and Urdu translations.
View local ayah-level tafsir and word-by-word Arabic vocabulary.
Practise Hifz with pause-mark-aware continuation questions.
Study a ruku through grouped tafsir lessons and vocabulary quizzes.
Track daily habits including salah, reading, Hifz, lessons, vocabulary, charity, and social-media time.

Optional AI features can create a short ruku overview, a five-question quiz, and a lesson Q&A response. These features are supplementary: they are grounded in the selected local tafsir context and never replace canonical Quran text or verified tafsir.

How we built it

NoorPath is a static web application built with vanilla JavaScript, HTML, and CSS.

The Quran corpus, translations, metadata, tafsir, and vocabulary are stored locally as JSON. We separated data access into focused services: the Quran service handles Surah and ruku lookup, while tafsir and vocabulary services lazy-load and cache data for the active Surah. Browser localStorage keeps progress private to the learner’s device.

The interface uses a lightweight state-driven renderer, delegated events, responsive styling, and RTL-aware Arabic presentation. Optional Gemini requests are isolated in their own service and receive only the selected study context.

Challenges we ran into

The main challenge was balancing useful AI assistance with the sensitivity of Quranic study. We kept canonical Quran data and generated content separate, restricted AI context to the selected local tafsir excerpts, and made AI optional.

We also worked through Arabic-specific UI details: right-to-left layout, word display, and splitting Hifz practice at meaningful pause marks without breaking a word. Finally, we designed the app to remain useful even when optional AI or supporting local files are unavailable.

What we learned

We learned that trustworthy learning tools need clear source boundaries, not only polished AI features. Local-first data, narrow AI context, graceful fallbacks, and simple service boundaries made NoorPath easier to reason about and safer to extend.

We also learned how much product quality depends on small interaction details: progress should be private and reliable, Arabic should render naturally, and memorisation feedback should encourage learners to continue after a wrong answer.

What's next for NoorPath

Next, we would add scholar-reviewed and fully attributed source material, a secure backend for cross-device progress, authentication, citations for generated responses, and a production-safe server-side AI integration.