BeTheHope - Series Finale! [4]
Tags: twiliohackathon, donation, community
Published: 2020-04-29 21:04:02

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](https://dev.to/abhinavchawla13/bethehope-first-glimpse-1-29ei), 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](https://www.youtube.com/watch?v=nBZlpwKwr-s)** 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’* 🏅)
{% youtube nBZlpwKwr-s %}
**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](https://dev.to/abhinavchawla13/bethehope-what-did-data-say-3-2970), here’s a **[deck](https://drive.google.com/open?id=1mtx085kZxZ1r3rvF3XYq7zghrfM1598W)** I put together with some fascinating stats which motivated me to build this solution.
{% slideshare 5Msjq79ucDqFHG %}
#####A high quality copy of the deck is available [here](https://drive.google.com/open?id=1mtx085kZxZ1r3rvF3XYq7zghrfM1598W).

---

## Demo Link

***Important FYI:*** *Since the backend is hosted on the free-tier of [Heroku](https://www.heroku.com/), 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](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](https://stripe.com/en-ca), 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**.
![donation page] (https://imgur.com/zOkBBwe.png)

### Admin Portal: [https://admin.bethehope.fund/](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](https://stripe.com/en-ca) and [Twilio](http://twilio.com/) 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.*

![admin page] (https://imgur.com/J4c0Yoa.png)

##### 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] (https://github.com/bethehope)***


---

## What's the stack?
I used [Node.js](https://nodejs.org/) with [Express](https://expressjs.com/) framework to develop my backend API. On the database side, I deployed a [MongoDB](https://www.mongodb.com/) instance on [Atlas](https://www.mongodb.com/cloud/atlas). The backend is auto-deployed on [Heroku](https://www.heroku.com/) free-dyno right now. 

I used [Firebase authentication](https://firebase.google.com/docs/auth) to manage user logging on the admin portal.  To handle the payments (donations), I opted to choose [Stripe’s](https://stripe.com/en-ca) digital wallet and card payment APIs. And of course, I used [Twilio](http://twilio.com/) to enable text, email and WhatsApp messaging 😉

On the UI side, I decided to use [Angular 8](https://angular.io/). 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](https://firebase.google.com/docs/hosting).

Also, I bought both the domains ([bth.fund](http://bth.fund), [bethehope.fund](https://bethehope.fund)) on [Namecheap](https://www.namecheap.com/) 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](https://www.namecheap.com/) support was really helpful to get me setup. I still haven’t been able to apply a SSL certificate (`https`) on the [bth.fund](http://bth.fund) domain, which is automatically applied onto the [bethehope.fund](https://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](https://ngrok.com/)

Lastly, **video editing is hard**. Period. Tried ClipChamp, tried iMovie. Ended with using [Adobe Premiere](https://www.adobe.com/ca/products/premiere.html) (and requiring a 1-hour tutorial on how to use it from a good friend). A quick shoutout to [Animaker](https://tool.animaker.com/voice-app) for the voice-over tool and [Bensound](https://www.bensound.com/royalty-free-music/track/tenderness) 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.