Charity in Action 🌍

About the project

Mite.org is a public charity that collects donations for worthy causes worldwide through its website. The foundation curates many impactful projects, each with a specific purpose and amount to be raised.

The data pertaining to particular projects is handled using the Sanity CMS. This includes geolocation, amounts to be collected, gallery, foundation partners, recent updates, payment system data, and so on.

Users 🧍‍♂️

We use Sanity not only to create static content but rather as a full-fledged database with data being regularly added, edited, and deleted. For example, we can use it to store the data of registered users. This allows the site owner to see the new users and their contacts to then offer them assistance should any problems with their accounts occur. Creating this schema with the user data in Sanity was a great solution as it’s connected to other various documents, such as project subscriptions, news, links to the liked posts and images, etc. This enables a more convenient work with documents and their connections.

Payment system 💴

The client chose Stripe as a payment system to process the donations. Our main goal was to separate the donation campaigns so that the client could see and analyze the numbers for each of them separately. And so, we’ve skillfully used Stripe’s online store product management functionality to enable the collection of donations on a per-project basis, where each project is seen as a product. In doing so, we’ve also implemented a handy option of subscribing to charitable projects, allowing donors and sponsors to commit recurring transfers for the amount and within the timeframes they choose. Once subscribed, the donations will be charged from their cards automatically, i.e., weekly, monthly, or annually.

ThreeJs Globe 🌎

Another interesting feature we’ve implemented is visualizing all the organization’s projects on a 3D globe. We’ve added a geolocation list in Sanity, which includes country names, coordinates, and flags. We can then attach the created geolocation set to any previously added project, which allows us to display markers with relevant coordinates on the globe. Users can see the information about any project just by hovering over its marker.

Notifications 📮

Moving on to another feature we’ve added to the website — notifications. Users can subscribe to receive notifications regarding new projects, payments, the latest updates, etc. These notifications are powered by Sanity CMS and GROQ Webhooks. Here’s how it works: once a new document with the notification text is added to the Sanity admin panel, we can programmatically subscribe to it with Sanity hooks. When a hook is triggered, it sends a request to the serverless function along with the added data. The function then sends a request to the Firebase service through which users receive push notifications.

Search 🕵️‍♀️

GROQ Webhooks is an incredibly useful tool that we use for solving various problems. Outside of notifications, we also use Webhooks to send content from the CMS to various services. One of them is Algolia. This system indexes all the incoming content and allows us to search the website by providing links to our search queries.

Conclusions 📌

In summary, Sanity provides solutions to many of the project’s problems, even those relatively complex and unconventional. This gives us a flexible administrative panel with almost no effort required as compared to developing a similar system from scratch, along with its own back-end, database, and admin panel itself.

Word from authors ✌️

Liked our work? See more of our projects on www.halo-lab.com