Maddad

Inspiration

• Giving charity should feel meaningful, confident, and accountable. Yet many donors struggle to determine where their money is truly needed, which causes are legitimate, and whether their zakat is being used correctly. This challenge becomes even more critical during humanitarian crises, when donations increase but transparency often decreases.

• Maddad was inspired by the need to restore trust in charitable giving. As a member of the Muslim community, I was particularly motivated to address the lack of clarity around zakat eligibility, verification, and accountability. The goal was to make ethical, transparent giving the default rather than the exception.

What It Does

• Maddad is an interactive, map-based platform that connects donors with verified humanitarian needs, both locally and globally.

Users can:

• Explore verified causes through an interactive map and curated cards

• Instantly identify zakat-eligible and endorsed initiatives

• View detailed charity pages with verification status, funding progress, and location

• Donate securely through Maddad or visit an organization’s official website

• Track updates and funding progress over time

• The platform supports local community funds, international relief efforts, and organizations working in crisis regions such as Palestine, all within a unified and transparent experience.

How It Was Built

• Maddad was built as a modern, responsive web application with a strong focus on trust, clarity, and usability.

• Frontend: React and TypeScript with a component-based architecture

• Styling: Tailwind CSS and custom design tokens to create a calm, dignified aesthetic

• Mapping: Interactive maps with location-based filtering

• UI Consistency: Reusable card components synchronized across map pins, lists, and donation pages

• The donation flow is intentionally flexible. Organizations can receive donations directly through Maddad or link to their official platforms, ensuring both accessibility and legitimacy.

Challenges Faced

• Designing a system that demonstrates realism at scale, despite uneven public data across organizations

• Keeping map pins, cards, and donation pages fully synchronized to avoid user confusion

• Refining layout, spacing, and verification indicators so the experience felt trustworthy rather than overwhelming

What Was Learned

• Trust is communicated through details. Small design decisions like spacing, labels, verification badges, and interaction flow significantly impact credibility.

• Spatial context matters. Seeing needs on a map makes humanitarian issues feel more tangible and grounded, especially when supporting both local and global causes.

What’s Next for Maddad

• Planned next steps include:

• Stronger verification workflows and audit trails

• Donor impact dashboards and receipts

• Charity onboarding and management tools

• Expanded filters for urgency, category, and crisis response

• Community endorsements and reporting features

• Maddad has the potential to grow into trusted infrastructure for transparent, ethical humanitarian giving at scale.

Built With

• javascript
• mapbox
• react
• tailwind
• typescript