All Work
/work/muslim-tabWorkspace ↗
CASE STUDYBROWSER EXTENSIONLive

Muslim Tab

Muslim Tab began as a focused browser extension and evolved into a daily-use product with translations, reciters, continuous Ayah playback, prayer information, and additional Islamic resources.

ROLEProduct Creator & Lead Frontend Engineer
TYPEChrome Extension (Manifest V3)
FOCUSZero-Latency New-Tab Startup & Offline Audio Synthesis
STATUSPublic / Active in Chrome Web Store
STACK:React · TypeScript · Chrome Extension APIs · Web Audio API · Tailwind CSS
chromewebstore.google.com/detail/muslim-tab/giklpccffodlakiebphbajhefijhompn
Muslim Tab Interface Preview
PROBLEM & BOUNDARIES

The Challenge & Constraints

Browser new-tab extensions must initialize instantaneously (< 80ms) on every single tab open. The challenge was delivering a feature-rich spiritual dashboard—complete with 30+ Quran translations, 28+ audio reciters, continuous playback, dynamic prayer schedules, and Hijri calendar conversions—without introducing visual flicker, API latency, or background battery drain.

CORE CONSTRAINTS

  • #01Chrome Extension Manifest V3 strict security policies (no eval, no remote scripts, limited background service worker lifecycles)
  • #02Strict 80ms budget from tab creation to full interactive render
  • #03Complex time-based prayer calculation algorithms requiring offline geographic coordinates
  • #04Seamless audio streaming across multiple reciters with persistent playback state
ENGINEERING ARCHITECTURE

Offline-First Reactive State & Storage Architecture

Deliberate technical choices evaluated against operational realities, performance budgets, and long-term maintainability.

01 /Implement a hybrid storage model combining chrome.storage.local for fast synchronous hydration with IndexedDB for heavy translation bundles

WHY THIS DECISION

chrome.storage.local provides lightning-fast reads on tab instantiation, while IndexedDB comfortably stores multi-megabyte verse corpora without quota friction.

TRADE-OFF ACCEPTED

Requires two-tier cache invalidation and storage migration logic across extension updates.

02 /Local astronomical calculation engine for prayer times and solar elevations instead of network API queries

WHY THIS DECISION

Ensures prayer times are calculated instantly offline without network dependency, API rate limits, or external server downtime.

TRADE-OFF ACCEPTED

Requires bundling trigonometric calculation routines and geographic timezone lookup tables into the extension package.

03 /Lightweight Web Audio abstraction for continuous recitation with pre-buffered segment transitions

WHY THIS DECISION

Prevents audible gaps between sequential Ayah audio tracks during continuous listening sessions.

TRADE-OFF ACCEPTED

Requires careful memory cleanup to prevent background tab memory leaks during extended listening.

VERIFIED IMPACT

Measurable Outcomes

Observable metrics and verified deliverables achieved in production.

< 65msNew-Tab StartupLocal storage hydration & instant DOM paint
30+Quran TranslationsMulti-language verse translations
28+Audio RecitersHigh-fidelity continuous verse recitation
  • Achieved sub-65ms cold start time on new tab initialization, beating typical web application benchmarks
  • Shipped 30+ language translations and 28+ verified reciters to users worldwide
  • Zero external API dependencies for core daily functions (offline prayers, bookmarks, and Quran texts)
  • Maintained 99.9% crash-free session rate across diverse Chrome OS, macOS, and Windows browser environments

Building something technically demanding?

I work on complex SaaS platforms, interactive systems, and high-performance web experiences.