Quran Reading Tracker — architectural layout and system interface preview
MobileEngineering Case Study

Quran Reading Tracker

An offline-first Android mobile application built with React Native and Expo to cultivate and track daily Quran reading habits with complete privacy and local data persistence.

Offline-First Mobile Architecture
Role & ScopeMobile Developer
Target DomainMobile · Production
Core RuntimeReact Native, Expo, TypeScript
Operational & Architectural Invariants:
100% offline local privacyZero network telemetry or adsTimezone-resilient streak engine

The Problem

Existing Quran tracking apps frequently require cloud logins, display intrusive advertisements, and bundle third-party analytics trackers that compromise user privacy.

Technical Approach

Engineered an offline-first mobile app using React Native, TypeScript, and Expo. State and daily progress are serialized directly to local AsyncStorage with zero network requests.

Offline-First Dual Pipeline Architecture

[Step 1]Recitation Pipeline: Surah Index + Ruku Progress ──┐
[Step 2]Translation Pipeline: Surah Index + Ayat Tracker ──┼──> Local AsyncStorage Engine
[Step 3]Streak Engine: Daily Habit & Milestone Calculator ──┘
[Step 4]Privacy Guarantee: Zero network requests, zero telemetry, local persistence

Local data pipeline: Recitation and translation tracking decoupled with AsyncStorage persistence.

Key Highlights & Architecture

  • Dual independent tracking pipelines: Arabic recitation (Surah + Ruku) and Bangla translation (Surah + Ayat)
  • 100% offline-first privacy with zero trackers, zero cloud dependencies, and local AsyncStorage persistence
  • Daily streak calculators, reading target meters, and smooth dark-mode UI with Islamic aesthetics
  • Automated build workflow via Expo EAS for Android APK distribution

Engineering Challenges

  • Decoupling the distinct progress systems for Arabic recitation (measured in Rukus) and Bengali translation (measured in individual Ayats).
  • Calculating uninterrupted reading streaks and habit velocity accurately across arbitrary timezone adjustments.

Key Engineering Decisions

  • Zero-Network Architecture: No server backend, no authentication wall, and no telemetry SDKs — guaranteeing user privacy.
  • Optimistic Local State: UI updates immediately upon completion with asynchronous disk persistence.
Architecture Decision Records (ADRs)

Trade-Off Analysis & Architectural Rationale

✓
Decision Made

Dual Decoupled Pipelines (Ruku Recitation vs. Ayat Translation)

✕
Alternative Rejected

Single monolithic page counter

Why It Won (Technical Rationale)

Separates Arabic recitation targets from Bengali translation comprehension naturally.

Trade-Off Accepted

Requires dual state stores and separate streak milestone tracking.

Result & Outcome

Shipped a clean, lightweight Android application with daily habit tracking, streak preservation, and complete offline autonomy.

Technologies & Tools

React NativeExpoTypeScriptMobileOffline-FirstAsyncStorage