A modern, responsive Quran reader web application built with React and TypeScript. Features a clean, user-friendly interface with support for Arabic text, audio recitation, and various reading tools.
Live Demo | Report Bug | Request Feature
- 📱 Responsive design that works on all devices
- 🌟 Focus mode for distraction-free reading
- 🎙️ Audio recitation from multiple renowned reciters
- 🔖 Bookmark system for saving favorite surahs
- 📈 Reading progress tracking
- ✨ Interactive quiz system
- 🎨 Multiple theme options
- 🔎 Advanced search functionality
- 📑 Page-by-page navigation
- ↩️ Resume reading from last position
- React 18
- TypeScript
- Tailwind CSS
- Vite
- React Router
- Lucide Icons
- Node.js 16.x or higher
- npm or yarn
- Modern web browser
- Clone the repository:
git clone https://github.com/Ahmed-NF/QuranTime.git- Install dependencies:
cd QuranTime
npm install- Start the development server:
npm run dev| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ |
- Browse surahs from the main page
- Click on any surah to start reading
- Use the audio player to listen to recitations
- Toggle focus mode for distraction-free reading
- Track your reading progress
- Take quizzes to test your knowledge
- Customize the theme in settings
- Add translation support for multiple languages
- Implement offline mode
- Add social sharing features
- Integrate additional recitation styles
- Add dark mode support
- Implement reading statistics
We warmly welcome contributions from the community! Here's how you can help:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Commit your changes and open a pull request.
Don't forget to give the project a star! Thanks again!
- Quran text and audio from Alquran.cloud
- Arabic font: UthmanicHafs
- Icons from Lucide
This project is completely free and open source. You're welcome to:
- ⭐ Star this repository
- 📢 Share it with others who might find it useful
- 🐛 Submit issues and feature requests
- 💻 Contribute code or documentation
- 🔄 Fork and modify it for your own needs
For any questions or feedback:
- Open an Issue
- Join our Community Discussions
- Website: https://qurantime.netlify.app
Made with ❤️ for the Quran community