Al Kareem Logo

Application premium de lecture du Coran
Texte Uthmanique · Audio · Signets cloud · Recherche · Qibla · Horaires de prière

Fonctionnalités • Captures • Stack • Déploiement • Développement

React TypeScript Vite Supabase Tailwind CSS PWA Cloudflare Pages Arabic Support

تطبيق راقي لقراءة القرآن الكريم
بالرسم العثماني · الصوت · العلامات المرجعية · البحث · القبلة · أوقات الصلاة

• Texte Uthmanique — Police UthmanicHafs pour une expérience authentique
• 114 Sourates — Navigation complète avec index des sourates
• Verset du jour — Ayat quotidienne avec traductions (FR/AR/EN)
• Poursuite de lecture — Reprenez là où vous vous êtes arrêté
• Sourates recommandées — Accès rapide aux sourates populaires (Yā Sīn, Ar-Raḥmān, Al-Mulk...)

• Récitation intégrale — Lecture audio sourate par sourate
• Contrôle avancé — Play, Pause, Saut avant/arrière
• Indicateur visuel — Verset en cours de lecture synchronisé
• Mini-lecteur — Contrôle audio depuis la page d'accueil

• 🕋 Qibla — Boussole interactive pour trouver la direction de la prière
• 🕌 Horaires de prière — Calendrier des 5 prières basé sur votre localisation
• 📅 Date hégirienne — Affichage de la date islamique (Umm al-Qura)

• Recherche plein texte — Parcourez les versets par mot-clé
• Multilingue — Recherche en arabe, français et anglais
• Résultats instantanés — Indexation locale pour une réponse rapide

• Synchronisation cloud — Signets sauvegardés sur Supabase
• Multi-appareils — Vos signets vous suivent partout
• Hors-ligne — Accès aux signets même sans connexion

• Thème sombre/clair — Interface adaptative selon vos préférences
• Multilingue — Interface en français, arabe et anglais
• Notifications push — Rappels quotidiens et verset du jour (via Supabase Edge Functions)
• PWA — Installez l'application sur votre téléphone ou ordinateur

L'application est déployée sur Cloudflare Pages — une SPA statique rapide, scalable et disponible mondialement.

# Build de production
npm run build
# Aperçu local
npm run preview
# Tests
npm test

https://alkareem-qr.pages.dev

# Cloner le projet
git clone https://github.com/idhem85/alkareem-qr.git
cd alkareem-qr
# Installer les dépendances
npm install
# Créer le fichier d'environnement
# (copie les variables ci-dessous dans un fichier .env)
# VITE_SUPABASE_URL=votre_url
# VITE_SUPABASE_PUBLISHABLE_KEY=votre_cle
# Lancer le serveur de développement
npm run dev
# Build de production
npm run build
# Lancer les tests
npm test

src/
├── pages/ # Pages de l'application
│ ├── Index.tsx # Accueil
│ ├── SurahIndex.tsx # Index des sourates
│ ├── MushafReader.tsx # Lecteur coranique
│ ├── SearchPage.tsx # Recherche
│ ├── BookmarksPage.tsx # Signets
│ ├── QiblaPage.tsx # Direction de la Qibla
│ ├── SettingsPage.tsx # Paramètres
│ └── OfflinePage.tsx # Mode hors-ligne
├── components/ # Composants UI
│ ├── quran/ # Composants du Mushaf
│ ├── home/ # Composants de l'accueil
│ ├── audio/ # Lecteur audio
│ ├── layout/ # Navigation, sidebar, bottom nav
│ └── ui/ # Composants shadcn/ui
├── contexts/ # Contextes React
├── hooks/ # Hooks personnalisés
├── lib/ # Utilitaires
├── data/ # Données (sourates, versets, juz)
│ ├── surahs.ts # 114 sourates
│ ├── ayahs.ts # Versets avec numérotation
│ └── juz.ts # Division en 30 juz
├── integrations/supabase/ # Client Supabase + types
└── styles/ # Styles globaux (mushaf.css)

Le projet inclut des données complètes pour les 114 sourates :

• Nom en arabe, translittération et traduction
• Nombre de versets (āyāt)
• Lieu de révélation (Mecquoise / Médinoise)
• Division en 30 juz' et hizb
• Texte Uthmanique pour tous les versets

Projet privé — Tous droits réservés.

Développé avec ❤️ par idhem85
القرآن الكريم — كتاب الله المبين