خيرات: الأضحية والعقيقة والمشاريع الخيرية، تُطلب عبر الإنترنت بالعربية والإنجليزية.

المشكلة

خيرات منظمة خيرية تعمل في أفريقيا. تؤدي عن متبرعيها الأضاحي والعقائق والنذور وفق أحكام الشريعة الإسلامية، وتنفّذ مشاريع مثل بناء المساجد وحفر الآبار وتوصيل المياه. ويعيش متبرعوها في بلدان أخرى ويدفعون بعملاتهم. والحجز توكيل لخيرات عن المتبرع، فلا بد أن تُؤدّى كل شعيرة بالنية التي يحددها وبالأسماء التي يذكرها، ويريد المتبرع ما يثبت أنها أُدّيت.

ما بنيناه

موقع يختار فيه المتبرع الشعيرة أو المشروع ويحدد نيته ويدفع، ولوحة تحكم يدير منها الفريق ذلك كله: بالعربية والإنجليزية، ومن اليمين إلى اليسار في العربية.

• كتالوج واحد للشعائر والمشاريع. الخراف والماعز والعجول والأبقار للأضحية والعقيقة إلى جانب المساجد والآبار ووصلات المياه وتوزيع المصاحف، في تصنيفات مع بحث. وتعرض كل ذبيحة عدد من تُطعمهم، وتعرض كل خدمة صورها وفيديوهاتها بالترتيب الذي يحدده الفريق.
• أسعار بعملة المتبرع. يختار المتبرع منطقته أعلى الصفحة فتظهر الأسعار كلها بعملتها. ويحدد الفريق سعر كل خدمة بكل عملة بدلاً من تحويل سعر واحد.
• ذبيحة كاملة أو حصة. تُباع الخدمة كاملة أو حصصاً، لكل منهما سعره وتفاصيله، ويختار الفريق أيهما تعرضه بطاقتها.
• النية والأسماء. قبل الدفع يحدد المتبرع نيته: أضحية أو صدقة أو نذر أو غير ذلك، والأسماء التي تُؤدّى عنها، وهل أصحابها ذكور أم إناث، أحياء أم متوفون. ويمكنه أن يضيف دعاءً قصيراً وصورة، ويرى الفريق ذلك كله مع الطلب.
• حاسبة للعقيقة. يُدخل المتبرع عدد أبنائه من الذكور والإناث ويختار الذبيحة، فتحسب الصفحة العدد المطلوب وفق الحديث الذي تذكره، ثم تقوده إلى الخدمات.
• تقييمات صوتية. تقييمات مسجلة تُسمع في صفحة الخدمة، مع نصها بالعربية والإنجليزية. ويرفعها الفريق ويحدد ترتيبها.
• الحسابات والطلبات. يدخل المتبرع ببريده الإلكتروني أو رقم واتساب، ويستعيد كلمة المرور برمز يصله بالبريد. ويعرض كل طلب حالته، ويمكن دفع الطلب الذي ما زال ينتظر الدفع من الحساب.
• من أين جاء كل طلب. تُسجَّل كل زيارة بحملتها ومصدرها، ويحتفظ كل طلب بالزيارة التي جاء منها. وترتّب لوحة التحكم المصادر والحملات والمواقع المحيلة والدول، وتتبع أحداث بكسل ميتا المتبرع من الخدمة حتى الدفع.
• الموقع يُدار من لوحة التحكم. الخدمات والتصنيفات والطلبات والمستخدمون. وعلامات ملونة على الخدمات، ويمكن للعلامة أن توقف الطلب مع بقاء الصفحة مفتوحة. وشرائح الصفحة الرئيسية وفيديوها وشريط الأخبار باللغتين، وأرقام واتساب للمبيعات والدعم، وسجل لكل تغيير يجريه مدير.

كيف بنيناه

الموقع مبني بـ Next.js وReact وTailwind CSS، بالعربية والإنجليزية عبر next-intl، ومن اليمين إلى اليسار في العربية. ولكل خدمة رابطها وعنوانها ومعاينتها عند المشاركة، وتضم خريطة الموقع كل الخدمات باللغتين. ولوحة التحكم تطبيق Next.js ثانٍ، فيه رسوم بيانية بـ Recharts وسحب وإفلات لترتيب الخدمات والتصنيفات والوسائط. وواجهة البرمجة مبنية بـ NestJS على PostgreSQL عبر TypeORM، بطبقات منفصلة للنطاق والتطبيق والبنية التحتية. وتمر المدفوعات عبر منفذ واحد: تختار واجهة البرمجة البوابة حسب عملة الطلب ومنطقة المتبرع، مع محوّلات لباي موب وإيزي كاش وبولار، فلا تحتاج إضافة بوابة جديدة إلا محوّلاً وإعداداً.

النتيجة

يختار متبرعو خيرات الذبيحة أو المشروع الخيري ويدفعون عبر الإنترنت، بالعربية أو الإنجليزية، ويصل كل طلب إلى الفريق ومعه النية والأسماء التي يُؤدّى عنها.

دورنا

قاده فريقنا قبل الاستوديو: الموقع ولوحة التحكم وواجهة البرمجة.