Panda Path

Loading page
log in and sign up page
User dashboard
Map overview
Route generation

Inspiration

While looking at prominent issues in society, we all agreed that safety can be a major concern for individuals such as students when commuting around the city. This includes increasing crime and sexual assault rates country-wide, and murder rates at all time highs, which results in campus safety issues and can cause a source of anxiety for students. Therefore, we wanted to build an application that gives a greater sense of security to to anyone who feels unsafe travelling alone or even with other people.

What it does

Panda Path generates safe routes for walking based on crime data. You can create a user profile and save your primary destinations.

How we built it

Panda Path was built on React Native as a mobile app. We used JavaScript along with the Google Maps Platform API for app functionality. We explored many features of the map API such as location tracking, route generation, time/distance calculations, autocomplete search, and heatmaps. To keep track of users data (profile, saved places, history etc.), we built out the various routes and controllers for the backend using Express.js connected to a MongoDB database. We used bcrypt to encrypt user data and used JSONWebTokens for authentication. On the client side, Axios was used to fetch and update records from our database and populate various UI components.

Challenges we ran into

A paramount challenge that our team tackled this hackathon was centred around the implementation of React Native in order to create a mobile application optimized for both iOS and Android; initial struggles with lack of familiarity with the tech stack forced us to research and adapt our app and our languages in order to integrate a fully functional backend with new stylization elements.

Accomplishments that we're proud of

The design process compelled our team to create an app that was unique from existing map apps while maintaining a polished and ergonomic interface that users could use and enjoy with peace of mind. Our team thoroughly enjoyed learning how to use React components for the first time, and implementing Google Map APIs with our own twist of heat maps and topographic data to display danger spots and safe paths from one location to another.

What we learned

Holistically, Panda Path taught our team the importance of detailing a comprehensive and simple interface at first before dealing with the fine details of our project. Although our initial experience with Figma was time-consuming and required extensive research into the usability of map apps and user authentication details, we truly appreciated the time and effort of wireframing our prototype before coding it in front-end --especially with technology as novel as that of React Native components. Additionally, our backend developers learned how to work closely with one another with the API, covering and double-checking small errors in code that ultimately allowed the implementation of heat maps. Computationally, the implementation of a path that avoided danger spots on our map was difficult and tedious, despite the initial thought process appearing entirely feasible. Therefore, in the future, our team will use the lessons learned from this iteration to implement different methods from our backend to test and trial multiple ideas before finalizing our software design.

What's next for Panda Path

Implementing first person navigation and live user tracking to increase accessibility
Generating multiple route options to provide the user with more options and flexibility
Allowing users to report real-time crime for live data
Expand beyond Vancouver (such as USA), so that we can utilize FBI crime data for further accuracy and scope
Apply Dijkstra's philosophy to the current route generation algorithm