Ride2Provide Website - Development Overview

During my time working with Stack Five, Mission Without Borders, the non-profit behind this project, reached out to us looking to develop a website for their new campaign, Ride2Provide. Their request involved building a website that could also serve as a template for the future campaigns that they would run, as Ride2Provide was scheduled to be a month-long, annual campaign.

Approach

The client wasn't particularly opinionated regarding the design and development of the site however, there were two major requests that they deemed absolutely necessary: 1) Having an embedded donation form so that users could receive donations directly through their profile page, and 2) having a way to track the mileage for a user's bicycle rides.

In the search for an appropriate Donation platform for all our purposes, we came across Donately, which allowed for connecting directly to Stripe for receiving payments and provided an embeddable form component, which we were able to easily include directly on our site through an iframe.

Through Donately, we were also able to keep track of how many donations a particular user had received which allowed us to add some "gamification" through a little thermometer feature in a registered user's profile.

When it came to tracking user mileage, we made use of Strava's APIs. By allowing users to connect their profile to their Strava account, we were able to receive a lot of useful information that allowed us to decorate the profile page further such as mapping rides through Strava data and Mapbox as well as adding a mileage progress indicator.

The most challenging part of the work came with the backend implementation and API integrations. There was a two-way connect which had to be managed, especially during the sign up flow, to ensure that everything worked as it was supposed to. User accounts were directly managed by Firebase, but the sign up flow using Firebase was further extended by Donately, as a user also had to be created on the platform. This connected sign up experience was necessary in order for us to be able to create a user's individual donation form and have a Donately ID generated for the user so that their donations could be referenced through the Donately APIs.

Appropriate error handling in this area was essential; any failed transaction would require a complete rollback of any created data (i.e. users could potentially be locked out of signing up again or having a donation form if their email had been successfully registered but a failure had occurred on Donately's end). I wanted to keep manual intervention for our client to an absolute minimum, and I think the final result reflected our objectives quite well.

The project was quite simple but came along with its own set of challenges. It's always a pleasure to be able to work with non-profits to build a product with an impact, and even more gratifying to see everything in motion and the interactions that come from it.