UW Exposure Tracking

Prevention is always better than a cure. The same applies to COVID-19. Know how many people in your classrooms got sick and where they sat to make informed decisions for your own wellbeing.

Comment

Inspiration

We wanted to make the campus as safe as possible to return to for the many of us returning to in-person. Many of the apps that we saw out in the world often dealt with reacting to exposure notifications. Seeing this, we wanted to make an app that allows one to be proactive. We sought to accomplish this by providing detailed information as to exactly which rooms and where in those rooms people tested positive. With this information (anonymously collected) made public to students, students will be able to make calculated decisions as to whether it is smart to be attending the class in certain conditions. We call this the UW exposure tracker -- our bid at making in-person safer from COVID-19.

What we did

We created an app where people are able to both see which buildings, rooms, and where in those rooms, there were people who tested positive for COVID-19. With this information, we hope that they will be able to make informed decisions such that they can increase their chances of being healthy. Furthermore, the user will be able to input data of when/where they tested positive to help contribute to the growing database.

We started off by creating a design for all of our slides on Figma. We built on this by creating an Ionic app based on React.js/TypeScript to quickly build up a UI matching the aforementioned design. Lastly, the API was quickly built up to interface with our MongoDB database.

While we may not have been able to complete everything we wished to complete, we are very proud of what we have managed to complete in one day.

Technologies used:

  • Figma
  • React.js
  • Ionic (with TypeScript)
  • MongoDB
  • Express (built a custom API)
  • esri's ArcGIS
  • Heroku (to host API)
  • Firebase (to host live website)
  • axios (to make requests)

Challenges

The biggest challenge in our way was the amount of new technologies that we had to learn. Most of us were unfamiliar with React.js, TypeScript, MongoDB, REST API's, Ionic, and ArcGIS. Unfortunately, a large portion of our app fell upon knowing these technologies very well. While we managed to get a significant portion of the app done, we would still like to iterate one what we have to both learn these technologies better and to bring in best practices and implement more efficient code.

The map was especially a pain to implement. We were trying to reverse engineer the technology that UW uses for its interactive campus maps. However, there was not much documentation on how to successfully integrate it into a React/TypeScript-based application. Considering that all of us were relatively new to all this, getting it to do what we wanted was... hard. This resulted in at least one of us working on getting maps working throughout the entire time period we were allowed to work for the hackathon.

In the end, we ended up with a decent start for a map. We have an interactive map with all the UW buildings highlighted. We would like to implement a heatmap and other layers to add visuals to our project.

Possible Improvements

Getting the database up and running was a pain, and is not as realtime as it could have been. We wish to improve this so that users will be able to access realtime data much easier. Secondly, the UI/UX of our application was not up to our standard. When compared to our Figma prototype, our final version came out to be a lot less polished. Having used this app for a better part of 12 hours, there's many little tweaks we would like to make to make this app easier to use. Finally, as mentioned, we would like improve our map system by quite a bit. While the data is there, we were not able to easily convert that into a heatmap due to learning multiple new technologies and poor documentation. However, considering the amount of progress we had made in a short amount of time, we believe that we will be able to implement a working map of this soon.

Future Aspirations

Obviously, this app is not limited to just the UW campus or even colleges -- this sort of information can be quickly adapted to any sort of space, providing fast, real-time data to people looking out for their safety. We hope that this more preemptive measure to avoiding exposure can ease the transition back into in-person working.

Find our project here

NOTE: This is meant to work with iPhones as a Progressive Web App. While this works on other devices, it often isn't pretty. Thank you. <3

Seeing the Figma Prototype

Head to Figma link below and click the play button at the top right to walk through our initial vision/design process. Be sure to click everything! There's some neat hidden features.

Share this project:

Updates