PatchTO | Devpost

Registration/logon pages
Click on the marker to get more information about event
You can use the search bar to move the map to a desired location or click My Location to move the map to your own location
Tap add event to open the event form. Fill out the event form and submit to add a marker to the map
Tap on the event call out to then either upvote or downvote the event

Inspiration

Walking through the quiet streets of Toronto during the pandemic we realised how many problems there were in the city that went unnoticed. From the potholes we drove over to the destroyed basketball nets, we quickly realised how much needed to be fixed and how much of a hassle it would become to call the city and ask them to fix every issue that everyone reported. That's when we thought, “what if there was an app that could break the communication barrier between us and the government and easily inform them of what we needed fixed”, which was the start of PatchTO.

What it does

The app is a tool built to help fix the GTA’s growing infrastructure problem. Using an authentication system, users are able to sign on to an account connected to their email. After doing so, they are taken to a map of the GTA where they can choose to add a marker, pointing out an infrastructure problem at their location. They can add all other necessary supporting information to the marker before submitting the issue. The map view will allow them to see all other surrounding issues and they can then upvote or downvote these issues depending on their severity and validity.

How we built it

We built the front-end in react-native. To generate the map we used the react-native-maps library and we used the phones GPS through the expo location library. We used google maps API to search and move the map to different locations. We worked on front end and back end synchronously and separately before tying it together at the end. Our back-end is hosted through heroku and is built with express.js as well as the google firebase firestore API.

Challenges we ran into

Initially, we struggled with choosing a database to work with and setting it up properly. Our project needed a database that we could pull from and update quickly so that our map could stay up to date. Since it was our first time using a database like this we struggled to figure out a way to implement this. Eventually we decided to use Google Cloud Platform Firestore database since it worked the best for our needs. Although we struggled with creating the database, it was definitely worth the time and effort to learn. For future hackathons it will be easy to set up databases.

Accomplishments that we're proud of

We’re definitely proud of the way we integrated our front end and back end together. Our project required multiple different fields of data stored such as user specific data like votes casted and location specific data like event information. Then our frontend had to display this data cleanly throughout the whole map. This would have been a very complicated task but we circumvented this by planning front end and back end development well in advance to ensure we could handle the complexity of the task. Successfully integrating the project felt very rewarding considering the time we put into planning.

What we learned

One of the new skills we learned was how to use location based APIs like google maps api and react-native-maps library which allowed us to incorporate location based functionality to our project. Using these APIs we were able to track user location and allow them to navigate easily throughout the map using the search bar. While future projects may not require us to use these specific API’s, it is always useful to be comfortable with multiple API’s as it can make learning future API’s a lot easier.

What's next for PatchTO

We wanted to include a camera component that would allow users to take pictures of the problem they saw and then include that in the event report. Unfortunately we couldn’t figure out how to transfer files through the database in time but it is something we would definitely want to work toward in the future.

As for future implementation, we believe this app can grow to be more than just infrastructure problem pinging tool. Due to the apps design we believe this app can be used in multiple different ways. For example journalists can use it to ping real time news events across the GTA or tourism companies can ping where special events are occurring throughout the GTA. Although this app was made to better our local communities, we believe the actual potential of the tool limitless.

Built With

Submitted to

Hack the North 2020++

Created by

I worked on building the front end of the project using react native. Although it was challenging, I learned a lot about how to integrate different libraries and API's into the front end.

Madhu Sivapragasam
Software Engineering and Management student at McMaster University
Having never done app development using JS and react native before I tried to help where could and learnt a lot from my fellow engineers who helped me understand how the code was structured and an app is made

Yosihan Yogeswaran
I worked on the back-end of the project and designed some of the front-end. Not having used express.js prior to this hackathon posed a learning curve for me, but it was worth it in the end and I am happy with our result.

Adarsh Patel
Computer Engineering and Management Student at McMaster University
I worked on the back-end and developed endpoints of our app. I got to design and plan out the data flow and model between our app and Firebase. It was challenging, yet a fun and an great learning experience!

Het Patel