Inspiration

Coronavirus has been a major issue, literally, plaguing the world. With the United States starting to enter what seems like a third wave, and with different guidelines about what people should do to remain safe, we thought of creating a tool people can use to help themselves avoid hotspots. It is unavoidable to have to go outside for almost everyone, but we hope to minimize the risk of large groups forming by giving people an idea ahead of time of what areas are busy.

What it does This website takes in submissions from people about where they plan on being, the date they will be there, and the time period they’re there and adds it to a map. Other people can look up what location they plan on going to and see how busy it will be. A graph showing how many people said they will be there throughout the day is also present so it is easier to visualize what times have less people.

How we built it

The front end was made with a combination of HTML, Javascript and CSS, using Google Maps Javascript and Places APIs and Plotly’s Javascript graphing library. For scheduling and viewing the map, Google Maps autocomplete feature is used to validate the location names of a user’s input and helps users find their location. Plotly was used to graph the number of people in a location in specific time periods of an inputted date. 

The back end was made with Node.js (specifically Express.js) and MongoDB with a MongoDB server hosted on an AWS container. The database consists of a single collection called “locations”. A Node.js script sends users to this website’s web pages and serves as a bridge between the “locations” collection and the frontend. In scheduling, users fill forms in the frontend and the Node.js script validates their information and stores the forms as documents in the “locations” collection. In viewing maps, the user fills a query for the Node.js script to send to the MongoDB server, which returns a list of documents within a certain date and location. Challenges we ran into The teammate in charge of the front end had little prior experience making websites. This caused progress to be slower than it could have been, as time was split between learning and coding. For the back end, learning MongoDB and figuring out which data operations were necessary was difficult. The integration of Google Maps was especially difficult, as we had to spend hours modifying our CSS, HTML and JS files just so the map could appear on the webpage.

Accomplishments that we’re proud of

We were able to quickly agree upon an idea, instead of arguing we were able to jump straight into planning concepts and layout. Seeing the bland HTML page gradually turning into something pretty was satisfying. Having the background be two different colors was a problem that, although ending up being easy, was interesting to solve. The implementation of Google maps was impressive as it made validating location names much easier and gave our website more visual appeal. Meanwhile, setting up Plotly for the map view feature felt extremely satisfying as users could easily see when a place was more occupied.  

What we learned

The implementation of forms on the front end to gather information about where people plan on being was a learning experience. Previously, I imagined forms only being used on login pages or online tests, but now I see that forms are only limited by the creativity of the creator. -Kevin

I marvelled over the simplicity of MongoDB compared to other database software. Also, learning about Plotly was very cool. Being an AP Stat student, I can’t wait to use it to make statistical visualizations in the future.

-Nathan

Share this project:

Updates