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: 2 months 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.

Awesome Lists containing this project

README

        


Quran Web Application

๐Ÿ“– Quran Web Application


A modern, feature-rich Quran application built with React and TypeScript


React
TypeScript
Redux
Tailwind


Features โ€ข
Live Demo โ€ข
Installation โ€ข
Contributing

## โœจ Features

๐Ÿ” **Advanced Search**
- Powerful verse search functionality
- Real-time search results

๐ŸŒ **Multi-language Support**
- English and Turkish translations
- Seamless language switching
- Complete UI localization

๐ŸŽจ **Modern UI/UX**
- Elegant dark/light mode
- Responsive design for all devices
- Smooth animations and transitions

๐Ÿ”Š **Audio Features**
- High-quality voice-over support
- Audio playback controls

## ๐Ÿ› ๏ธ Tech Stack

### Frontend
- **React.js** - Modern UI development
- **Redux Toolkit** - State management
- **Tailwind CSS** - Styling and design
- **TypeScript** - Type-safe development

### Backend Integration
- **Aรงฤฑk Quran API** - Comprehensive Quranic data ([API Documentation](https://github.com/acik-kuran/acikkuran-api))

## ๐Ÿš€ Getting Started

### Prerequisites

Before you begin, ensure you have the following installed:
- Node.js (v14 or higher)
- npm or yarn package manager
- Git

### Installation Steps

1. **Clone the Repository**
```bash
git clone https://github.com/0memo07/Quran-Web-Application.git
cd Quran-Web-Application
```

2. **Install Dependencies**
```bash
# Using npm
npm install

# Using yarn
yarn install
```

3. **Start Development Server**
```bash
# Using npm
npm run dev

# Using yarn
yarn dev
```

4. **Build for Production**
```bash
# Using npm
npm run build

# Using yarn
yarn build
```

## ๐Ÿค Contributing

Contributions are always welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for ways to get started.

## ๐Ÿ“„ License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.