Everyone has heard of Google Maps and Apple Maps. These applications have been an essential part of our daily lives, allowing us to travel faster and more efficiently. However, in the modern world, there are many areas that feel dangerous due to their high crime rates, such as Skid Row and Compton (which is the 4th dangerous city in the U.S.). Because of these persistent crime trends, we tend to feel unsafe traveling through neighborhoods that are threatening toward our personal well-being. With a focus on putting pedestrians and commuters at ease, we decided to create roadblock, a user-friendly mapping platform that focuses on finding the safest travel route between two locations, allowing for city-dwellers to avoid spots more prone to dangerous activity and encouraging peace of mind in city travels.

splash image

What it does

roadblock allows users to input a start and destination location, and find the safest travel route between the two locations for both pedestrians and drivers. The app visualizes the route on an interactive map and provides step-by-step travel directions, along with detailed map markers that indicate unsafe areas where crime has been recently recorded. By navigating through our simple, stream-lined UI, users are also able to report recent criminal activity and alert the authorities, allowing for the community to be better informed through realtime data, and thus more aware of areas to avoid during their daily commute.

Users can report crimes, notifying the police and contributing to our database

How we built it

We utilized Node.js on the backend, Express as our web framework, Google Firebase for our database, Handlebars as our front end templating engine, Semantic UI as a front end library, and Heroku for hosting. We wanted our website to live update without the need to ever refresh and so we also incorporated in We also utilized the MapQuest API coupled with Leaflet.js in order to display the map, display the markers, and generate the routes. We also incorporated Twilio's API in order to notify a police phone number (Although we really utilized our own).

Each time a form is submitted on our application (Either to request a route or to report a crime), emits a signal and sends information to our Node.js server in order to query our Firebase database. In the case of requesting a route, the server retrieves a list of points in the way of the route and then sends it back to the client side where a route is generated by making a GET request to the MapQuest Directions API. As for reporting a crime, we add a new object to our database storing the crime's description, its address, as well as its latitude and longitude coordinates which we generate from MapQuest's Geocoding API. When this new object is added to the database, it is also added to a local data structure on the client side which is used to generate markers through Leaflet.js. These two features make up the majority of our application. We also added in a few additional features including automatic location filling through MapQuest's Placesearch API, notifying the police through Twilio API, and car mode through a parameter in generating MapQuest's routes. We even bothered with more minor details like changing each route step's arrow icon based on its direction.

Atom So much code went into this project

Challenges we ran into

The most challenging part about this application was definitely dealing with asynchronous Javascript functions. We relied on calling a lot of different APIs. This reliance also made it extremely difficult to work in the main gym where everyone else was at; we struggled with internet issues and ultimately resorted to coding inside a random lecture hall on UCLA campus for the remainder of the hackathon.

We also had a lot of problems trying to generate the routes using the MapQuest API. It took a while for us to realize that the latitude and longitude coordinates we were using were off and we additionally had a lot of problems because there was just so much information being returned.

Above all else, our biggest problem was just brainstorming ideas. We spent the first 4 hours of the hackathon just trying to think of a project idea and we weren't able to come up with a name until the very end. However, we ended up coming up with a lot of different ideas throughout the hackathon which allowed us to implement so many features.

Accomplishments that we're proud of

Our proudest accomplishment has been the ability to integrate a majority of the features we planned out while at the same time maintaining a user-friendly environment throughout the web application. Our main goal with this project was to provide practical, easy-to-use features for users looking to travel in the safest way possible, and we feel that we achieved several of the milestones we set while staying true to our vision.

It was also the most successful hackathon that we've done together as a team. The last hackathon that we did together was in October and we hardly managed to build anything due to lack of experience. This hackathon showed how much we have grown as developers since that time period since we've all been constantly grinding out projects and attending competitions.

access a big database We even bothered to add in car mode! Pretty proud about that one!

What we learned

We had a lot of prior knowledge coming into this hackathon but this project was really the first time we were able to combine everything together. We had previously used technologies like Firebase and but rarely used them at one time. One important skill that we gained during this hackathon which we previously struggled with is the ability to divide work. In previous hackathons, we would often code together because we would struggle with using version control and it was difficult deciding who would be assigned to what task. At this hackathon, we were able to successfully split up the roles because we had a higher level understanding of the technology than in the past.

What's next for roadblock

As this web application gets published, we hope that people can reliably use the application to find the safest travel routes, no matter where they may be. We would ideally have an efficient system to filter out old data and base the safe routes on crimes committed recently, in order to keep our information relevant and the most applicable.

We feel that expanding this idea further by integrating it into a mobile application would be exceptionally useful. This would be more convenient for on-the-go access, as people could instantly feel more at ease when outside during the middle of the night by taking out their phones and checking the app to find which routes to avoid at that time.

Building on the idea of creating a population at ease in a potential unsafe area, we would also build a free phone subscription feature where people could be informed live whenever a new crime has been reported. This would also necessitate a filter system to ensure that all information provided by users is valid and unique.

Ultimately, we look forward toward our project helping resolve unease among citizens that travel through potentially unsafe areas, and we are excited to see how much farther it will grow!

Share this project: