أثر بيئي، واضح على الخريطة.

منصة تطوعية ثنائية اللغة تضع كل حملة تنظيف موثّقة في مصر على خريطة واحدة — مع صور قبل وبعد، وأسماء المشاركين، وروابط كل حملة.

ReactViteLeafletSupabasePostgreSQLCloudflare Pages

جرّبه

زيارة

استكشف الشاشات ابدأ مشروعاً

الصفحة الرئيسية لـ EcoMasr مع معاينة خريطة الأثر

الغاية

لماذا صُنع هذا المنتج.

حملات التنظيف التطوعية تحدث في أنحاء مصر كل أسبوع، لكن إثباتها يضيع بين صور واتساب ومنشورات فيسبوك التي تختفي في الصفحة. EcoMasr تعطي كل مبادرة علامة دائمة على الخريطة: كيف كان المكان، وكيف أصبح، ومن صنع التغيير.

من داخل المشروع

مدروس من البداية حتى النهاية.

5 نقاط بارزة

خريطة الأثر: خريطة Leaflet تفاعلية لكل حملة تنظيف موثّقة في مصر، مع نوافذ منبثقة وصفحة تفاصيل كاملة.

مقارنة قبل وبعد: اسحب للمقارنة بين المكان قبل الحملة وبعدها، مع صورة جماعية وأسماء كل المشاركين.

روابط الحملات: كل حملة ترتبط بمنشوراتها وصفحاتها على مواقع التواصل، بعد تنقيتها والتحقق منها على الخادم.

تعديل لصاحب الحملة فقط: عدة مسؤولين، ولا يعدّل كل منهم إلا الحملات التي أضافها.

عربي وإنجليزي: واجهة عربية أولاً من اليمين لليسار، مع تبديل للإنجليزية بضغطة.

التحديات

القيود التي بنيت الحل حولها.

ما يبدو بسيطاً في الواجهة كان أصعب ما في التنفيذ.

01
أدوات إدارة بلا خادم مصادقة
المشكلة
احتاج عدة منظمين إلى إضافة الحملات وتعديلها على موقع ثابت، من دون تشغيل backend أو دفع تكلفته.
كيف بنيت الحل
كتبت دوال Postgres من نوع security definer في Supabase تتحقق من بيانات الدخول المشفّرة بـ bcrypt مع كل عملية كتابة. وكل حملة تسجّل من أنشأها، فلا يعدّل المسؤول أو يحذف إلا حملاته.
02
صور كبيرة من موقع العمل
المشكلة
المتطوعون يرفعون صور الهاتف بحجمها الكامل من مكان الحملة، وغالباً على إنترنت ضعيف.
كيف بنيت الحل
تُضغط الصور في المتصفح قبل الرفع، ثم تمر عبر Cloudflare Pages Function مع إعادة المحاولة إلى مخزن وسائط على CDN.
03
المواقع كما يرسلها الناس
المشكلة
المنظمون يرسلون روابط خرائط Google مختصرة لا إحداثيات، والمتصفح لا يستطيع فكّها.
كيف بنيت الحل
دالة على Cloudflare Pages تفك الروابط المختصرة إلى خط العرض والطول على الخادم، إلى جانب تحديد الموقع الحالي والنقر على الخريطة.