An elegant and modern mobile application for iOS and Android designed to help students learn the Arabic language through the renowned Madinah Books series. This app provides a clean, intuitive, and customizable learning experience.
This application is packed with features designed to create a seamless and effective learning environment.
- 📚 Browse Lessons: Easily navigate through the Madinah Books and their corresponding lessons.
- 📖 Detailed Vocabulary: Each lesson comes with a comprehensive vocabulary list. Tap on any word to see a detailed view with definitions, examples, word type, and more.
- 🔍 Advanced Filtering: Quickly find the vocabulary you need with a powerful, two-level filter for both books and specific lessons.
- 🎨 Highly Customizable Appearance:
- Theme Support: Choose between Light, Dark, or a theme that follows your device's system settings.
- Dynamic Font Size: Adjust the text size across the entire app using an accessible stepped slider for comfortable reading.
- Custom Arabic Fonts: Select from a curated list of beautiful Arabic fonts to personalize your reading experience.
- 🔔 Daily Reminders: Set a daily notification to remind you to study at a time that works for you.
- 📱 Cross-Platform Design: A single codebase that delivers a native look and feel on both iOS and Android, respecting platform-specific UI conventions.
- 🔄 In-App Changelog: Stay up-to-date with the latest features and fixes through a beautifully designed "What's New" screen.
This project is built with a modern, cross-platform tech stack:
- Framework: React Native
- Platform: Expo
- Language: TypeScript
- Navigation: Expo Router (File-based routing)
- UI Components:
@gorhom/bottom-sheetfor the native filter modal.@expo/vector-iconsfor cross-platform icons.
- State Management: React Context for global theme and font size management.
To get a local copy up and running, follow these simple steps.
- Node.js (LTS version recommended)
- Yarn or npm
- Expo Go app on your iOS or Android device, or a device simulator.
- Clone the repository:
git clone [https://github.com/aramb-dev/madinah-app.git](https://github.com/aramb-dev/madinah-app.git)
- Navigate to the project directory:
cd madinah-app - Install dependencies:
npm install # or yarn install - Run the application:
This will open the Metro bundler. You can then scan the QR code with the Expo Go app on your phone to launch the project.
npx expo start
This project uses Expo's file-based routing system. The app directory is the heart of the navigation.
app/
├── (tabs)/ # Defines the main bottom tab bar layout
│ ├── _layout.tsx # The layout component for the tabs
│ ├── lessons.tsx # The Lessons screen
│ ├── vocabulary.tsx # The Vocabulary screen
│ ├── exercises.tsx # The Exercises screen
│ └── (settings)/ # A nested stack navigator for all settings pages
│ ├── _layout.tsx # The layout for the settings stack
│ ├── index.tsx # The main settings menu screen
│ ├── appearance.tsx # The Appearance settings screen
│ └── ... # Other settings pages
│
└── _layout.tsx # The root layout of the entire app
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Your feedback is invaluable! If you encounter any bugs or have suggestions, please open an issue on GitHub or reach out directly via email.
Abdur-Rahman Bilal - aramb@aramb.dev
Project Link: https://github.com/aramb-dev/madinah-app
Distributed under the MIT License. See LICENSE.txt for more information.