PatchIt

• 

  A cool logo I came up with and I just wanted to share it

Inspiration

PatchIt was inspired when my dad kept complaining about how the potholes near our apartment were never getting fixed and he could never find anyone to actually talk to or report them to in a clear way. That really made me realize how disconnected the system is when it comes to everyday infrastructure issues. People see problems all the time, but there is no simple place to report them, track them, and know if anything is actually being done. That moment is what pushed me to build PatchIt, a platform that makes these issues visible, trackable, and easier to act on.

What it does

PatchIt is a website where users can report infrastructure problems by uploading a photo, writing a description, and placing the issue on an interactive global map. Once submitted, each report appears in a live global feed where users can browse and sort issues by newest, most critical, or resolved. Every report also has a status system that shows whether it is open, in progress, or fixed, which helps create transparency and accountability.

How we built it

I built PatchIt using HTML, CSS, and JavaScript for the frontend to create the interface, layout, and interactivity. For the backend, I used Supabase to handle authentication, database storage, and managing user-generated reports including images, descriptions, and location data. For the interactive map, I used Leaflet, which allowed me to display reports geographically and let users zoom in, click markers, and explore issues visually in different locations. I also integrated Groq API keys to support backend logic and processing, and used LLaMA to help with extracting and interpreting information from uploaded images so reports can be structured more effectively. The feed, map, and report system are all connected through the database, which keeps everything synchronized so updates in one part of the platform are reflected everywhere else.

Challenges we ran into

One of the biggest challenges I ran into was connecting all the different systems together in a way that stayed consistent and reliable. Making authentication, image uploads, Leaflet map data, and the live feed all work together smoothly required a lot of restructuring and testing. Another challenge was keeping the user interface simple while still supporting complex functionality in the background. I had to make sure users could understand and use the platform quickly without being overwhelmed, even though the system behind it is fairly complex.

Accomplishments that we're proud of

I am proud that I was able to build a full end-to-end system that combines reporting, mapping, authentication, and AI-powered processing into one working platform.One of the biggest accomplishments is how quickly a user can go from uploading a photo of an issue to seeing it appear on a global map using Leaflet with structured information. I am also proud of the guest access feature, which lets anyone immediately explore the platform without needing to sign up. Overall, building something that feels complete, connected, and usable across multiple features is a major achievement for me.

What we learned

I learned how to build a full-stack web application using Supabase for the first time and for authentication and database management. On the frontend side, I learned how important it is to design interfaces that stay simple even when the backend is complex. I also learned how critical data structure and synchronization are when multiple features like feeds and maps depend on the same underlying information.

What's next for PatchIt

Next, I want to improve real-time updates so that reports and status changes appear instantly across the platform. I also want to improve the AI system to better classify and verify images so reports are more accurate. I plan to build stronger connections with local governments and civic organizations so reports can be escalated directly to the right authorities. I also want to improve mobile performance and responsiveness so the website works smoothly on any device. In the long term, I want to turn PatchIt into a widely used civic platform that helps communities report, track, and resolve real-world infrastructure problems more efficiently.

Built With

• css
• groq
• html
• javascript
• supabase
• typescript