How to Build a Muslim Dua App Using a Free Islamic Content API (No API Key Required)

If you're building an Islamic app — a dua tracker, a daily adkar reminder, a prayer companion, or a new Muslim learning tool — you've probably run into the same problem: finding clean, structured Islamic content via API is surprisingly hard.

Most options either require a paid plan, need you to email someone for an API key, or only cover one narrow topic like prayer times or raw hadith databases.

I built and open-sourced a free Islamic content API called Naikiyah to solve exactly this. In this tutorial I'll walk you through what it offers and how to build a simple dua app with it in under 30 minutes.

---

What is the Naikiyah Islamic Content API?

The Naikiyah API is a free, open Islamic content API built as Sadaqah Jariyah — ongoing charity. No API key, no rate limits, no cost. Ever.

Here's what it covers across 7 endpoints:

Endpoint	What it returns
/api/dailyAdkar	Morning & evening adhkar with Arabic, transliteration, and benefits
/api/postSalaah	Zikr and duas to recite after salah
/api/usefulDuas	100+ duas organized by category (travel, health, family, etc.)
/api/prayerGuide	Complete guide to what to recite in each part of salah
/api/surahVirtues	Surahs to read regularly with virtues and hadith sources
/api/fortyNawawi	Full 40 Hadith Nawawi with Arabic, translation, and explanations
/api/fiqhBasics	59 fiqh rulings across 13 sections — wudu, ghusl, prayer, zakat, hajj and more

Base URL: https://dua-data-api.vercel.app

Also available on RapidAPI if you prefer using a unified API platform.

---

Let's Build: A Simple Daily Dua App

We'll build a minimal React app that:

• Fetches duas from the API
• Displays them by category
• Shows Arabic text, transliteration, and translation

Step 1 — Fetch the Data

No setup needed. Just call the endpoint directly:

const response = await fetch('https://dua-data-api.vercel.app/api/usefulDuas');
const duas = await response.json();
console.log(duas);

The response looks like this:

[
  {
    "id": 1,
    "title": "Dua for Traveling",
    "category": "Travel",
    "arabic": "سُبْحَانَ الَّذِي سَخَّرَ لَنَا هَذَا...",
    "transliteration": "Subhanal-ladhi sakh-khara lana hadha...",
    "translation": "Glory to Him who has subjected this to us..."
  }
]

Clean, consistent, ready to render. No parsing headaches.

Step 2 — Build the Component

import { useState, useEffect } from 'react';

export default function DuaApp() {
  const [duas, setDuas] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    fetch('https://dua-data-api.vercel.app/api/usefulDuas')
      .then(res => res.json())
      .then(data => {
        setDuas(data);
        // Extract unique categories
        const cats = ['All', ...new Set(data.map(d => d.category))];
        setCategories(cats);
      });
  }, []);

  const filtered = selectedCategory === 'All'
    ? duas
    : duas.filter(d => d.category === selectedCategory);

  return (
    <div style={{ maxWidth: 600, margin: '0 auto', padding: 24, fontFamily: 'sans-serif' }}>
      <h1>Daily Duas</h1>

      {/* Category Filter */}
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
        {categories.map(cat => (
          <button
            key={cat}
            onClick={() => setSelectedCategory(cat)}
            style={{
              padding: '6px 14px',
              borderRadius: 20,
              border: 'none',
              background: selectedCategory === cat ? '#568f56' : '#eee',
              color: selectedCategory === cat ? 'white' : '#333',
              cursor: 'pointer'
            }}
          >
            {cat}
          </button>
        ))}
      </div>

      {/* Dua Cards */}
      {filtered.map(dua => (
        <div key={dua.id} style={{
          border: '1px solid #e0e0e0',
          borderRadius: 12,
          padding: 20,
          marginBottom: 16
        }}>
          <p style={{ fontSize: 12, color: '#568f56', fontWeight: 600, marginBottom: 4 }}>
            {dua.category}
          </p>
          <h3 style={{ marginBottom: 12 }}>{dua.title}</h3>
          <p style={{
            fontSize: 22,
            textAlign: 'right',
            direction: 'rtl',
            lineHeight: 1.8,
            marginBottom: 12,
            fontFamily: 'serif'
          }}>
            {dua.arabic}
          </p>
          <p style={{ color: '#666', fontStyle: 'italic', marginBottom: 8 }}>
            {dua.transliteration}
          </p>
          <p style={{ color: '#333' }}>{dua.translation}</p>
        </div>
      ))}
    </div>
  );
}

That's it. A fully functional, filterable dua app in ~60 lines.

---

Going Further — Other Endpoints

Daily Adkar with Benefits

const response = await fetch('https://dua-data-api.vercel.app/api/dailyAdkar');
const { duas } = await response.json();

// Each adkar has:
// - duaTitle, dua (Arabic), transliteration, translation
// - times (how many times to recite)
// - benefits.benefitOne, benefits.benefitTwo

Great for building a morning/evening adkar tracker with streak tracking.

Post-Salah Zikr

const response = await fetch('https://dua-data-api.vercel.app/api/postSalaah');
const zikr = await response.json();

// Each item has:
// - arabic, transliteration, translation
// - repeat (number of times to recite)

Perfect for a post-prayer counter screen — show each zikr with a tap counter.

40 Hadith Nawawi

const response = await fetch('https://dua-data-api.vercel.app/api/fortyNawawi');
const hadiths = await response.json();

// Each hadith has:
// - number, title, topic, arabic
// - translation, narrator, source

Use this for a "Hadith of the Day" feature — just pick a random one each day.

Fiqh Basics

const response = await fetch('https://dua-data-api.vercel.app/api/fiqhBasics');
const fiqh = await response.json();

// Returns 13 sections, 59 items total covering:
// Wudu, Ghusl, Tayammum, Prayer, Fasting, Zakat, Hajj and more
// Each item has: title, points[], note

This is the most unique endpoint — I haven't found another free API that provides structured fiqh rulings like this. Great for a "Learn Islam" section in your app.

---

Using via RapidAPI

If you prefer managing all your APIs in one place, it's also available on RapidAPI:

const response = await fetch(
  'https://naikiyah-islamic-content.p.rapidapi.com/api/usefulDuas',
  {
    headers: {
      'x-rapidapi-key': 'YOUR_RAPIDAPI_KEY',
      'x-rapidapi-host': 'naikiyah-islamic-content.p.rapidapi.com'
    }
  }
);
const duas = await response.json();

Subscribe for free at: rapidapi.com/sahussain887/api/naikiyah-islamic-content

---

What Could You Build With This?

Here are some ideas:

• Daily adkar reminder app — morning/evening notifications with the full adkar text
• New Muslim learning app — fiqh basics + prayer guide as structured lessons
• Dua book app — searchable, categorized collection of 100+ duas
• Islamic habit tracker — track daily adkar, post-salah zikr completion
• Hadith of the day widget — rotating 40 Hadith Nawawi on a home screen widget
• Prayer companion — step-by-step salah guide using the prayerGuide endpoint

---

Summary

The Naikiyah API gives you everything you need to build a practical Islamic app without hunting down content from multiple sources:

✅ Free forever — no API key, no rate limits

✅ 7 endpoints covering duas, adkar, hadith, fiqh, and prayer

✅ Clean JSON — Arabic, transliteration, and translation included

✅ Available directly or via RapidAPI

Direct API: https://dua-data-api.vercel.app

RapidAPI listing: https://rapidapi.com/sahussain887/api/naikiyah-islamic-content

Built for Naikiyah — a Muslim lifestyle app on the App Store.

---

May Allah accept this as Sadaqah Jariyah and benefit the Muslim developer community. 🤲

---