# Madinah Book Resources

## المصادر المعينة على فهم كتب المدينة

_Master Arabic Grammar with Engaging Interactive Lessons_

![last-commit](https://img.shields.io/github/last-commit/aramb-dev/madinah-book-grammar-rules?style=flat&logo=git&logoColor=white&color=0080ff) ![repo-top-language](https://img.shields.io/github/languages/top/aramb-dev/madinah-book-grammar-rules?style=flat&color=0080ff) ![repo-language-count](https://img.shields.io/github/languages/count/aramb-dev/madinah-book-grammar-rules?style=flat&color=0080ff)

_Built with the tools and technologies:_

![Next.js](https://img.shields.io/badge/Next.js-000000.svg?style=flat&logo=Next.js&logoColor=white) ![React](https://img.shields.io/badge/React-61DAFB.svg?style=flat&logo=React&logoColor=black) ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6.svg?style=flat&logo=TypeScript&logoColor=white) ![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4.svg?style=flat&logo=Tailwind-CSS&logoColor=white)
![Radix UI](https://img.shields.io/badge/Radix%20UI-161618.svg?style=flat&logo=Radix-UI&logoColor=white) ![ESLint](https://img.shields.io/badge/ESLint-4B32C3.svg?style=flat&logo=ESLint&logoColor=white) ![Prettier](https://img.shields.io/badge/Prettier-F7B93E.svg?style=flat&logo=Prettier&logoColor=black) ![npm](https://img.shields.io/badge/npm-CB3837.svg?style=flat&logo=npm&logoColor=white)

---

## Table of Contents

- [Madinah Book Grammar Rules](#madinah-book-grammar-rules)
  - [Table of Contents](#table-of-contents)
  - [Overview](#overview)
  - [Getting Started](#getting-started)
    - [Prerequisites](#prerequisites)
    - [Installation](#installation)
    - [Usage](#usage)
    - [Features](#features)

---

## Overview

**Madinah Book Grammar Rules** is an interactive web application built with Next.js that provides a comprehensive platform for learning Arabic grammar. The application features dynamic lessons, responsive design, and an intuitive user interface designed specifically for Arabic language learners.

**Why Madinah Book Grammar Rules?**

This project aims to provide a modern, accessible, and user-friendly educational tool for Arabic grammar learners. The core features include:

- 🎨 **Responsive Design:** Seamlessly adapts to various screen sizes and devices for optimal learning experience
- 📚 **Interactive Lessons:** Dynamic lesson content with engaging presentations and clear explanations
- 🌍 **RTL Support:** Proper right-to-left layout and culturally appropriate Arabic fonts for authentic learning
- ⚙️ **Customizable Experience:** Font scaling and selection options for improved readability and accessibility
- 🚀 **Modern Architecture:** Built with Next.js, React Server Components, and TypeScript for performance and maintainability
- 📱 **Mobile-First:** Optimized for mobile devices with touch-friendly navigation and responsive layout
- 🎯 **SEO Optimized:** Dynamic routing and metadata for better discoverability and navigation

---

## Getting Started

### Prerequisites

Before running this project, ensure you have the following installed:

- **Node.js:** Version 18.x or higher
- **npm:** Comes with Node.js (or you can use yarn/pnpm as alternatives)
- **Git:** For cloning the repository

### Installation

Build Madinah Book Grammar Rules from source and install dependencies:

1. **Clone the repository:**

```sh
❯ git clone https://github.com/aramb-dev/madinah-book-grammar-rules
```

2. **Navigate to the project directory:**

```sh
❯ cd madinah-book-grammar-rules
```

3. **Install the dependencies:**

```sh
❯ npm install
```

### Usage

To run the project in development mode:

```sh
❯ npm run dev
```

This will start the development server at `http://localhost:3000`.

To build the project for production:

```sh
❯ npm run build
```

To start the production server:

```sh
❯ npm run start
```

Other available commands:

- **Lint code:** `npm run lint`
- **Fix linting issues:** `npm run lint:fix`
- **Format code:** `npm run format`

### Features

- **Dynamic Lesson Navigation:** Browse through structured Arabic grammar lessons
- **Responsive Layout:** Mobile-friendly design with collapsible sidebar
- **Font Customization:** Adjust font size and family for better readability
- **RTL Layout Support:** Proper Arabic text rendering and layout
- **Modern UI Components:** Built with Radix UI and Tailwind CSS
- **SEO Friendly:** Dynamic routing with proper metadata

---

[⬆ Return](#top)

---