Quran

Preview

Project Overview

An online platform providing access to the Quran with translations and interpretations.

Technologies Used

ReactNext.jsTailwind CSSTypeScriptShadcn UIAl-Quran API

Key Features

  • Quran Ayah with variance of Tafsir
  • Audio recitation
  • User friendly interface
  • Responsive design for mobile and desktop
  • Server side rendering
  • Searchable

Additional Information

This Quran app is designed to provide a user-friendly and accessible way to read and understand the Quran. It features a clean interface, audio recitation, and translations to help users connect with the holy text. And has variance of Tafsirs including Arabic and English.

1

Main page

Where user can choose Quran Surah, Or search for a surah.

Step 0: Main page
2

Surah page

After user selected a Surah, They can see the Ayah with Tafsir and Audio recitation, By clicking the tafsir button user can see variance of Tafsirs for specific Ayah.

Step 1: Surah page
3

Tafsir Dropdown

Where user can see and select variance of Tafsirs for specific Ayah, Which includes Arabic and English.

Step 2: Tafsir Dropdown
4

Tafsir Dialog

In this Dialog user can see the Tafsir of the Ayah.

Step 3: Tafsir Dialog

Page Navigation

© HOSHANG E. HAMA | 2024