Shafaf

Inspiration

Shafaf Aid started from a problem we’ve seen in our own communities, mosques often need financial support for urgent cases, but there’s no clean, transparent, or organized way to request help. Everything happens through word of mouth, WhatsApp chats, or announcements after prayer and donors rarely know which needs are real, urgent, or already covered. At the same time, the lack of visibility is not just a communication issue and is also a coordination problem, people might want to help, but there was no clear way to see where needs existed or whether they were already met. That’s why Shafaf Aid combines simple donation workflows with a powerful map that shows where support is needed most.

What it does

Shafaf Aid is an all in one. On one hand, its a transparent aid coordination platform, and on the other it also is a geospatial humanitarian command center. First is the Aid Coordination System, which works in the following way:

• Mosques submit aid requests
• Donors browse, pledge, and track their impact
• Admins review and approve requests Second is the Global Humanitarian Intelligence Dashboard:
• 3D/2D geospatial explorer
• Coverage index visualizations
• Choropleths, proportional circles, and urgency pulses
• Region-level analytics: population, IPC phase, conflict events
• Real-time data integrations (HDX, ReliefWeb)
• Synthetic crisis simulation engine

How we built it

We built Shafaf Aid as a full-stack platform with a hybrid data architecture, we utilized different technologies, a full detailed list is provided below: Frontend:

• Next.js + React
• Tailwind for rapid UI iteration
• Mapbox GL + Deck.gl for geospatial rendering
• Custom components for side panels, legends, tooltips, and transitions Backend:
• Supabase for authentication, database, and storage
• Role-based routing and session management
• Real-time request updates Data & Intelligence
• Static JSON + Supabase hybrid model for resilience
• Synthetic data generation using generateData.mjs
• Beta integrations with HDX and ReliefWeb
• Coverage index formula using weighted need vs. aid presence: Simulation Engine
• Volatility modeling
• Conflict escalation scenarios
• Virtual project deployment with before/after comparisons

Challenges we ran into

1. Balancing two products in one Building both a donor–mosque coordination system and a geospatial intelligence dashboard meant constant prioritization and architectural discipline.
2. Data realism Humanitarian data is messy, sparse, and inconsistent. Creating synthetic but believable datasets required careful modeling of:
3. population distributions
4. conflict intensity
5. aid presence
6. volatility
7. Geospatial performance Rendering multiple layers, transitions, and tooltips on a 3D globe while keeping the UI smooth pushed Mapbox and Deck.gl to their limits.
8. Time pressure With limited time and tool constraints, we had to debug, refactor, and redesign on the fly.

Accomplishments that we're proud of

• Built a prototype of a role-based aid coordination system
• Designed a beautiful, high-performance geospatial explorer
• Implemented a coverage index and real-time analytics
• Built a platform that feels like something people and NGOs could genuinely use, once it is polished of course. Most importantly, we created something that reflects our values: transparency, dignity, and impact.

What we learned

• How to architect systems that combine operational workflows with geospatial intelligence
• How to design for clarity under crisis conditions
• How to model humanitarian data realistically
• How to communicate complex analytics in intuitive visual ways
• How to build fast, adapt quickly, and keep the narrative coherent And we learned that even small teams can build tools with real-world potential when the mission is meaningful.

What's next for Shafaf

• Mosque verification workflows
• Donation processing and transparency ledger
• Expanded crisis simulation scenarios
• Mobile-first donor experience
• Partnership outreach to NGOs and community organizations

Built With

• next.js
• supabase