منصة بستاني الخيرية - وصف :
نظرة عامة على المشروع
منصة بستاني الخيرية هي تطبيق ويب حديث وشامل تم بناؤه كنظام متكامل لإدارة التبرعات والأعمال الخيرية. تتيح هذه المنصة المتطورة للمستخدمين اكتشاف الحملات الخيرية، تقديم التبرعات الآمنة، إدارة حسابات الزكاة، كفالة الأيتام، وتتبع سجل التبرعات الخاص بهم. تتميز المنصة بواجهة ثنائية اللغة (العربية/الإنجليزية)، ونظام مصادقة شامل للمستخدمين، ومعالجة دفع آمنة.
الوظائف الأساسية
- إدارة الحملات متعددة الفئات: يمكن للمستخدمين تصفح والمساهمة في فئات خيرية مختلفة تشمل التبرعات العامة، كفالة الأيتام، والحملات الموجهة مع تتبع تقدّم فوري.
- حاسبة زكاة متقدمة: أداة مالية إسلامية متطورة لحساب الزكاة بناءً على أنواع مختلفة من الأصول (ذهب، فضة، نقد، استثمارات) مع حساب دقيق للنصاب.
- معالجة دفع آمنة: تكامل مع Stripe للتبرعات لمرة واحدة والاشتراكات المتكررة مع تتبع شامل لحالة الدفع.
- نظام مصادقة المستخدم: نظام تسجيل/تسجيل دخول كامل مع التحقق عبر البريد الإلكتروني، إعادة تعيين كلمة المرور، والمصادقة الاجتماعية عبر Google وApple.
- لوحة تحكم شخصية: إدارة شاملة للملف الشخصي مع سجل التبرعات، تتبع الاشتراكات، وتحديث المعلومات الشخصية.
المزايا الرئيسية
- دعم ثنائي اللغة: تعريب كامل بالعربية والإنجليزية مع دعم اتجاه النص RTL/LTR.
- تصميم متجاوب: هيكلية تعتمد على الهاتف أولاً مع رسوم متحركة أنيقة وعناصر واجهة زجاجية (Glass-morphism).
- تحميل بيانات لحظي: تحميل ديناميكي للمحتوى مع شاشات هيكلية وانتقالات سلسة.
- واجهات متعددة الأنماط: نوافذ تفاعلية للتبرعات، التعليقات، حساب الزكاة، وإدارة المستخدم.
- إدارة الاشتراكات: إمكانية التبرعات المتكررة بخيارات شهرية/أسبوعية.
- المصادقة الاجتماعية: تسجيل دخول سلس عبر Google وApple OAuth.
- نظام التحقق عبر البريد الإلكتروني: أمان الحساب باستخدام رموز تحقق وإعادة تعيين كلمة المرور.
- تتبع التبرعات: سجل مفصل للمساهمات مع إنشاء إيصالات وتحديثات الحالة.
- تصفية الحملات: بحث وتصنيف متقدم مع عرض مرئي للتقدم.
- إدارة الصور: رفع صورة الملف الشخصي مع معاينة فورية.
التنفيذ التقني
- إطار الواجهة الأمامية: React 18 مع الـ Hooks الحديثة وContext API لإدارة الحالة.
- أداة البناء: Vite للتطوير السريع وبناء محسن مع تقسيم الكود.
- التنسيق: وحدات CSS مع رسوم متحركة مخصصة، تأثيرات زجاجية، وتصميم متجاوب.
- مكونات واجهة المستخدم: مكونات مخصصة مع أيقونات Lucide React ورسوم Lottie.
- التدويل: Hooks مخصصة للترجمة مع تبديل ديناميكي للغة.
- إدارة الحالة: Context API للمصادقة، اللغة، السمة، وبيانات الصفحة الرئيسية.
- تكامل API: اتصال RESTful مع معالجة الأخطاء وحالات التحميل.
- بوابة الدفع: تكامل Stripe لمعالجة الدفع الآمن وإدارة الاشتراكات.
- المصادقة: مصادقة Firebase مع مزودي تسجيل الدخول الاجتماعي.
- تصور البيانات: Recharts لتحليلات التبرعات وتتبع التقدم.
- معالجة النماذج: تحقق مخصص مع تغذية راجعة لحظية ومعالجة الأخطاء.
- الأداء: تقسيم الكود، التحميل الكسول، وتحسين عرض المكونات.
الصفحات والأقسام
- الصفحة الرئيسية: قسم ديناميكي مع خلفيات متحركة، معاينات الحملات، وأزرار دعوة للعمل.
- قسم الحملات: قوائم حملات قابلة للتصفية مع أشرطة تقدم وأهداف التبرع.
- حاسبة الزكاة: حاسبة تفاعلية مع إدارة الأصول وعرض النتائج.
- فئات التبرع: أقسام مخصصة للكفالات، الحملات، والزكاة.
- مصادقة المستخدم: تدفق تسجيل/تسجيل دخول كامل مع التحقق واستعادة كلمة المرور.
- ملف المستخدم: لوحة شخصية مع سجل التبرعات وإدارة الحساب.
- تفاصيل الحملات: صفحات فردية للحملات مع تتبع المساهمات والتعليقات.
- إدارة المحتوى: قسم المقالات والمنشورات مع عروض تفصيلية.
- الصفحات القانونية: الشروط، سياسة الخصوصية، ومعلومات الشفافية.
- قسم التواصل: واجهة استفسارات وتواصل مع المستخدمين.
البنية التقنية
تتبع المنصة بنية حديثة تعتمد على React مع تصميم قائم على المكونات، إدارة حالة مركزية، واتصال آمن بـ API. يُظهر الكود معالجة متقدمة للأخطاء، حالات التحميل، واعتبارات تجربة المستخدم. التكامل مع الخدمات الخارجية (Stripe، Firebase، Gold API) يبرز قدرات شاملة في تكامل واجهات برمجة التطبيقات. يتميز التطبيق بتدابير أمان قوية تشمل التحقق عبر البريد الإلكتروني، المصادقة الآمنة، والامتثال لمعايير معالجة الدفع.
تمثل هذه المنصة حلاً متكاملاً متطوراً يجمع بين تصميم واجهة وتجربة مستخدم أنيقة ووظائف معقدة، مما يعكس مهارات متقدمة في تطوير React، خبرة في تكامل الدفع، وفهماً شاملاً لبنية تطبيقات الويب الحديثة.