تطبيق ◂أذكـار و دعـاء▸على الويب | Adhkar and Dua Web App
تفاصيل العمل
⁖ تطبيق ويب إسلامي يوفر مجموعة محترمة من الأذكار و الأدعية مثل: ("أذكار الصباح/المساء"، "أدعية قرآنية"، "تسابيح"، ...) المهمة لكل مسلم في حياته — لقد بَنيت هذا التطبيق ليُسهل علي شخصيا عملية الذكر و الدعاء — مميزات و مواصفات هذا التطبيق قوية و مميزة وهي:
—————————————————
01. التصميم متجاوب 100% مع جميع الأجهزة ("هاتف"، "تابلت" و "كومبيوتر")
02. التصميم جذاب بألوان متناسقة و خطوط عربية جميلة
03. التطبيق غني بالتأثيرات و التحريكات السلسة التي تظهر عند الـ Hover أو الـ Click
04. التطبيق تفاعلي جدا حيث لا يعرِض فقط الأذكار و الأدعية بل يوفِر وظائف للتسبيح و إنهاء الأذكار و غيرها
05. التطبيق مبني بنظام الصفحات المستقلة بحيث كل مجموعة من الأذكار و الأدعية تجدها في صفحة مستقلة — بفضل React Router
06. الصفحة الرئيسية تحتوي على ساعة متقدمة تدعم التقويم الهجري
07. الصفحة الرئيسية تعرض كل مجموعات الأذكار و الأدعية على شكل بطاقات بصور توضيحية و شرح بسيط — كل بطاقة تأخذك للصفحة المستقلة عند النقر عليها
08. كل الصفحات المستقلة تشترك في التصميم نفسه حيث تجد: رأس الصفحة (للتحكم) و بطاقات الأذكار/الأدعية منظمة بالترتيب
09. رأس الصفحة المستقلة يوفر أزرار يستطيع المستخدم من خلالها: التنقل بين الصفحات، عرض المعلومات و حذف بيانات التقدم (البدء من جديد)
10. بطاقة الذكر أو الدعاء تعرض المحتوى بخط واضح و مقروء و توفر شريط تحكم احترافي
11. شريط التحكم في بطاقة الذكر أو الدعاء يَمنحُ المستخدم الوظائف التالية:
▪ نسخ النص كما هو معروض في البطاقة — يدعم النصوص المشكولة
▪ عرض/إخفاء المعلومات الإضافية
▪ التكرار أو التسبيح حيث يُخصَم من المستخدم 01 تكرار في كل مرة يضغط الزر حتى ينتهي (يصل إلى 00 تكرار)
▪ الإنهاء المباشر حيث يستطيع المستخدم الوصول لـ 00 تكرار دون الحاجة إلى التكرار أو النقر المستمر
12. عند الوصول إلى 00 تكرار في كل بطاقة ذكر أو دعاء يتم تحديث البطاقة (يتغير تصميمها) و حفظ بياناتها تلقائيا
13. الأهم هو أن التطبيق يدعم الحفظ التلقائي للبيانات حيث تُخَزن بيانات التقدم ضمن الـ sessionStorage — يتم حذف البيانات عند الخروج من التطبيق نهائيًا
14. التطبيق مبني أساسًا على تكامل API و تم استعمال JS Fetch + React Context للوصول إلى البيانات و توزيعها بشكل سليم
—————————————————
التقنيات الأساسية المستعملة: ReactJS / TailwindCSS / React Router