loading...
Cover image for BeTheHope - Series Finale! [4]

BeTheHope - Series Finale! [4]

abhinavchawla13 profile image Abhinav Chawla Updated on ・5 min read

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.

Twilio CodeExchange agreement: ✔️
I agree to the competition's terms: ✔️


Category Submission

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 😃


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.
donation page

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.

admin page

Incase you have any questions or concerns, please feel free reach out to me at abhinavchawla13@gmail.com

Link to Code

I split my code into three repositories to manage easy deployments, and created all three under a parent project (Github Organization): bethehope

Backend API

GitHub logo bethehope / bethehope-api

Backend server for BeTheHope

Admin Portal

GitHub logo bethehope / bethehope-admin-ui

Admin portal for BeTheHope

Client Donation Page

GitHub logo bethehope / bethehope-client-ui

User donation page for 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.

Another big thanks to the Twilio and DEV.to team for hosting this hackathon. I wish everyone safe passage through these difficult pandemic times!

Discussion

markdown guide
 

It's pretty amazing how clean and polished this looks in such a short time. You make it look so easy! I really hope this app makes it out there in the world. We need it. Would definitely love for future posts that shared some of the code. Now that I've seen it, I want to be able to build something myself!

 

Thanks again Morgan for following my series, and giving positive feedback. Agreed, I would love to share the code and collaborate to use the project to help small businesses.
(Also, just saw you shared the project on Twitter. Thanks for the support!)