Project

BayyinahHub

A web application designed to help users search and understand Islamic knowledge including Quran, Hadiths, and Islamic wisdom with AI-powered explanations using multiple Islamic data sources and GPT-4.

BayyinahHub - Islamic Knowledge Search & AI Explanations

BayyinahHub is a web application designed to help users search and understand Islamic knowledge including the Quran, Hadiths (prophetic traditions and sayings), and Islamic wisdom. The application provides an intuitive search interface and AI-powered explanations to make Islamic knowledge more accessible and understandable.

Key Features:

- Quran Search: Access the complete Quran text with Tafsir using Quran.com API

- Hadith Search: Search through authentic Hadith collections from multiple sources

- Islamic Wisdom Resources: Access Dorar Net for Islamic legal rulings and knowledge

- Islamic Duas & Supplications: Browse authentic duas from Hisnmuslim.com

- AI-Powered Explanations & Conversations: Get simplified, context-aware explanations using GPT-4 and engage in conversations with the AI to deeply understand the hadiths and Islamic knowledge

- Bilingual Support: Full Arabic language support for an authentic experience

- Responsive Design: Modern, mobile-friendly interface with smooth animations

- Demo Mode: Built-in demo data for development and testing without API keys

Data Sources:

BayyinahHub integrates multiple comprehensive Islamic knowledge sources:

- Quran.com: Complete Quranic text with translations and audio recitations

- Dorar.net: Comprehensive Islamic jurisprudence and Islamic rulings

- Dore.net: Islamic Hadith database and Islamic teachings

- Hisnmuslim.com: Authentic Islamic supplications and duas

- Uses paginated API calls to fetch comprehensive Islamic knowledge

- Automatically deduplicates results to ensure accurate information

- Covers all major Islamic knowledge domains

Tech Stack:

- Framework: Next.js (v16.1.6) with TypeScript

- Styling: Tailwind CSS v4

- Animations: Framer Motion

- API Integration: Quran.com API, Dorar API, Islamic wisdom APIs, OpenAI GPT-4o-mini for explanations

Project Structure:

- /src/app - Next.js app directory with main pages and API routes

- /src/components - React components for different page sections

- /public - Static assets and logos

Deployment:

Frontend deployed on Vercel, Backend deployed on DigitalOcean. The application supports development without API keys using demo data. Missing API keys will automatically fall back to demonstration data for testing purposes.

Built with

Next.js 16.1.6TypeScriptTailwind CSS v4Framer MotionOpenAI GPT-4o-miniNode.jsVercelDigitalOcean

February · 2026

Assistant
AdRohal's Portfolio Assistant
Ask about skills, projects & experience!

👋 Hi! I'm AdRohal's Assistant

I can help you learn about:

  • Programming skills & technologies
  • Featured projects & work
  • Background & experience
  • Contact information
  • Education & certifications