-
homepage
Inspiration
Living in the city, the street outside is always somewhat busy, even during this pandemic. Such constant activity hard to find a time when it's safe to go outside, or a place where it's even possible to maintain adequate social distance. After finding that Google Maps already has easily accessible data describing the population density of certain areas at certain times, we decided to use our preexisting knowledge of web apps and APIs to build a streamlined interface for retrieving this data. The purpose of Waysafe is to help users find the safest time and place to go outside through a simple, user-friendly website.
What it does
When a user finds their location on the map on Waysafe, a request is made to Waysafe's server with the latitude and longitude of the user's area and the radius of visible space on the map. The server fetches the necessary data from Google Maps and returns it to the client, which constructs a heatmap of safe places on the users map. The heatmap has accurate results for population density in specific areas for multiple times throughout the day.
How we built it
When we began building the site, we found a Python package that retrieved the necessary Google Maps data. Writing a script to do so was simple, and sending output from the Python script to our node server was relatively simple as well, using a node module called PythonShell.
The backend was built with Express.js to handle the API, a virtual Python environment to fetch the data from Google Maps, and many many node modules that help to tie them together and complete the functionality.
The frontend was built with React for client-side rendering and routing. Much of the styling is done with bootstrap and SCSS to provide beautiful and consistent design.
Challenges we ran into
The first challenge we encountered was communicating between a Python script and our Node.js server. We overcame this challenge by first writing a test Python script and setting up the PythonShell node module to ensure that our objective was possible. To make sure it would run correctly, we needed to set up a virtual Python environment. Once we were certain it would work, we wrote our python script to fetch the data and connected it to the server.
Another challenge we faced was integrating out bootstrap theme and setting up the rendering of the heatmap. Because the Google Maps API we were using for rendering was a React implementation, it was hard to find complete documentation on how to manipulate it. However, a little bit of experimentation and a lot of Googling got us through this issue.
Accomplishments that we're proud of
We're proud to have built a beautiful, user-friendly website that can help people safely get a breath of fresh air during this pandemic. It's always reassuring in respect to the usefulness of a project when its inspiration comes from a problem we have faced ourselves. We hope other people will find Waysafe as useful as we will.
What we learned
We learned from the challenges we faced how to use Python in a web app and how to use the React implementation of the Google Maps API. We also got plenty of practice writing both backend code and frontend React code, and perhaps most importantly, we were able to practice working coherently as a team, helping each other out without compromising our version control.
What's next for Waysafe
As much as we believe this project will be useful during the pandemic and as long as social distancing is advised, we are uncertain as to how we can make it helpful afterwards, once it is no longer dangerous to interact with large groups of people at close range. We do not plan to remove our main feature, but we do hope to find a way to use this same Google Maps data to provide assistance to its users under regular circumstances; perhaps we can add features to help users easily find parking, or an uncrowded restaurant to eat at, or a quiet park at which a parent can play with their children. Such features should be easily implemented and ready for use by the time the Covid-19 pandemic is under control.
Log in or sign up for Devpost to join the conversation.