A free, donation-supported PWA for learning Quranic Arabic — from alphabet recognition to independent reading, with local-first AI, semantic verse discovery, offline Quran access, optional sync, and spaced repetition built in. No ads. No paywalls. I designed and built the whole thing myself.
NurQuran started from something personal. I wanted to build a free Quran learning app in loving memory of my father, and I wanted to use my design and engineering skills for something that mattered to me.
The app is meant to be a community resource. It is donation-supported only, with no ads, no subscriptions, and no paywalls planned. Optional accounts are there for sync and continuity, not to put learning behind a login.
At the same time, it pushed me into real product and engineering problems: performance on low-memory devices, offline reliability, i18n across 25 languages, local AI inference, semantic search without freezing the main thread, and push notifications on a free tier. Those are live constraints in the app today.
In late April I focused on hidden fragility: mobile memory pressure, offline route gaps, multilingual grounding drift, notification security, and failure modes that were too easy to miss.
Tap any feature to see how it was built, what tradeoffs were made, and what it looks like in practice.
The reader is the heart of the app. It supports two layout modes: a flat ayah-by-ayah scroll and a Mushaf Pro view that mirrors the physical 604-page book layout with authentic glyphs.
Every technical decision prioritized reliability on mobile — native window scrolling, programmatic jump guards, word-by-word audio sync, closed-player tap activation, and interactive glassmorphism tooltips that clamp to the visible viewport without causing horizontal scroll.
Tajweed coloring, 100+ reciters via Quran.com API, 25 selectable translations, interactive scholarly footnotes, Quran Essentials, Prophets Named in the Quran, and baseline bundled Quran text keep the core reading path useful even when the network drops.
The new /quran/prophets hub gives the Quran section a respectful way to explore all 25 prophets named directly in the Quran, without turning it into character art or speculative illustration.
Learners can move between a lineage-style tree, chronological timeline, and abstract map. The map uses approximate regions on purpose, with zoom and scattered tap targets so dense areas remain usable on mobile.
Each detail sheet is Quran-reference-backed: mention counts are separated by direct names vs. titles or address references, key ayahs link back into the reader, Ulul-'Azm prophets are called out, and tradition-only notes are clearly marked.
A fully local AI tutor that runs 100% in the browser. No API calls. No data leaves the device. It uses Transformers.js v4 with a dedicated static Web Worker to keep inference off the main thread.
The active launch path exposes Gemma 4 2B Vision as the validated desktop WebGPU model. Gemma 4 can preprocess image, audio, and lightweight video attachments in the worker; weaker mobile fallback behavior is intentionally not marketed as production-ready.
The AI has semantic memory stored in IndexedDB. Archived chat summaries are embedded locally with multilingual-e5-small and injected as RAG context for relevant follow-up sessions. For Quran questions, it auto-grounds through the same local search layer before responding.
A semantic verse discovery engine built around a 30-emotion catalog. Users describe how they're feeling — “anxious about the future”, “grateful” — and the engine surfaces the most contextually relevant ayahs.
The search runs in three tiers all under 100ms: exact token lookup → binary prefix search with typo tolerance → substring fallback. It runs in parallel with the Quran.com API for proper nouns and Arabic phrases. Results are ranked using a curated semantic boosts system and qualitative match levels (Strong / Moderate / Weak).
The full dataset covers 6,236 ayahs with 20+ semantic fields each: themes, life situations, user intents, emotional triggers, and aliases. A shared 25-language intent supplement now powers both Ask Quran and Hodja grounding without duplicating Quran verse mappings per language.
A full Quranic Arabic curriculum anchored by spaced repetition: letters, harakat, combinations, vocabulary, roots, Sarf, Nahw, Tajweed, Asma-ul-Husna, and a Real Arabic Bridge.
The homepage Path of Light now renders from a typed curriculum contract with levels, prerequisites, Quran references, grammar/tajweed tags, SRS authority, and localization keys. Advanced learners can browse freely while beginners still see the next useful step.
Daily flow onboards 3-5 new items based on performance, top-ups the deck after reviews clear, and writes reinforcement-only practice events for Sarf, Nahw, and Tajweed without confusing quiz activity with true SRS mastery.
The app is built around a concrete offline contract. After first install, core navigation, learning modules, practice screens, Quran library routes, the Prophets hub, all surah reader shells, and all Mushaf-by-surah shells are available without a live network.
The service worker handles route precache, App Router data caching, local fallbacks, proactive version checking against app-version.json, and predictable cache namespaces through the shared APP_VERSION string.
Large asset updates use atomic OPFS swaps: download to .tmp → verify integrity → bulk-insert to IndexedDB → rename files. Ask Quran and Divine Guidance now degrade to local-only data instead of hanging when Quran.com expansion is unavailable.
The account system is deliberately optional. Anonymous users keep the full local-first app, while signed-in users can carry key progress across devices through Better Auth, Neon Postgres, Drizzle, and server-side sync routes.
The current sync baseline covers shared settings, reader/Mushaf history, bookmarks with note tombstones, standalone journal notes, visible progress, and a conservative per-card SRS merge so a blank device can inherit learned state before full review-event sync exists.
Quran.Foundation linking is implemented through PKCE and server-side token exchange. Profile, streak, reading sessions, bookmarks, and notes are imported read-only for now; export/writeback waits for explicit user controls and conflict review.
A high-fidelity sharing engine that turns any ayah into a beautiful social media card. Every card uses “Liquid Glass” glassmorphism with a procedural Islamic geometric pattern uniquely seeded by the Surah and Ayah number.
The pipeline handles two output streams in parallel: a pixel-perfect PNG export (using html-to-image at 1x to avoid iOS Safari OOM crashes) and a normalized plain-text stream for Web Share API and clipboard — stripping all HTML tags before sharing.
Scholarly footnotes render as professional circular badges in the exported image. A global FontWarmer pre-loads critical Quranic calligraphy fonts before any capture to guarantee consistent rendering.
NurQuran is my experiment in directed vibe coding— orchestrating multiple AI agents with intentionality, delegating tasks based on each model's actual strengths rather than using a single tool for everything.
NurQuran runs as a fully installable PWA. No app store required.