• 

• 

  Login Page

• 

  Place Marker on Map

• 

  Daashboard

Inspiration

SafestStreets was inspired by our team's interest in providing an efficient way for citizens to quickly report non-emergency incidents in their city to improve public safety and maintain a better urban environment. As novice drivers ourselves, we wanted to create an easy to use tool for our fellow citizens to report safety concerns such as potholes, broken streetlights, unsafe sidewalks, graffiti, or crime. While most cities already provide contact information to report such hazards, there does not exist a shared space for the community to work together to inform one another of potential dangers in real-time. Along with everyday citizens, local authorities can utilize SafestStreets to stay up to date on recent incidents.

What it does

SafestStreets revolutionizes citizen safety by allowing users to report non-emergency incidents to the public with an easy-to use app. It gives the user the option to create an account so that a history of all personal pins, posts, and comments can be saved. Users simply choose to place a pin on their current location or drag and drop the pin to select a different location, select incident tags, and optionally leave a description of the incident. They can add as many pins as desired and like others’ posts when logged in.

How we built it

The web app was created using a Django backend that utilized JSON web tokens for authentication, a PostgreSQL database, and a REST API to communicate with the frontend. The frontend was built using React, a UI component library called Shadcn, Tailwind CSS, Axios (for intercepting API calls), and MapLibre for the map user interface.

Challenges we ran into

We ran into a few challenges throughout the development process which we were able to resolve through creativity and by modifying some of our initial ideas.

One of the biggest challenges we ran into during this hackathon was learning how to use Django. This was the first time we had done anything significant concerning the backend. Many times we were left scratching our heads on how to properly code a serializer or initialize a database column using Django’s ORM. Another challenge we faced during production was finding a free maps API that would work well for this project. There were plenty of map APIs we found online, but most of the APIs that were able to do what we wanted required payment for each API request. After searching through articles and projects on GitHub, we were able to find an API that was able to accomplish all that was needed for our application: MapLibre.

Accomplishments that we're proud of

We are proud of being able to implement seamless user authentication using Django, seamlessly integrating the MapLibre API, and allowing users to access SafestStreets offline.

What we learned

Throughout the development process, we enhanced our technical skills by deepening our knowledge about Django’s built-in models to assist with database interaction and security features, such as the integrated admin interface to manage user accounts. This allowed us to focus on SafestStreet’s functionality and visualizations. Additionally, we learned important time management and organizational skills that transcend the field of software engineering. Above all, as first-time hackathon participants, we learnt the importance of resilience as a consequence of running into numerous hurdles, and we can confidently say that we are much better programmers than we were before this hackathon.

What's next for SafestStreets

Our team looks forward to improving SafestStreets’ functionality, as the ultimate goal is to enhance the user experience. Further upgrades include adding features to enhance collaboration between multiple users, such as allowing users to comment on and share each others’ posts. Multi-language and accessibility support (such as giving users the option to report incidents through an audio feature) will help expand our consumer base. We’re also planning on implementing a push-notification system to update users when incidents are resolved, when incidents occur near them, or when other users interact with their post.

Built With

• axios
• django
• javascript
• maplibre
• postgresql
• python
• react
• shadcn
• sqlite
• tailwindcss