Hadith Explorer

A modern, fully responsive web application for exploring authentic Islamic Hadiths in Arabic, English, and Urdu. Built with React, TypeScript, Tailwind CSS, shadcn/ui, and RTK Query.

Features

📚 Browse Collections

• Access 9 major Hadith collections including:
  • Sahih Bukhari
  • Sahih Muslim
  • Jami' Al-Tirmidhi
  • Sunan Abu Dawood
  • Sunan Ibn-e-Majah
  • Sunan An-Nasa'i
  • Mishkat Al-Masabih
  • Musnad Ahmad
  • Al-Silsila Sahiha

🔍 Advanced Search

• Search Hadiths by text (English, Arabic, Urdu)
• Filter by book collection
• Filter by authenticity status (Sahih, Hasan, Da'eef)
• Pagination support for large result sets

📖 Chapter Navigation

• Browse chapters within each book
• View chapter titles in multiple languages
• Easy navigation between books and chapters

🎨 Modern UI/UX

• Fully Responsive Design: Optimized for mobile, tablet, and desktop
• Light & Dark Mode: Seamless theme switching with system preference detection
• Clean Interface: Built with shadcn/ui components
• Smooth Transitions: Enhanced user experience with animations

🌐 Multilingual Support

• View Hadiths in Arabic, English, and Urdu
• Complete narrator chains in all supported languages
• RTL (Right-to-Left) support for Arabic and Urdu text

Technology Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• State Management: Redux Toolkit (RTK Query)
• Icons: Lucide React
• API Integration: RTK Query with TypeScript

API Credits

This application is powered by the Hadith API, which provides free access to authentic Hadith collections in multiple languages.

API Information

• Provider: Hadith API
• Documentation: API Docs
• License: Free for everyone
• Supported Languages: Arabic, English, Urdu

Special thanks to the Hadith API team for making this valuable resource freely available to the community.

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd hadith-explorer

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build

The built files will be in the dist directory.

Preview Production Build

npm run preview

Project Structure

hadith-explorer/
├── src/
│   ├── components/
│   │   ├── ui/              # shadcn/ui components
│   │   ├── Books.tsx        # Books listing component
│   │   ├── Chapters.tsx     # Chapters listing component
│   │   ├── Hadiths.tsx      # Hadiths search component
│   │   ├── theme-provider.tsx
│   │   └── theme-toggle.tsx
│   ├── lib/
│   │   └── utils.ts         # Utility functions
│   ├── services/
│   │   └── api.ts           # RTK Query API service
│   ├── store/
│   │   └── store.ts         # Redux store configuration
│   ├── App.tsx              # Main application component
│   ├── main.tsx             # Application entry point
│   └── index.css            # Global styles
├── public/
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Features in Detail

Books Component

• Displays all available Hadith collections
• Shows book name, author, and statistics
• Click to navigate to chapters

Chapters Component

• Lists all chapters within a selected book
• Multilingual chapter titles
• Pagination support
• Back navigation to books

Search Component

• Advanced search with multiple filters
• Real-time search results
• Hadith authenticity indicators
• Complete narrator information
• Pagination for results

Theme System

• Light mode with clean, readable design
• Dark mode with reduced eye strain
• System preference detection
• Persistent theme selection

Responsive Design

The application is fully responsive with breakpoints for:

• Mobile devices (< 768px)
• Tablets (768px - 1024px)
• Desktops (> 1024px)

Special mobile features:

• Fixed bottom navigation bar
• Optimized touch targets
• Readable font sizes
• Compact layouts

Acknowledgments

• Hadith API - For providing free access to Hadith collections
• shadcn/ui - For beautiful, accessible UI components
• Tailwind CSS - For utility-first CSS framework
• Redux Toolkit - For efficient state management

License

This project is open source and available under the MIT License.

Support

For issues related to the Hadith API data, please contact the Hadith API team.

For issues related to this application, please open an issue in this repository.

---

Made with ❤️ for the Muslim community

Data provided by Hadith API