Something about me: I like to discover and dissect everyday problems, and use my software background to come up with creative solutions. As I mentioned in my previous post, I came across multiple instances in my day-to-day life where donating money to organizations was a long and confusing process. BeTheHope is my effort towards trying to centralize and simplify the donation process.
In the world of contactless payments and instant money transfers, the online donation process is far behind. I developed BeTheHope to streamline the donation process, and tackle the problem of endless clicks and unclear processes, to easily get valuable donations from the donor to the recipient.
Here’s a video with the walkthrough of the project (I won’t deny, after spending sleepless nights over getting my final render, my first instinct was to end the video with ’Please like, share and subscribe to my channel’ 🏅)
BeTheHope creates short URLs and QR codes linked to customized donation campaigns, that are distributable via text, email, WhatsApp or social media posts, making one-click donations possible using Apple Pay and Google Pay.
A high quality copy of the deck is available here.
Twilio CodeExchange agreement: ✔️
I agree to the competition's terms: ✔️
Engaging Engagements: A unique way to engage the donors
Exciting X-Factors: One-click donations and ability to share using QR codes
COVID-19 Communications: Easily deployable to restaurants, charities, local artists and many more SBOs to bring in donations
Interesting Integrations: Integrating with Stripe to enable digital wallet (Apple Pay and Google Pay) along with card payments
I really gave a long thought into deciding which category to go ahead with, but I feel this has been harder than actually developing the solution itself. I’ll let you be the judge for it; either ways the project aims helps to help the community as a whole 😃
Important FYI: Since the backend is hosted on the free-tier of Heroku, it goes off to sleep after every 30 minutes of inactivity. The first time you open a link below, it may take 8-12 seconds to load, since the server has to wake up before responding. (Sorry about that!)
Donation Page: http://bth.fund/CAcares/covid
(this short url will automatically get redirected to https://bethehope.fund/CAcares/covid)
Note: I’m currently using a test key for Stripe, so you guys can try donating, and would not be charged. Apple Pay option will only show on Safari on any iOS device with Apple Pay enabled; likewise Google Pay will only show on Chrome.
You can try out a credit card payment with test card number: 4242-4242-4242-4242.
Admin Portal: https://admin.bethehope.fund/
You can use the following credentials to explore the portal:
(Super secure password, I know, I know!)
Update: I have currently disabled the account to prevent exposing donor emails. If you want to explore the portal, please feel free to reach out to me, and I can help you with providing alternate access credentials.
Incase you have any questions or concerns, please feel free reach out to me at firstname.lastname@example.org
I split my code into three repositories to manage easy deployments, and created all three under a parent project (Github Organization): bethehope
Client Donation Page
I used Firebase authentication to manage user logging on the admin portal. To handle the payments (donations), I opted to choose Stripe’s digital wallet and card payment APIs. And of course, I used Twilio to enable text, email and WhatsApp messaging 😉
On the UI side, I decided to use Angular 8. I didn’t have much experience with Angular 8, but I had previously worked on AngularJS and a bit on React, so I thought this would be a good project to learn it on the go. Oh well, I’ll say there’s a lot more to learn, and I will look further into optimizing my code. Both the UI repositories are manually deployed on Firebase Hosting.
Redirection between the URLs was tiring, and I wholeheartedly accept that DevOps isn’t me thing 😪. Nonetheless, Namecheap support was really helpful to get me setup. I still haven’t been able to apply a SSL certificate (
https) on the bth.fund domain, which is automatically applied onto the bethehope.fund domain by Firebase hosting.
Also, enabling Apple Pay took some digging, since it required a developer key from Apple, a configuration file to be deployed, plus it only runs on SSL (so unfortunately can’t test it on localhost directly). I came across this handy tool for quick localhost deployments (with SSL): ngrok
Lastly, video editing is hard. Period. Tried ClipChamp, tried iMovie. Ended with using Adobe Premiere (and requiring a 1-hour tutorial on how to use it from a good friend). A quick shoutout to Animaker for the voice-over tool and Bensound for background music.
As you probably noticed, I never shared code snippets or went too techie. This is only because I wanted to keep my posts user-friendly for everyone–dev community & the remaining happy souls on this planet (haha, just kidding!).
That said, I love talking about code, and I’m just a ping away for anyone who wants to discuss the code or any other aspect about this project. Also totally okay if you just want to say hello 👋! I’m always excited to meet new people and collaborate on different projects, and am definitely open to work on BeTheHope together to take this project across the borders into the global community.