BeTheHope - Series Finale! [4]

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.

Cumbersome donation processes paired with fickle minded millennials are a recipe for disaster.

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.

As I discussed my love for numbers in my previous post, here’s a deck I put together with some fascinating stats which motivated me to build this solution.

A high quality copy of the deck is available here.

---

Demo Link

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/

Note: I have not opened signups for the public, as my private keys are tied to the backend APIs for Stripe and Twilio for now.

You can use the following credentials to explore the portal:
Username: admin@canadacares.com
Password: 123456
(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 abhinavchawla13@gmail.com

---

Link to Code

The code might be private at some point in time, if you want to have a sneak-peak, feel free to reach out to me!
I split my code into three repositories to manage easy deployments, and created all three under a parent project (Github Organization): bethehope

---

What's the stack?

I used Node.js with Express framework to develop my backend API. On the database side, I deployed a MongoDB instance on Atlas. The backend is auto-deployed on Heroku free-dyno right now.

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.

Also, I bought both the domains (bth.fund, bethehope.fund) on Namecheap and handled the redirection from bth.fund to bethehope.fund using their cloudserver tools.

---

Some places where I felt a bit lost

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.

---

Final thoughts

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.