how we helped overhaul the charity platform serving thousands in need

The client chose Stripe as a payment system to process the donations. One of our main goals was to separate the projects so that the client could see and analyze the numbers for each of them individually. 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.

We’ve designed a clean and functional dashboard in the user profile area where users can choose a specific curated project, select a subscription period, see all the other projects they’ve subscribed to, and view the donation sums raised. This section also includes a photo gallery that users can like and share on social networks.

Having implemented the registration function, we had to decide where to store user data. This could be done either through the Auth0 service or directly in Sanity CMS. Because much of the application data associated with users was already stored in CMS, we chose to stick with Sanity once again. As per the client’s request, we’ve made this area functional, colorful, and informative.

As mentioned above, we use Sanity not only to manage static content but rather as a full-fledged database with data being regularly added, edited, and deleted. Using it to store the data of registered users allows the site owner to see their contacts and assist them with any account-related problems when necessary.

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 or news, links to the liked posts and images, etc. This approach enables a more convenient work with documents and their connections.

Another interesting feature we’ve implemented at the client’s behest is a 3D globe visualizing all the organization’s projects. We’ve added a geolocation list in Sanity, which includes country names, coordinates, and flags. The CMS admin could then attach the created geolocation set to any previously added project, which would allow displaying markers with relevant coordinates on the globe. This functionality allows users to see the information about any project simply by hovering over its marker.

We’ve also implemented user notifications for mite.org. Sponsors can now subscribe to receive pings regarding new projects, payments, the latest updates, etc. These notifications are powered by Sanity CMS and GROQ Webhooks. And 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 their push notifications.

GROQ Webhooks is a useful tool for solving various problems. Outside of notifications, we also use Webhooks to send content from the CMS to various services, such as Algolia. After each new blog publication, a webhook sends the data to the Algolia service, which in turn indexes all the incoming content like headers, descriptions, and links. When a user searches for information, a request is sent to the Algolia service, which then compares the search query with the available content. If there is a match, they will see a list of results.

With our efforts, the overhauled website became more transparent, informative, and friendly. It now boasts many additional technical solutions that improve the overall UX and facilitate the collection and provision of donations.

We can safely say that what started as a straightforward makeover turned into a great journey, with its many challenges, pitfalls, and ingenuous comebacks. Ultimately, we helped breathe new life into the project and added much-needed functionality and interactivity by finding apt solutions to many of its problems, even those relatively complex and unconventional.