Nur Al-Quran

Nur Al-Quran – Modern Quran App

A comprehensive Quran application designed for both spiritual growth and interactive learning.

Key Features:

- Full Quran text with multiple Qira'at (Hafs and Warsh)

- Audio playback for at least 10 professional reciters

- Users can read, mark verses, and track recitation

- Leaderboard system: each ayah recited earns 10 hassanah points

- Memory mode: ayah disappears, user recites via microphone, then ayah reappears

- Prayer times, Islamic calendar, Qibla map, and live radio streams

Design & UI:

- Modern, clean interface

- Primary color: #6b0f1a, white background

- Responsive and visually appealing for all devices

- Includes icons, cards, and leaderboard UI components

- Motivational slogan: "وَفِي ذَٰلِكَ فَلْيَتَنَافَسِ الْمُتَنَافِسُونَ" prominently displayed

Tech Stack:

- Frontend: React 18, TypeScript, Vite, Tailwind CSS, React Router

- Backend: Node.js + Express.js, Supabase (auth & user data)

- State management for audio, recitation progress, and hassanat points

- Placeholder data provided if backend is not ready

Homepage:

- Hero section showcasing Quran features and the motivational slogan

- Portfolio-ready, clean, and professional presentation

Outcome:

A portfolio-ready Quran app that combines essential Islamic features with a beautiful, modern UI and interactive learning tools, designed to inspire and motivate users in their Quranic journey.