📖 The Holy Qur'an Digital Platform

A comprehensive, modern digital Al-Qur'an application designed to empower spiritual growth and creative Dawah. Featuring a state-of-the-art Poster Builder, extensive Hadith collections, and intelligent AI integration, this platform leverages the latest web technologies to deliver a seamless and performant user experience.

✨ Key Features

1. 🕌 Digital Al-Qur'an

• Immersive Reading Experience: A clean, distraction-free interface for reading the Holy Qur'an.
• Translation & Tafsir: Multi-language translations and in-depth Tafsir to understand the divine message.
• Audio Recitation: High-quality Murottal audio playback from renowned Qaris.

2. 🎨 Creative Dawah Studio (Poster Builder)

A powerful tool designed for content creators to spread the message of Islam visually.

• Interactive Canvas: Built on Fabric.js v7, offering smooth manipulation of text, images, and shapes.
• Fully Responsive: Optimized mobile experience with a smart floating sidebar and bottom sheet property panel for on-the-go editing.
• Advanced Customization: Full control over fonts, colors, opacity, shadows, layering, and more.
• High-Quality Export: Export your designs in high-resolution PNG/JPG formats, ready for social media sharing.

3. 📚 Hadith Collection

• Extensive Library: Access thousands of authentic Hadiths from major narrators (Bukhari, Muslim, etc.).
• Smart Search: Easily find specific topics or narrations with robust filtering and search capabilities.

4. 🤖 AI Companion (Gemini Integration)

• Smart Islamic Assistant: Ask questions about Islamic topics and receive intelligent, context-aware answers powered by Google Gemini AI.
• Content Assistance: Get help with drafting Dawah content, summarizing Tafsir, or finding relevant verses.

---

🛠️ Tech Stack

This project is architected using a modern, scalable JavaScript/TypeScript ecosystem:

Category	Technology
Framework
Language
Styling
Graphics
AI
Auth
Icons

---

🚀 Installation Guide

Follow these steps to set up the project locally on your machine:

Prerequisites

• Node.js (Version 18+ recommended)
• NPM, Yarn, or PNPM package manager

1. Clone the Repository

git clone https://github.com/dextryayers/AlMoslem-App.git
cd AlMoslem-App

2. Install Dependencies

Install the required packages using your preferred package manager:

npm install
# or
yarn install
# or
pnpm install

3. Configure Environment Variables

Create a .env.local file in the root directory and populate it with your credentials:

NEXT_PUBLIC_API_URL=http://localhost:3000
GOOGLE_API_KEY=your_gemini_api_key
NEXTAUTH_SECRET=your_generated_secret_key
NEXTAUTH_URL=http://localhost:3000

4. Start the Development Server

Launch the application in development mode:

npm run dev

Open http://localhost:3000 in your browser to view the application.

---

📂 Project Structure

A quick overview of the top-level directory structure:

.
├── app/                # App Router Next.js (Pages, Layouts, & API)
│   ├── build-poster/   # Poster Builder Module (Fabric.js logic)
│   ├── hadist/         # Hadith Collection Pages
│   └── api/            # Server-side API Routes
├── components/         # Reusable React Components
│   ├── ui/             # Shadcn UI Base Components
│   └── ...             # Custom Components
├── public/             # Static Assets (Images, Fonts, Icons)
├── lib/                # Utility Functions, Hooks, & Helpers
└── types/              # TypeScript Type Definitions

🤝 Contribution

We welcome contributions from the community! Whether it's a bug fix, a new feature, or documentation improvement, your help is appreciated.

1. Fork the repository.
2. Create a new Branch for your feature (git checkout -b feature/amazing-feature).
3. Commit your changes (git commit -m 'Add some amazing feature').
4. Push to the branch (git push origin feature/amazing-feature).
5. Open a Pull Request.

📄 License

This project is licensed under the MIT License. See the LICENSE file for more details.

---

Built with ❤️ by Hanif Abdurrohim