Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itxsaaad/quran-player-app-react
A web application to listen to Quranic recitations, Built with React, Redux Toolkit, and TypeScript.
https://github.com/itxsaaad/quran-player-app-react
Last synced: 6 days ago
JSON representation
A web application to listen to Quranic recitations, Built with React, Redux Toolkit, and TypeScript.
- Host: GitHub
- URL: https://github.com/itxsaaad/quran-player-app-react
- Owner: itxSaaad
- License: mit
- Created: 2024-07-05T10:09:22.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-11T12:14:30.000Z (4 months ago)
- Last Synced: 2024-07-11T19:55:47.920Z (4 months ago)
- Language: TypeScript
- Homepage: https://quran-player-app-react.vercel.app
- Size: 2.18 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Quran Player App - React
> 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.
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
## Live Preview Project
[Live Preview](https://quran-player-app-react.vercel.app/)
## Features
- **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
## Built With
- [React.js](https://reactjs.org/) - A JavaScript library for building user interfaces
- [Redux/Toolkit](https://redux-toolkit.js.org/) - The official, opinionated, batteries-included toolset for efficient Redux development
- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs
- [React Icons](https://react-icons.github.io/react-icons/) - Include popular icons in your React projects easily with react-icons
- [React Toastify](https://fkhadra.github.io/react-toastify/introduction) - React-Toastify allows you to add notifications to your app with ease
- [React Spinner](https://www.npmjs.com/package/react-spinners) - A collection of loading spinner components for React
- [TypeScript](https://www.typescriptlang.org/) - TypeScript is a superset of JavaScript that compiles to clean JavaScript output
- [Vite](https://vitejs.dev/) - Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- [Axios](https://axios-http.com/) - Promise based HTTP client for the browser and node.js
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/en/) - JavaScript runtime built on Chrome's V8 JavaScript engine
- [NPM](https://www.npmjs.com/) - Node Package Manager
### Installation
1.Clone the repo
```sh
git clone https://github.com/itxSaaad/quran-player-app-react.git
```
2.Install NPM packages
```sh
npm install
```
3.Start the development server
```sh
npm run dev
```
4.Build the project
```sh
npm run build
```
## API Endpoints
- 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`
## Contributing
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!
1. Fork the repo
2. Clone the project
3. Create your feature branch (`git checkout -b feature/AmazingFeature`)
4. Commit your changes (`git commit -m "Add some AmazingFeature"`)
5. Push to the branch (`git push origin feature/AmazingFeature`)
6. Open a pull request
## Contact
- Twitter: [@itxSaaad](https://twitter.com/itxSaaad)
- LinkedIn: [@itxSaaad](https://www.linkedin.com/in/itxsaaad/)
- Portfolio: [@itxSaaad](https://portfolio-itxsaaad.vercel.app/)
- Email: [[email protected]](mailto:[email protected])
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Support
Give ⭐️ if you like this project!
[contributors-shield]: https://img.shields.io/github/contributors/itxSaaad/quran-player-app-react.svg?style=for-the-badge
[contributors-url]: https://github.com/itxSaaad/quran-player-app-react/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/itxSaaad/quran-player-app-react.svg?style=for-the-badge
[forks-url]: https://github.com/itxSaaad/quran-player-app-react/network/members
[stars-shield]: https://img.shields.io/github/stars/itxSaaad/quran-player-app-react.svg?style=for-the-badge
[stars-url]: https://github.com/itxSaaad/quran-player-app-react/stargazers
[issues-shield]: https://img.shields.io/github/issues/itxSaaad/quran-player-app-react.svg?style=for-the-badge
[issues-url]: https://github.com/itxSaaad/quran-player-app-react/issues
[license-shield]: https://img.shields.io/github/license/itxSaaad/quran-player-app-react.svg?style=for-the-badge
[license-url]: https://github.com/itxSaaad/quran-player-app-react/blob/main/LICENSE.md