Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0memo07/quran-web-application
Built with React, TypeScript and styled using Tailwind CSS, this Quran web app allows users to view verses, search for verses and switch between languages. It supports both English and Turkish, includes Dark/Light Mode switching, and provides voiceover functionality in both languages.
https://github.com/0memo07/quran-web-application
kuran mushaf quran quran-app quran-audio quran-search quran-translation quran-web
Last synced: 15 days ago
JSON representation
Built with React, TypeScript and styled using Tailwind CSS, this Quran web app allows users to view verses, search for verses and switch between languages. It supports both English and Turkish, includes Dark/Light Mode switching, and provides voiceover functionality in both languages.
- Host: GitHub
- URL: https://github.com/0memo07/quran-web-application
- Owner: 0MeMo07
- License: mit
- Created: 2024-12-03T14:46:55.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2024-12-03T14:50:11.000Z (19 days ago)
- Last Synced: 2024-12-03T15:42:18.076Z (19 days ago)
- Topics: kuran, mushaf, quran, quran-app, quran-audio, quran-search, quran-translation, quran-web
- Language: TypeScript
- Homepage: https://deepmushaf.web.app/
- Size: 0 Bytes
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# Quran Web Application
This web app allows users to **view verses**, **search for verses**, and **change languages** in the Quran. It supports **English** and **Turkish** languages, includes a **Dark/Light Mode** toggle, and has **voiceover** support for both languages.
## Features
- **Search for Verses**: Easily search for any term or word within the Quran.
- **Language Toggle**: Switch between **English** and **Turkish** effortlessly.
- **Dark/Light Mode**: Change the theme of the app for a better reading experience.
- **Voice Support**: Listen to the verses in **English** or **Turkish**.
- **Fully Responsive**: Designed for optimal viewing on both mobile and desktop devices.
## Technologies Used
### Frontend
- **React.js** - JavaScript library for building user interfaces.
- **Redux Toolkit** - A modern Redux library for managing app state.
- **Tailwind CSS** - Utility-first CSS framework for styling.
- **TypeScript** - JavaScript with static types for better maintainability.
### Backend
- **Açık Quran API** - [Açık Quran API](https://github.com/acik-kuran/acikkuran-api), an open-source Quran API providing Quranic data.
### Features Implemented
- **Dark/Light Mode** support for a comfortable reading experience.
- **Voice-over support** in both **English** and **Turkish**.
- **Language toggle** between **English** and **Turkish**.
## Installation
Follow these steps to set up the project locally.
### 1. Clone the Repository
Clone the repository to your local machine:
```bash
git clone https://github.com/0memo07/quran-web-app.git
```
### 2. Install Dependencies
Navigate to the project folder and install the necessary dependencies:
```bash
cd quran-web-app
```
```bash
npm install
```
or
```bash
yarn install
```
### 3. Run the Application
Start the development server to run the app locally:
```bash
npm start
```
or
```bash
yarn start
```