أذكار — منصة إسلامية ويب

تطبيق ويب عربي متكامل يجمع الأذكار، قراءة القرآن، التلاوات الصوتية، الإذاعات الإسلامية، مواقيت الصلاة، والورد القرآني اليومي في واجهة واحدة حديثة وسهلة الاستخدام.

---

نظرة عامة

أذكار (اسم الحزمة في package.json: azkar) هو تطبيق ويب أحادي الصفحة (SPA) مبني بـ React، يستهدف المستخدم العربي المسلم ويوفّر أدوات يومية للعبادة والاستزادة: قراءة الأذكار مع عدّاد تكرار، متابعة مواقيت الصلاة حسب الموقع، الاستماع للقرآن والإذاعات، وإدارة ورد قرآني يومي منظم.

يُعاد توجيه المستخدم تلقائياً من / إلى /azkar عند فتح التطبيق.

---

المميزات

🕌 الأذكار

• عرض 8 فئات من الأذكار والأدعية من ملف بيانات محلي (adkar.json):
  • أذكار الصباح
  • أذكار المساء
  • أذكار بعد السلام من الصلاة المفروضة
  • تسابيح
  • أذكار النوم
  • أذكار الاستيقاظ
  • أدعية قرآنية
  • أدعية الأنبياء
• عداد تكرار لكل ذكر مع إعادة ضبط يدوية.
• حفظ حالة العداد في localStorage (مع صلاحية 24 ساعة للفئات غير المرتبطة بفترة الصلاة).
• تتبع تقدم أذكار الصباح والمساء مرتبطاً بأوقات الصلاة الفعلية:
  • الصباح: من الفجر إلى الظهر
  • المساء: من العصر إلى الفجر
• شريط تقدم وإحصائيات (المقروء / الكلي / المتبقي).
• رسالة إكمال عند قراءة جميع أذكار الفترة مع إمكانية إعادة التعيين.
• إشعارات المتصفح لتذكير المستخدم بأذكار الصباح والمساء (بعد منح الإذن).
• تصميم جديد لشريط التنقل بنمط Glassmorphism مع تفاعلات سلسة ومناسبة للهواتف وأجهزة سطح المكتب.

🕐 مواقيت الصلاة

• جلب أوقات الصلاة من Aladhan API حسب الدولة والمدينة (طريقة الحساب رقم 5).
• دعم 4 دول: مصر، السعودية، الإمارات، الكويت — مع قوائم مدن لكل دولة.
• عرض التاريخ الميلادي والهجري.
• بطاقة الصلاة القادمة مع عدّاد تنازلي دائري.
• تخزين مؤقت ذكي في localStorage يُحدَّث كل 24 ساعة.
• تنبيه صوتي للأذان عند دخول وقت الصلاة (الفجر، الظهر، العصر، المغرب، العشاء) مع إمكانية الكتم/التشغيل.
• عرض العدّاد التنازلي للصلاة القادمة في شريط التنقل العلوي.

📖 القرآن الكريم (القراءة)

• قراءة السور الـ 114 مع تفسير ميسّر (عربي) من QuranEnc API.
• اختيار السورة من قائمة منسدلة والتنقل بين السور.
• عرض التفسير في تلميح عائم عند النقر على الآية.
• تشغيل صوتي لكل آية عبر CDN Islamic Network (تلاوة الحصري).
• تثبيت آية (Pin): سحب وإفلات لحفظ موضع القراءة والعودة إليه لاحقاً.
• رأس سورة جديد بصياغة فاخرة مع رسوم متحركة وملخصات مرئية للبيانات الأساسية للسورة.

🎧 التلاوة (القرّاء)

• قائمة القرّاء من QuranPedia API (تصنيف «حسب السور»).
• بحث بالاسم مع ترقيم صفحات للنتائج.
• بطاقات القرّاء مع صور (عند توفرها) وعدد السور.
• قائمة سور القارئ مع تحميل تدريجي (Intersection Observer).
• مشغّل صوتي للسورة مع عرض السور ذات الصلة في كاروسيل (Embla Carousel).

📻 الإذاعة الإسلامية

• قائمة إذاعات قرآنية من ملف radios.json محلي.
• بحث بالاسم وعرض تدريجي (12 إذاعة في كل دفعة).
• شريط «يُشغَّل الآن» مع إمكانية الإيقاف.

📚 الورد القرآني اليومي

• قراءة المصحف صفحة بصفحة (604 صفحة) من QuranHub API.
• تفسير ميسّر لكل آية من QuranEnc API.
• إعدادات قابلة للتخصيص:
  • عدد الصفحات اليومية
  • صفحة البداية
  • فترة التحديث (دقائق / ساعات / أيام)
• تتبع التقدم اليومي مع نظام تعويض عن الأيام الفائتة.
• شريط نقاط وتقدم مرئي.
• تثبيت آية وتشغيل صوتي (مثل صفحة القراءة).
• احتفال بإكمال الختمة (ألعاب نارية + نافذة إكمال).
• نظام تعويض ذكي يجمع الصفحات التي فاتت خلال أيام غير مكتملة ويضيفها إلى الورد التالي عند انتهاء التعويض.

🛡️ الأمان والأداء

• Content Security Policy وSecurity Headers (HSTS, X-Frame-Options, …) في التطوير (Vite) والإنتاج (Vercel).
• Proxy لـ QuranPedia API في بيئة التطوير وإعادة كتابة المسارات على Vercel.
• تخزين مؤقت في الذاكرة لصفحات القرآن والتفسير أثناء جلسة الورد.
• معالجة أخطاء المسارات عبر ErrorBoundary.
• تحسينات وصولية تشمل دعم التنقل بالكيبورد، حالات تركيز واضحة، ودعم تقليل الحركة عند الحاجة.

---

التقنيات المستخدمة

التقنية	الإصدار	الاستخدام داخل المشروع
React	^19.2.6	واجهة المستخدم والمكونات
React DOM	^19.2.6	عرض التطبيق في المتصفح
React Router DOM	^7.15.1	التنقل بين الصفحات (createBrowserRouter)
Vite	^8.0.12	أداة البناء وخادم التطوير
SASS	^1.99.0	تنسيق الواجهة (ملفات SCSS)
embla-carousel-react	^8.6.0	كاروسيل السور في صفحة التشغيل
embla-carousel-autoplay	^8.6.0	تشغيل تلقائي للكاروسيل
lucide-react	^1.17.0	أيقونات واجهة المستخدم
react-h5-audio-player	^3.10.2	مشغّل صوتي للتلاوات
react-player	^3.4.0	تشغيل الوسائط
ESLint	^10.3.0	فحص جودة الكود

---

بنية المشروع

azkar/
├── public/                    # ملفات ثابتة (صور القرّاء، أيقونات، صوت الأذان)
├── src/
│   ├── api/
│   │   └── getData.js         # جلب بيانات API مع التحقق والأمان
│   ├── components/
│   │   ├── azkar/             # مكونات الأذكار (عداد، محتوى، صف)
│   │   ├── quran/             # مكونات القرآن والتلاوة والإذاعة
│   │   ├── wird/              # مكونات الورد اليومي
│   │   ├── NavBar.jsx         # شريط التنقل الرئيسي
│   │   ├── PrayerContext.jsx  # مزوّد سياق مواقيت الصلاة
│   │   ├── AzkarTracker.jsx   # شريط تتبع الأذكار
│   │   └── ErrorBoundary.jsx  # معالجة أخطاء المسارات
│   ├── data/
│   │   ├── adkar.json         # نصوص الأذكار والأدعية
│   │   ├── chapters.json      # بيانات السور
│   │   ├── radios.json        # قائمة الإذاعات
│   │   └── suwarPages.json    # بيانات صفحات السور
│   ├── hooks/
│   │   ├── useAzkarTracking.js    # تتبع أذكار الصباح/المساء
│   │   ├── useAzkarNotifications.js # إشعارات الأذكار
│   │   ├── useWird.js             # منطق الورد اليومي
│   │   ├── usePin.js              # تثبيت الآيات
│   │   ├── useAudioPlayer.js      # إدارة الصوت
│   │   └── useDraggable.js        # السحب والإفلات
│   ├── pages/                 # صفحات التطبيق
│   ├── styles/                # ملفات SCSS
│   ├── utils/                 # أدوات مساعدة وتخزين
│   ├── App.jsx                # تعريف المسارات
│   └── main.jsx               # نقطة الدخول
├── index.html
├── vite.config.js             # إعدادات Vite والـ Proxy
├── vercel.json                # إعدادات النشر على Vercel
└── package.json

---

الصفحات الرئيسية

المسار	الصفحة	الوظيفة
/	—	إعادة توجيه تلقائية إلى /azkar
/azkar	ZekrType	أذكار الصباح (افتراضياً)
/azkar/أذكار-الصباح	ZekrType	أذكار الصباح
/azkar/أذكار-المساء	ZekrType	أذكار المساء
/azkar/أذكار-بعد-السلام-من-الصلاة-المفروضة	ZekrType	أذكار بعد الصلاة
/azkar/تسابيح	ZekrType	تسابيح
/azkar/أذكار-النوم	ZekrType	أذكار النوم
/azkar/أذكار-الاستيقاظ	ZekrType	أذكار الاستيقاظ
/azkar/أدعية-القرآن	ZekrType	أدعية قرآنية
/azkar/أدعية-الأنبياء	ZekrType	أدعية الأنبياء
/quran	SurahForReading	قراءة القرآن مع التفسير
/tilawa	QuranPage	قائمة القرّاء
/tilawa/surahsList	SurahsList	قائمة سور القارئ
/tilawa/surahsList/play	PlayAudio	تشغيل تلاوة السورة
/tilawa/part/:part_id	QuranPage	عرض حسب الجزء
/tilawa/suwra/:suwra_id	QuranPage	عرض حسب السورة
/radio	RadioApp	الإذاعات الإسلامية
/wird	WirdPage	الورد القرآني اليومي
/prayer_times	PrayerTimes	مواقيت الصلاة

---

المكونات الرئيسية

الأذكار

المكون	الوظيفة
AzkarBox	قائمة أزرار للتنقل بين فئات الأذكار
RowZekr	صف ذكر واحد (عداد + محتوى)
CounterButton	عدّاد التكرار مع حفظ في localStorage
ZekrContent	عرض نص الذكر والمرجع والوصف
AzkarTracker	شريط التقدم والإحصائيات والإشعارات

مواقيت الصلاة

المكون	الوظيفة
PrayerContext	جلب الأوقات، العدّاد، التنبيه الصوتي، الموقع
PrayerHeader	عنوان الصفحة مع معلومات الموقع
LocationSelector	اختيار الدولة والمدينة
NextPrayerCard	بطاقة الصلاة القادمة مع العدّاد
PrayersGrid	شبكة عرض جميع الصلوات
DateBar	التاريخ الميلادي والهجري
LocationBadge	شارة الموقع الحالي
QuranCard	بطاقة انتقال لصفحة القرآن

القرآن والتلاوة

المكون	الوظيفة
QuranView	عرض الآيات مع التفسير والصوت
AyaItem	عنصر آية واحدة
SurahHero	رأس السورة الحالية
SuraSelector	اختيار السورة
SurahNavigation	التنقل بين السور
FloatingPin	سحب وإفلات لتثبيت آية
PinBanner	شريط الآية المثبّتة
MiniPlayer	مشغّل صوتي عائم للآية
ReciterCard	بطاقة قارئ مع روابط السور
SurahCard	بطاقة سورة للتشغيل
AudioPlayer	مشغّل تلاوة السورة
SurahCarousel	كاروسيل سور ذات صلة
RadioCard	بطاقة إذاعة
NowPlayingBar	شريط الإذاعة الجارية
SearchBar	حقل البحث

الورد اليومي

المكون	الوظيفة
WirdSettingsPopup	إعدادات الورد (صفحات، بداية، فترة)
WirdScoreBar	شريط التقدم والنقاط
CompletionPopup	نافذة إكمال الختمة
Fireworks	تأثير احتفالي
SurahSeparator	فاصل بين السور في صفحة الورد

عام

المكون	الوظيفة
NavBar	شريط التنقل مع العدّاد وزر الصوت
ErrorBoundary	صفحة خطأ للمسارات غير الموجودة

---

إدارة الحالة

يعتمد التطبيق على React Context API مع Custom Hooks وحالة محلية للمكونات (useState / useRef)، دون استخدام Redux أو Zustand أو React Query.

الآلية	النطاق	الوصف
PrayerContext	عام (يغلّف التطبيق)	أوقات الصلاة، الموقع، العدّاد، كتم الصوت
useAzkarTracking	صفحات أذكار الصباح/المساء	تتبع الذكر المقروء حسب فترة الصلاة
useAzkarNotifications	صفحات الأذكار	إشعارات المتصفح
useWird	صفحة الورد	إعدادات وتقدم الورد اليومي
usePin	القرآن والورد	تثبيت الآيات
useState محلي	كل صفحة/مكون	حالة الواجهة (بحث، تشغيل، تحميل، …)

تدفق البيانات الرئيسي:

1. PrayerProvider يجلب أوقات الصلاة (من الـ cache أو API) ويوزّعها على المكونات.
2. صفحات الأذكار تقرأ البيانات من adkar.json وتخزّن التقدم عبر azkarStorage.js.
3. صفحة الورد تجلب صفحات القرآن من API وتخزّن التقدم عبر useWird.
4. صفحة التلاوة تجلب القرّاء عبر getData من QuranPedia API.

---

التخزين المحلي

يستخدم التطبيق localStorage فقط (لا يوجد استخدام لـ sessionStorage في الكود).

المفتاح	المحتوى	الاستخدام
prayerTimesCache	أوقات الصلاة + التاريخ + الطابع الزمني	تخزين مؤقت لمدة 24 ساعة
prayerCountry	رمز الدولة	حفظ موقع المستخدم
prayerCity	اسم المدينة	حفظ موقع المستخدم
prayerAudioMuted	true / false	حالة كتم تنبيه الأذان
azkar_progress_morning	الذكر المقروء + وقت الانتهاء	تتبع أذكار الصباح
azkar_progress_evening	الذكر المقروء + وقت الانتهاء	تتبع أذكار المساء
azkar_counters_morning	قيم العدادات	عدّادات أذكار الصباح
azkar_counters_evening	قيم العدادات	عدّادات أذكار المساء
azkar_counters_{category}	قيم العدادات	عدّادات الفئات الأخرى (صلاحية 24 ساعة)
wird_settings	إعدادات الورد اليومي	صفحات/بداية/فترة التحديث
wird_progress	تقدم الورد	الصفحات المكتملة واليوم الحالي
quran_pin	بيانات الآية المثبّتة	صفحة قراءة القرآن
quran_wird_pin	بيانات الآية المثبّتة	صفحة الورد

---

التكاملات الخارجية

الخدمة	الرابط	الاستخدام
Aladhan API	api.aladhan.com	مواقيت الصلاة حسب المدينة
QuranPedia API	api.quranpedia.net	قائمة القرّاء والتلاوات
QuranHub API	api.quranhub.com	صفحات المصحف (الورد)
QuranEnc API	quranenc.com	التفسير الميسّر
Islamic Network CDN	cdn.islamic.network	صوت تلاوة الآيات
Qurango	backup.qurango.net	بث الإذاعات القرآنية
Google Fonts	fonts.googleapis.com	خطوط عربية (Amiri, Cairo, …)

---

تثبيت المشروع

المتطلبات

• Node.js (إصدار حديث يدعم ES Modules)
• npm

الأوامر

# استنساخ المستودع
git clone <رابط-المستودع>
cd azkar

# تثبيت الاعتماديات
npm install

---

تشغيل المشروع

# خادم التطوير (Vite)
npm run dev

يفتح التطبيق عادةً على http://localhost:5173.

---

بناء المشروع للإنتاج

# بناء ملفات الإنتاج
npm run build

# معاينة البناء محلياً
npm run preview

يُنشئ الأمر npm run build مجلد dist/ جاهزاً للنشر.

النشر على Vercel

المشروع يحتوي على vercel.json مع:

• إعادة كتابة /api/* إلى QuranPedia API
• إعادة توجيه SPA لجميع المسارات إلى index.html
• رؤوس أمان (CSP, HSTS, …)

---

فحص الكود

npm run lint

---

متغيرات البيئة

لا يوجد في المشروع ملفات .env أو متغيرات بيئة مطلوبة. جميع عناوين API مضمّنة في الكود أو تُمرَّر عبر Proxy في بيئة التطوير وإعادة الكتابة على Vercel.

---

كيفية الاستخدام

1. الأذكار

1. افتح التطبيق — ستُوجَّه تلقائياً إلى صفحة الأذكار.
2. اختر فئة الأذكار من الأزرار العلوية (صباح، مساء، نوم، …).
3. اضغط على العداد لتقليل عدد التكرار حتى يصل إلى صفر.
4. لأذكار الصباح/المساء: راقب شريط التقدم والوقت المتبقي في الفترة.
5. فعّل الإشعارات من زر الجرس عند الحاجة.

2. مواقيت الصلاة

1. انتقل إلى مواقيت الصلاة من شريط التنقل.
2. اختر الدولة والمدينة.
3. راقب الصلاة القادمة والعدّاد التنازلي.
4. استخدم زر الصوت في الشريط العلوي لكتم/تشغيل تنبيه الأذان.

3. قراءة القرآن

1. انتقل إلى القرآن.
2. اختر السورة من القائمة.
3. انقر على الآية لعرض التفسير، أو على رقم الآية لتشغيل الصوت.
4. اسحب أيقونة التثبيت وأفلتها على آية لحفظ موضع القراءة.

4. التلاوة

1. انتقل إلى تلاوة.
2. ابحث عن قارئ أو تصفّح القائمة.
3. اختر القارئ ثم السورة للاستماع.

5. الإذاعة

1. انتقل إلى الإذاعة.
2. ابحث عن إذاعة أو تصفّح القائمة.
3. اضغط تشغيل للاستماع المباشر.

6. الورد اليومي

1. انتقل إلى الورد اليومي.
2. اضبط الإعدادات (عدد الصفحات، البداية، فترة التحديث).
3. اقرأ الصفحات المحددة وانتقل بينها.
4. اضغط إنهاء الورد عند إكمال نطاق اليوم.

---

الأداء والتحسينات

التقنية	التفاصيل
تخزين مؤقت لمواقيت الصلاة	localStorage مع انتهاء صلاحية 24 ساعة
Cache في الذاكرة	صفحات القرآن والتفسير أثناء جلسة الورد
Proxy / Rewrite	تقليل مشاكل CORS لـ QuranPedia API
Intersection Observer	تحميل تدريجي لقائمة السور
ترقيم صفحات	القرّاء (6/صفحة) والإذاعات (12/دفعة)
Security Headers	CSP, HSTS, X-Frame-Options في Vite و Vercel
Lazy validation	التحقق من صلاحية بيانات الأذكار عند القراءة فقط

---

لقطات الشاشة

أضف لقطات الشاشة التالية بعد التقاطها من التطبيق:

الصفحة الرئيسية — الأذكار

مواقيت الصلاة

قراءة القرآن

التلاوة

الإذاعة

الورد اليومي

---

التطوير المستقبلي

اقتراحات منطقية بناءً على حالة المشروع الحالية:

• إضافة PWA مع Service Worker للعمل دون اتصال جزئي
• توسيع قائمة الدول والمدن لمواقيت الصلاة
• إضافة اختبارات آلية (Unit / Integration)
• دعم الوضع الليلي (Dark Mode)
• إضافة ملف ترخيص رسمي (LICENSE)
• تحسين إمكانية الوصول (ARIA, قارئ الشاشة)
• مزامنة التقدم عبر حساب مستخدم (اختياري)
• إشعارات Push عبر Service Worker بدلاً من إشعارات المتصفح فقط

---

المساهمة

نرحب بالمساهمات! للمساهمة في المشروع:

1. Fork المستودع على GitHub.
2. أنشئ فرعاً جديداً:

   git checkout -b feature/اسم-الميزة

3. نفّذ تعديلاتك مع الالتزام بأسلوب الكود الحالي.
4. تأكد من مرور فحص ESLint:

   npm run lint

5. أرسل Pull Request مع وصف واضح للتغييرات.

إرشادات الكود

• استخدم المكونات والـ Hooks الموجودة قبل إنشاء بدائل جديدة.
• حافظ على التعليقات بالعربية للمنطق التجاري غير الواضح.
• لا تضف ميزات غير مطلوبة أو توسّع النطاق دون داعٍ.
• اختبر التغييرات يدوياً على المتصفح قبل الإرسال.

---

الترخيص

لم يُحدَّد ترخيص رسمي في مستودع المشروع حالياً (لا يوجد ملف LICENSE). يُنصح بإضافة ترخيص مناسب قبل النشر العام.

---

أذكار — رفيقك اليومي للعبادة والقرآن والأذكار 🕌