Inspiration
Inspiration for PotSpotter came about from commuting in Toronto. Day in day out, whether by bike, by train, or by car, one thing was certain, potholes. On my way to school, my summer job, or to hang with friends, potholes would always tag along. Through my course of living in Toronto, I've had multiple flat tires on the family car and even on my bike. During the already rough bus rides, potholes were just an additional smack in the face. Our inspiration for PotSpotter came from our day to day experience and what is seemingly part of every Torontonians daily life.
What it does
PotSpotter is a web app that plots out known potholes throughout the city, systematically rating them on their severity from low to high. Gemini analyzes submitted pothole images and determines their severity. The map on PotSpotter is available to anyone, whether signed in or not. Registered users of PotSpotter are granted the privilege of a better map view alongside the ability to post their own pothole(s), determine ratings, as well as cast upvotes and downvotes. Upon clicking on a pothole, all of its information is revealed. Our intention with PotSpotter was not just for people to know that there's pot holes in Toronto, if you live here, you know. We intended this website to bring attention to how bad the pothole crisis is and in turn, hopefully breed productive conversations in reducing potholes or repairing them sooner.
How we built it
With the myriad of great languages, libraries, and frameworks to choose from, there was a million ways the development of PotSpotter could have gone. Our decision making could be narrowed down to a few key points: simplicity, familiarity, and efficiency. Our back end consisted of Springboot mostly due to our familiarity with it. For our authentication system, we used Spring Security. Although Spring Security has a tedious initial setup, it has the benefit of being reusable amongst other projects, often only requiring minimal changes to be made, suiting us well. Our choice of database was supabase, it gave us all the benefits of PostGreSQL and since it was so time efficient to set up, in turn, we had more time to focus on the core features of PotSpotter . Cloudinary was chosen for allowing us to store image files in supabase via links. We assigned pothole severity using gemini by letting it assess the image before being sent to cloudinary and being stored in supabase. The front end framework of choice was Next.js, due to being bundled with React and Tailwind which sped up development. Anti Gravity heavily facilitated the development of our front end. React opened up leaflet.js which was used to display the map.
Challenges we ran into
The biggest challenge we ran into was finding a way for Gemini to be able to analyze the pothole pictures. Our initial approach failed because we were getting Gemini to analyze the pothole off of the cloudinary link, unaware that Gemini is unable to open and view cloudinary links. We got Gemini to work with us by first feeding Gemini the image and only then sending it to cloudinary before being saved in supabase.
Accomplishments that we're proud of
Our most impressive achievement was setting up a pipeline allowing for Gemini to generate a rating by analyzing the pothole pictures.
What we learned
During this Hackathon where we were thrusted into a fast paced environment where every hour counted, we learned the value of AI. I can confidently say that without the help of AI(honourable mention to Gemini and Anti-Gravity), what we achieved would not have come at such a timely manner, especially considering it’s our first Hackathon.
What's next for PotSpotter
As previously mentioned, many things were picked for their speed and efficiency. I think that for this setting we made the correct decisions, however, for a web app that’s meant to stand, priorities would have to change. The very next thing to change for PotSpotter will be it’s front end, I think that given time, the website could look far more beautiful and show the user more stats. Grouping potholes by zones like postal codes or specific roads could allow us to display some cool statistics, like, “What’s the worst road in Toronto?” Scalability is another big thing to talk about. When you’re in localhost, scalability isn’t a big thought but when you’re deployed, who knows when you’ll blow up on tiktok? Having potholes automatically added to the site is our biggest goal and was something we originally wanted to do. The biggest challenge in automatically adding potholes is getting a data set. If we ware able to get our hands on a data set of pothole locations as well as the associated pictures, we could set up some sort of agentic AI to comb through the list, or jus match fields.
Built With
- cloudinary
- gemini
- java
- javascript
- leaflet.js
- next.js
- postgresql
- react
- shadui
- springboot
- supabase
- typescript
Log in or sign up for Devpost to join the conversation.