UIUC Crime Map

A map that displays where crimes have been committed on the UIUC campus. This helps bring awareness to what areas are less safe to hang out in.

Comment

UIUC Crime Map (Live Website) 🔗

Introduction 🌱

The goal of our project is to create a simple web application that displays crimes recorded on the University Police Daily Crime Log. Our goal is to provide members of the UIUC community with an easy way to identify areas where crimes are occurring so they can be avoided.

Inspiration 💡

We were initially inspired to do this because of the rise in Asian Hate Crimes occurring in neighborhoods we thought were safe. One of our team members was even warned about going to a street he used to frequent because of recent attacks. We wanted a way to bring awareness and promote safety in the UIUC community, and this seemed like the best way to do it. We've seen apps like Nextdoor and wanted to create something for the University ecosystem.

What It Does ⚙️

It displays the data from University Police Daily Crime Log on a map with colored markers to indicate how recent the crimes are. You can also click on the markers to get a more detailed description of the crime.

How We Built It 🛠️

We have four main components for the application. A react.js frontend, an express.js backend, a MongoDB Atlas database, and a Python tool to parse the pdf and upload its contents to the MongoDB database.
For our frontend we used react-leaflet and leaflet to display OpenStreetMap objects and markers. We used mongoose.js to interface with MongoDB from our backend. In order to fetch the pdf we used selenium and beatifulsoup. To convert the pdf to a csv we used tabula.py and pymongo to interface with the MongoDB database.

Challenges We Ran Into 🚧

As this was the first hackathon for most of us, we ran into many challenges. The foremost one was a lack of knowledge in react.js as well as leaflet. One of the hardest parts was figuring out how to convert the crime data we fetched into markers to display on the map. We also had trouble with the UI and CSS several times with weird cutoffs from different aspect ratios.

Accomplishments that We're Proud of 🌟

We were able to successfully automate data collection and have a working Heroku app that people can visit and interact with. We were also able to get a usable mobile UI!

What We Learned 📖

For a lot of us, it was our first time working with react.js, express.js, and MongoDB in depth. It was both nerve-wracking to code and extremely gratifying when it worked!

What's Next for the UIUC Crime App 🚀

We hope to continue to update the app and add features such as filtering by crime type and time, as well as allowing users to report crimes. We also want to partner with the Illinois Police department to integrate this project with Illini-Alert and create both a platform for the Police to communicate with students, but also students to keep each other informed about crime on campus. Other ideas we have are plotting routes around school that avoid areas of high crime as well as awarding students with some sort of currency that can be used on campus for reporting crimes or safety hazards.

Share this project:

Updates