A Quran Player application built with React, Redux Toolkit, Tailwind CSS, TypeScript, and online API links using Redux Async Thunk. The app allows users to list and play Quranic recitations by various reciters.
- List All Reciters: View a list of all available reciters.
- Top Reciters on Discover Page: Discover the top reciters.
- List All Surahs for Each Reciter: View all surahs for a selected reciter.
- Play Surah: Play the first surah by clicking on the reciter's image.
- Surah Player: Play the desired surah from the list of surahs.
- Music Player Controls: Next, Previous, Pause, Mute, Volume control, and Seekbar.
- Responsive Design: User-friendly interfaces designed for various screen sizes
- React.js - A JavaScript library for building user interfaces
- Redux/Toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
- Tailwind CSS - A utility-first CSS framework for rapidly building custom designs
- React Icons - Include popular icons in your React projects easily with react-icons
- React Toastify - React-Toastify allows you to add notifications to your app with ease
- React Spinner - A collection of loading spinner components for React
- TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output
- Vite - Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Axios - Promise based HTTP client for the browser and node.js
1.Clone the repo
git clone https://github.com/itxSaaad/quran-player-app-react.git2.Install NPM packages
npm install3.Start the development server
npm run dev4.Build the project
npm run build- Chapters/Surah Information:
https://api.quran.com/api/v4/chapters - Reciters and their Audio Servers:
https://mp3quran.net/api/_english.php - Arabic Verses:
https://raw.githubusercontent.com/risan/quran-json/main/dist/quran.json
Contributions are what make the open-source community such an amazing place to be 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". Don't forget to give the project a star! Thanks again!
- Fork the repo
- Clone 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
- Twitter: @itxSaaad
- LinkedIn: @itxSaaad
- Portfolio: @itxSaaad
- Email: [email protected]
Distributed under the MIT License. See LICENSE for more information.
Give ⭐️ if you like this project!
