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.
