Impact Map: An interactive Leaflet map of every documented cleanup across Egypt, with popups and a full detail view.
Project 05
EcoMasr
Environmental action, mapped.
A bilingual volunteer platform that puts every documented cleanup in Egypt on one map — with before and after photos, the people who took part, and links to each campaign.
ReactViteLeafletSupabasePostgreSQLCloudflare Pages
Try it
The mission
Why this exists.
Volunteer cleanups happen across Egypt every week, but the proof lives in WhatsApp photos and Facebook posts that disappear down a feed. EcoMasr gives each initiative a permanent pin: what the place looked like, what it looks like now, and the names of the people who changed it.
Inside the build
Thought through, end to end.
5 highlights
Before / After Slider: Drag to compare the site before and after, alongside a group photo and credits for every contributor.
Campaign Links: Each cleanup links out to its social posts and campaign pages, cleaned and validated on the server.
Owner-Only Editing: Multiple admins, each able to change only the cleanups they created.
Bilingual AR | EN: Arabic-first right-to-left interface with a one-tap switch to English.
The hard parts
Constraints I designed around.
The features that look effortless were the ones that fought back.
- 01
Admin tools without an auth server
The obstacle
Several organisers needed to add and edit cleanups on a static site, without running or paying for a backend.
How I solved it
Wrote Postgres security-definer functions in Supabase that check bcrypt-hashed credentials on every write. Each cleanup records its creator, so admins can only edit or delete their own entries.
- 02
Big photos from the field
The obstacle
Volunteers upload full-size phone photos straight from the cleanup site, often on weak mobile data.
How I solved it
Images are compressed in the browser before upload, then sent through a Cloudflare Pages Function with retries to a CDN-backed media store.
- 03
Locations the way people share them
The obstacle
Organisers send shortened Google Maps links, not coordinates, and the browser can't expand them.
How I solved it
A Pages Function resolves short Maps links to latitude and longitude on the server, next to current-location and tap-to-place on the map.
Product tour
A closer look inside.
Swipe through the real product screens and the details that make the experience feel complete.
