Landing Page
Point of Interest Modal
User Location Modal
Prompt Recording Screen

🌍 PopSpot: AI-Powered Crowdsourced Mapping

🚀 Inspiration

In many communities, reporting local events or concerns—whether a pothole, a public gathering, or an infrastructure issue—is inefficient and lacks visibility. People rely on word-of-mouth, social media, or outdated reporting systems, making it difficult to track and address important occurrences.

We wanted to create a real-time, AI-powered crowdsourced mapping platform that enables users to effortlessly report events and visualize them on an interactive map with unique AI-generated icons. Our goal was to empower communities, promote engagement, and enhance local awareness using Generative AI.

🌎 What It Does

PopSpot is a community-driven mapping platform that allows users to report local events, issues, or incidents via text or speech-to-text. The platform:

Extracts Key Details – Uses OpenAI’s API to identify the event type and location from user input.
Generates Unique Icons – Creates a one of a kind SVG-based AI-generated icon with context for visualization.
Maps Events in Real-Time – Places icons on OpenStreetMap at the detected location.
Reuses Icons for Similar Events – If a similar event is reported, the existing icon is reused for better clarity.

Whether it's a street festival, a road hazard, or a local protest, PopSpot helps communities stay informed, take action, and foster civic engagement.

🏗️ How We Built It

We combined AI, real-time geolocation, and an intuitive UI using the following tech stack:

🔹 Tech Stack:

Frontend: React, Vite, TailwindCSS for a sleek, responsive UI.
Backend: Flask to handle API requests.
Database: MongoDB Atlas for scalable event storage.
AI Integration: OpenAI API for event detail extraction & SVG icon generation.
Speech-to-Text: React Speech-to-Text for hands-free event reporting.
Geolocation & Mapping: OpenStreetMap API for dynamic event visualization.

🔹 Workflow:

User Reports an Event – Via voice command.
AI Analyzes & Extracts Data – OpenAI API determines the event type & location.
Custom AI-Generated Icon – OpenAI API creates a unique SVG icon.
Event Gets Mapped – OpenStreetMap API visualizes the event in real-time.
Reusability of Icons – If a similar event is reported, we reuse the existing icon for consistency.

⚡ Challenges We Ran Into

Extracting precise location data from free-voice input on the client accurately was tricky.
Ensuring meaningful, reusable SVG icon generation in real-time.
Maintaining smooth real-time updates while handling multiple user reports.
Optimizing speech-to-text for accurate and user-friendly reporting.

🏆 Accomplishments That We’re Proud Of

✅ Successfully integrating GenAI for SVG icon generation.
✅ Implementing real-time mapping with OpenStreetMap.
✅ Developing a user-friendly and accessible interface.
✅ Making the platform scalable for large-scale community use.
✅ Reusing event icons to maintain map clarity and avoid clutter.

📚 What We Learned

The power of AI in urban engagement – Using GenAI for visual data representation.
How to optimize real-time geospatial updates for a seamless experience.
Enhancing accessibility with speech-to-text integration.
Crowdsourcing insights can drive social impact when done effectively.

🚀 What’s Next for PopSpot

🔹 AI-powered trend analysis – Identifying event patterns over time.
🔹 Mobile app integration for on-the-go event reporting.
🔹 Collaboration with city services to resolve issues efficiently.
🔹 Gamification & rewards for encouraging civic participation.