Sanabel

Inspiration

( مثل الذين ينفقون أموالهم في سبيل الله كمثل حبة أنبتت سبع سنابل في كل سنبلة مائة حبة والله يضاعف لمن يشاء )

This ayah has always been powerful to me. It shows that a single act of charity can grow into something far beyond what we imagine.

What inspired this project was something I kept noticing during Ramadan. Every night after Taraweeh, as people were leaving, there would be voices calling out: “Support your masjid.” It made me stop and think: what if there was a better way to bring people together to give? Something more reflective of the beauty of collective charity in Islam. That’s where the idea for Sanabel came from.

What it does

Sanabel is a donation platform that turns giving into a shared, visual experience. Users can donate individually or join a community pledge. As donations grow, a plant evolves in real time from a seed → sprout → plant → wheat. When the goal is reached, seven golden spikes bloom, reflecting the ayah. Every contribution, no matter how small, becomes part of something bigger and a reminder that Allah multiplies even the smallest acts.

How we built it

• Next.js for the frontend and API routes
• Supabase for the database, authentication, and real-time WebSocket updates
• Atomic Postgres RPC functions to handle concurrent donations safely
• Custom SVG plant animation that maps donation percentage to growth stage

Challenges

One of the challenges was making everything feel alive, like ensuring real-time updates across multiple users without delay and balancing a clean UI with an emotional, spiritual experience

What we learned

How to use Supabase Realtime to push live updates to all connected clients without polling, and how to write atomic database functions that prevent race conditions when multiple users donate simultaneously.

What is next for Sanabel

In the future, I’d love to take this further by integrating it with Stripe to enable seamless and secure payments, and continue improving the overall experience.

Built With

• css
• javascript
• next.js
• postgresql
• react
• supabase
• supabase-realtime