Inspiration
As we near the end of the pandemic, we wanted to build a tool that could help our community determine how safe it was to go to certain businesses, but also present them with all the needed information. After all, your risk goes farther then just local case rates. It is helpful to know whether local businesses are following local COVID regulations, and understand how they are treating COVID.
What it does
Our web application utilizes two APIs to provide COVID data for your county. First, our web app implements the COVID Act Now API to pull local case data for your county. To provide additional context to this data as you decide which businesses to attend, we also have an API hosted on Google Cloud that integrates with a MySQL database also hosted on Google Cloud Services. This API contains crowd-sourced data on how businesses are adapting to the pandemic. For example, are they social distancing their customers, and are the businesses regularly crowded? This data is crowd-sourced from the public so everyone can have the most up-to-date information.
How we built it
We chose to divide-and-conquer our work on the web app. For the front-end of the website, we built the website using React and NodeJS. We styled the website with HTML and CSS. Meanwhile, the back-end was built using Python and Flask, as well as Google Cloud Services for hosting services.
Challenges we ran into
A lot of the challenges came from the fact that we did not have any experience with web development prior to this hackathon. On the front-end, a lot of of our challenges revolved around dynamically rendering our views. This largely came from the fact that we did not have a way to know how many elements would be returned prior to running each request. We also faced some issues with one of our field's autocomplete event, where it would not report the autocompleted value to out React app. We also struggled with making specific calls to the API and using useEffect() and understanding that lifecycle.
On the back-end, our challenges largely revolved around deploying the API and MySQL database to Google Cloud Services. When we first tried to deploy the API, we had trouble connecting the App Engine runtime to the Google Cloud SQL instance. However, if we ran the App Engine script locally on one of our machines, we could connect to the SQL instance perfectly. This mainly came down to us having to use a different set of instructions for the flexible instance, instead of the standard instance.
Accomplishments that we're proud of
We're very proud of the fact that we have a functioning backend API and database for our business reviews. On the frontend, we are proud of our functioning React web app and that we are able to provide a good UX with our requests. We build this website from scratch, and are proud of its functionality! Speaking of functionality, we are also proud of the autocomplete line in our county-selector field, and that we are able to use that to feed the API's input.
What we learned
On the backend, we learned how to use Google App Engine Flexible instances for running an API. We also learned how to instantiate a database on Cloud SQL, and connect the two services together so the API could get data from the MySQL database. Lastly, we learned how to use Postman for testing our API, so we could make sure the data would be returned in the correct format.
On the frontend, we learned the basics of how to call an API and use that data in a React application. We also learned about the significance of the CORS access-control-allow-origin header when it comes to working with react, and how one must edit a Flask API to work with that header. Additionally, we got more experience in working with State in React components and updating those based on the feedback we received from the API.
What's next for COVID Risk Assesment
Next, we want to try and implement the POST requests in our database and have our React web app use those so users can add more businesses and reviews to the database. We also want to deploy our React web app to an App Engine service, so we are not restrained to running it locally. Lastly, we are debating looking at developing native web applications for our program, so we can provide native user experiences for Android and Apple users.