My mother uses the Tilawa app daily. Not for listening to the full Quran — she does that from a physical Mushaf. She uses it for two things: the Bangla translation when a verse's meaning isn't clear to her, and the Tasbih page.

The Tasbih — the daily dhikr and remembrance supplications — is something she reads after every Salah. SubhanAllah 33 times, Alhamdulillah 33 times, Allahu Akbar 34 times. The Ayatul Kursi. The morning and evening Azkar. She wanted all of this in one place, with Bangla text, and a button to copy a phrase to send to her WhatsApp group.

That conversation became the Du'a & Remembrance page.

The data structure is straightforward. Everything lives in src/lib/islamicData.ts — a plain TypeScript file with no external dependencies. It exports arrays:

  • ALLAH_NAMES: 99 items, each with id, arabic, transliteration, english, bangla
  • KALIMAS: 5 items, each with title, arabic, transliteration, english, bangla
  • SANA: single item, the opening supplication of Salah
  • AZAN_PHRASES: the phrases of the Adhan in sequence
  • TASBIH_AZKAR: 40+ items with title, Arabic text, transliteration, English, and Bangla

All Arabic data in these arrays is hardcoded — it doesn't call any API. This means the page loads instantly with no network dependency, works offline (for the data itself), and has no rate-limit concerns.

The page is a tabbed interface. Four tabs at the top: Tasbih & Azkar, Kalimah, Sana, Azan. The active tab controls which section is visible. On mobile, the tabs scroll horizontally.

The 99 Names section is not tabbed — it's always visible below the main tabs, since it's a reference rather than a daily practice item. Each Name card shows the Arabic name in large Amiri font, the transliteration, the English meaning, and the Bangla meaning.

The Kalimas use an accordion. There are 5 Kalimas, each one a significant declaration of faith. The accordion lets users expand just the one they're reciting without the page being overwhelmed by five long Arabic passages at once. The first Kalima is open by default.

Each item — whether a Name, a Kalima, or a Tasbih Azkar entry — has two buttons: Copy and Share.

Copy is a straightforward clipboard write:

const handleCopy = async (id: string, text: string) => {
  await navigator.clipboard.writeText(text);
  setCopiedId(id);
  setTimeout(() => setCopiedId(null), 2000);
};

The copiedId state switches the button icon from a copy icon to a checkmark for 2 seconds to confirm the copy visually.

Share uses the Web Share API — navigator.share() — which on mobile opens the native share sheet (WhatsApp, Telegram, Messages, etc.). On desktop browsers that support it, it opens a share dialog. On browsers that don't support it (older desktop Chrome, Firefox), I fall back to copy-to-clipboard. The fallback detection is typeof navigator.share !== 'undefined'.

One thing I did that feels good in practice: the copy text for each Tasbih Azkar includes the Arabic text, followed by the transliteration, followed by the Bangla meaning — formatted as a single shareable message. So when my mother pastes it into her WhatsApp group, it's readable for everyone regardless of whether they can read Arabic script.

Mustafa Kamal Hossain

Mustafa Kamal Hossain

Founder & Principal Engineer at Manfi. Passionate about Laravel, SaaS architecture, and high-performance engineering.