CoronaVirus GroceryAssist
Tags: twiliohackathon, angular, node, heroku
Published: 2020-04-28 19:56:15

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)

## What is it?
We were all taken by surprise at the start of the COVID-19 pandemic, when suddenly toilet paper was not available in grocery stores. Soon items like hand sanitizers, paper towels, bread, spaghetti, instant noodles etc. were vanishing off the shelves. And they are still not all back! My project is on the frontlines of this battle to help shoppers help their fellow citizens find these hard-to-come-by grocery items. 

This website helps grocery item "seekers" (people looking for groceries) to subscribe to a hard-to-find item (like toilet paper), and "finders" (people who are shopping at a store) to publish images/location information when they locate the item at a store. We are all in this together, so let's help each other out!

The Twilio SMS api does a wonderful job bringing grocery desperados and hard-to-find grocery items together. 

#### Category Submission: 
COVID-19 Communications

## Demo Link
Mobile website: https://twilio-hackathon-menezes.herokuapp.com/

## Screenshots

#### Home Page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sh442rqv5rtk9gomvh2v.png)
The main home page of the website

#### Search Page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/duwoqvk63uo95tx0bolb.png)
This is for looking up an item that you need. A list is provided for all items previously requested. You can either select from this list or add a new item.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m3107an4w7pf41r67wqn.png)
Add your Name and PhoneNumber so that you can get a text message when an item is found. You are effectively subscribing to the item.

#### Image Page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k922pza3ga2bm0fszo0f.png) Person at the store wants to help when they find an item can do so from here. You can take a picture with your camera. You are asked for permission to use the phone camera. The app will also use your Location information which shows as a google link in the text message sent. You can disable location settings on your phone to keep your location anonymous.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/peomicmqw3ofr8laz7ql.png)

#### SMS Received
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jrdp257y76srwdlm2960.png)
The SMS message received contains the picture of the item, name of the person who helped, store name, a personal message and google location link.

## Code Link
There are 2 repositories: 
1) Frontend : https://github.com/pipe2path/twilio-hack-coronavirus
2) Backend service : https://github.com/pipe2path/menezes-service
Both the above repos are MIT licensed.

## Code Stack 
The website is built in Angular 5 with bootstrap. The service is built in Node and Express.
The project is hosted on Heroku, using its MariaDB as the MYSQL database.

## Issues
No issues experienced with the Twilio API. I've been using the SMS api for another app, so just used that experience. However, most of the issues experienced were from displaying camera images in the browser and the payload size to the backend service. Other than that, had a great time developing this project.