Frontend Repository Backend Repository
Inspiration
We looked towards developing countries, whose main form of transportation is primarily walking and biking. These overcrowded cities tend to block transportation and congestion starts to occur. Our goal with CrowdMap is to decongest pathways and, in the long run, help to influence future road and infrastructure plans.
What it does
CrowdMap provides two different heatmaps: a live and historical map. Our live heat map displays all connected user’s locations, with denser locations colored darker and spacious locations lighter. Our historical heatmap displays heat maps based off of data collected in the past 24 hours, displaying the average density throughout the 24 hour period. In each of these heatmaps, we have an indicator at the top telling whether the user is in a spacious environment or not.
How we built it
We used React and NodeJs to build the front end of CrowdMap. We developed our heatmap with the Google Maps Javascript API and interfaced it with React with the google-map-react module. Our server was created with Express and sockets.io. To store data for our historical heatmap, we used Google Firebase. We deployed our backend with Heroku.
Challenges we ran into
One of our challenges was trying to interface the Google Maps Javascript API with the correct node module. Although we could have decided not to use React and used the API normally, we decided to follow through since React would make our application more dynamic.
Accomplishments that we're proud of
This was our first time going through npmjs.com and finding several new packages to interface with. The frontend team was able to successfully incorporate react-springs into the landing page and the backend team figured out how to use google-map-react (even though there were a sparse number of online guides that were helpful).
What we learned
React is a very versatile web framework! Although two of our members were completely inexperienced with React, we were able to make a really interesting, applicable application that could be used for a variety of different reasons.
What's next for CrowdMap
CrowdMap can be taken one step further by developing a route planning feature that finds the most optimal route i.e. the route with the least amount of congestion. Along with user authentication, we can locate other users within our contact list and display our live locations on our map to further meeting plans and finding an ideal meeting location.
Log in or sign up for Devpost to join the conversation.