Fatwa Search App

A specialized search application designed to help Muslims find Islamic rulings (fatwas) and content from the Mashāyukh. This web application provides a curated search experience restricting the search to known websites and channels.

Table of Contents

• Fatwa Search App
  • Table of Contents
  • Features
  • Getting Started
  • Setup Instructions
    • 1. Google Custom Search Engine Setup
    • 2. Google Cloud Console Setup
    • 3. Environment Variables
  • Usage
  • Technology Stack
  • Contributing
  • Privacy and Data Usage
  • Contact
  • License

Features

• YouTube Search Integration: Search through verified Islamic scholar channels
• Verified Channels:
  • فضيلة الشيخ محمد بن صالح العثيمين
  • العلامة الدكتور صالح الفوزان
  • قناة ميراث الأنبياء المرئية
  • Think Reflect Ponder
  • قناة الشيخ أ.د عبد الله بن عبد الرحيم البخاري
  • قناة الشيخ محمد ابن عثيمين الرسمية
  • موقع الشـ/ خالد الظفيري
  • د. محمد بن غالب العُمري
  • شبكة بينونة للعلوم الشرعية
  • بوابة تراث الإمام الألباني
  • درر الشيخ الألباني
  • موقع الشيخ صالح الفوزان
  • الشيخ عبد الرزاق البدر
  • القناة الرسمية لموقع سماحة الشيخ عبدالعزيز بن باز
  • سماحة الشيخ عبدالعزيز بن عبدالله آل الشيخ
  • فضيلة الشيخ محمد أمان الجامي
  • فضيلة الشيخ صالح آل الشيخ - SalihAlalsheikh
  • فضيلة الشيخ ابن باز Alsheikh Binbaz
  • قناة مؤسسة عبد العزيز بن باز الخيرية الرسمية
  • قناة مؤسسة عبد العزيز بن باز الخيرية الرسمية
  • قناة مؤسسة عبد العزيز بن باز الخيرية الرسمية
• Channel Filtering: Filter results by specific scholars or channels
• Verified Sites: Search through verified Islamic sites
  • موقع الشيخ محمد بن صالح العثيمين
  • موقع العلامة صالح الفوزان
  • موقع سماحة الشيخ صالح اللحيدان
  • موقع سماحة الشيخ عبد العزيز بن باز
  • موقع الشيخ عبد الرزاق البدر
  • موقع الشيخ عبيد الجابري
  • موقع العلامة صالح آل الشيخ
  • موقع ميراث الأنبياء
  • موقع العلامة محمد ناصر الدين الألباني
  • موقع الشيخ ربيع المدخلي
• Scholar Request System: Request new scholars to be added to the searching list
• Channel Submission: Submit YouTube channels for consideration
• Sharing Capabilities: Easily share search results with others
• Mobile Responsive: Works seamlessly on all devices
• Modern UI: Built with Tailwind CSS and shadcn/ui components

Getting Started

1. Clone the repository
2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 to view it in your browser.

Setup Instructions

1. Google Custom Search Engine Setup

1. Go to Programmable Search Engine
2. Enter the following sites in "Sites to search":

binothaimeen.net/*
alfawzan.af.org.sa/*
lohaidan.af.org.sa/*
binbaz.org.sa/*
al-badr.net/*
obied-aljabri.com/*
aletioupi.com/*
miraath.net/*
al-albany.com/*
rabee.net/*

3. Click "Create"
4. Copy your Search Engine ID (cx) from the "Setup" tab

2. Google Cloud Console Setup

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable these APIs:

• Custom Search API
• YouTube Data API v3

4. Go to "Credentials"
5. Click "Create Credentials" > "API Key"
6. Copy your API key
7. (Optional) Restrict the API key to only these APIs for security

3. Environment Variables

Create a .env.local file in the root directory (or configure these in Netlify's UI):

NEXT_PUBLIC_GOOGLE_API_KEY=your_api_key_here
NEXT_PUBLIC_SEARCH_ENGINE_ID=your_search_engine_id_here
NEXT_PUBLIC_YOUTUBE_API_KEY=your_api_key_here # can reuse same Google API key
NEXT_PUBLIC_CLARITY_ID=optional_ms_clarity_project_id
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

All public variables must start with NEXT_PUBLIC_ to be available to the client bundle.

Netlify setup:

• Build command: npm run build
• Publish directory: .next
• Ensure the Netlify Next.js Runtime plugin (@netlify/plugin-nextjs) is installed (already configured in netlify.toml).
• Set environment variables in Netlify under Site Settings > Build & Deploy > Environment.

Usage

1. Use the search bar to look for Islamic topics or questions
2. Filter results by specific scholars using the filter button
3. Watch videos directly in the app or open them on YouTube
4. Share interesting search results with others
5. Request new scholars or channels to be added to the platform

Technology Stack

• Next.js 15 (App Router)
• Tailwind CSS
• shadcn/ui components
• Framer Motion for animations
• YouTube Data API
• Lucide React icons

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

Privacy and Data Usage

This application respects user privacy and only collects necessary data for search functionality. No personal information is stored or shared with third parties.

Contact

For questions, suggestions, or support:

• GitHub Issues: Create an issue
• Email: [email protected]

Please check existing issues before creating a new one and follow our contribution guidelines when submitting questions or suggestions.

License

This project is licensed under the MIT License - see the LICENSE file for details.