Covid Relief Pakistan
Tags: twiliohackathon, javascript, react, node
Published: 2020-05-01 03:46:05

---
title: Covid Relief Pakistan
published: true
description: Our submission to the Twilio x DEV Hackathon!
tags: #twiliohackathon, #javascript, #react, #node
---

###Category: COVID-19 Communications
<hr>
###The arrival of the holy month of Ramadan coincides with the worst days of the virus in Pakistan.
<hr>
### Authors 
- <a href="https://github.com/aliahsan07" target="_blank">Ali Ahsan</a>
- <a href="https://github.com/abreezasaleem" target="_blank">Abreeza Saleem</a>


## The actual Idea
<br>
<p>Initially, the scope of the project was broader and rather ambitious. We wanted to build an application that essentially synchronizes the relief operations on a city level in Pakistan such that the charities divide the regions(of a city/district) amongst themselves and only distribute ration there. Our portal would show where each charity/NGO operated. What this would have meant is a more efficient and egalitarian solution to the food crisis problem.</p>

<p>But this turned out to be a difficult task mainly due to two reasons:
<br>
1) The complexity of the task: Ensuring such synchronicity and collaboration would mean operating from the ground, communication with relevant authorities: charities, local governments, public perhaps. It was simply not feasible, so we had to limit our scope.
<br>
2) The lack of time on our hands: We couldn't invest as much time as we would have liked and had to constrict the scope of the project. </p>
<br>
## What we actually built
Covid Relief Pakistan is a web portal that gives the user an option to select a city from the dropdown and view charities operating there. This would show a list of exclusive charities working in that city as well as those working nationwide. If the user is interested in more details about the charity/NGO, they have the option to subscribe for more details. This is where the Twillio SMS API comes in. Once the user provides us their phone number, we send them relevant details about the selected charity.
<br>
A sample message is as follows:
```
Charity Name: Shahid Afridi Foundation
website: https://shahidafridifoundation.org/donatekarona/
Contact Number: Not Provided
EasyPaisa: Not Provided
Bank Details are as follows
Account Title: Shahid Afridi Foundation
Bank Name: Habib Bank Limited
Account Number: ----------
IBAN: ----------------
```

Users can also contribute by filling out a Google form that can be accessed by clicking the Add Charity Button. We are manually vetting the data that we get from the form to ensure authenticity. 

<hr>

### Link to Demo
The project is deployed on heroku: 
<a href="https://pacific-headland-81140.herokuapp.com" target="_blank">Demo</a>
<br>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s9k7uwwuyyl4vw0whbmy.png)
<hr>

### Link to Code
<a href="https://github.com/AbreezaSaleem/Covid-Relief" target="_blank">Github Repository</a>

<hr>

## Tech Stack
### Frontend
- React (create-react-app)
- Google Maps React
- Downshift
- SCSS

### Backend
- Node 
- Express
- Twillio API

### Other Technologies
- GitHub for Repository Management
- Heroku for deployment
- Notion for Project Management

## Discoveries/Reflections from Project
- Experimented with downshift for the first time. A convenient library to build dropdowns and store state. 
- Had issues integrating WhatsApp API, so stuck with the messaging Twillio API only. Twillio has done an amazing job in maintaining and documenting their APIs, their starter codes are beneficial, and if you play along enough, you realize you can achieve a lot with them (that's the intention). 
<hr>
That's our submission to the Twillio API hackathon, a nice and simple node app with React frontend. All the best, everyone!