About the Project – ASMO

Inspiration

Urbanization is accelerating, and citizens often feel disconnected from their cities. Access to real-time information about infrastructure, emergencies, and sustainability efforts is limited.

We wanted to create a platform that empowers citizens to understand, monitor, and improve their urban environment, fully aligned with SDG 11 – Sustainable Cities and Communities.

The idea of a city as an AI-aware entity inspired us, though due to time constraints, we focused on practical, impactful features that could be built quickly while still delivering a strong user experience.

What We Built

ASMO is a front-end-first citizen engagement platform that allows users to:

View city-specific infrastructure maps (water, electricity, roads) with live status updates using free APIs.
Access emergency contact information per city instantly.
Submit petitions or urban issues, moderated by an AI Agent to ensure relevance to SDG 11.
Receive AI-generated city tips and advisories based on real-time data.
Engage with an interactive, visually dynamic interface, including animated metrics and SVG maps.

Future expansion:

Fully implement City as an AI Character, reacting to citizen interactions.
Add daily citizen micro-tasks to encourage sustainable behaviors.
Introduce more AI Agents for event monitoring, petitions, and social engagement.

How We Built It

Frontend: Next.js + TypeScript for responsive, interactive UI.
AI Features: Vercel AI SDK to moderate posts and generate city advice.
APIs: Free public APIs for weather, air quality, and environmental data.
State Management: React hooks + localStorage for petitions and city-specific data (no heavy backend required).
Design: Hand-drawn SVG maps, animated metrics, and color-coded infrastructure panels using our palette:

Element	Color
Buttons / Key Stats	#FD9D24
Background	#0F172A
Panels / Cards	#1E293B
Charts / Active Elements	#38BDF8
Text	#F8FAFC

What We Learned

How to integrate AI Agents in a lightweight, front-end-only application.
Leveraging free APIs to make data live and city-specific.
Creating interactive, animated UI/UX that conveys complex city metrics.
Time management: prioritizing impactful features in a short 20-hour hackathon window.
Collaboration: splitting tasks efficiently among 4 team members.

Challenges Faced

Limited time forced us to simplify the AI City Character concept.
Database limitations: We had to implement petitions and infrastructure mapping using frontend state + free APIs.
Mapping city infrastructure dynamically was tricky without heavy backend support.
Ensuring the UI was visually engaging and informative while staying fully functional.

Despite these challenges, we managed to create a demo-ready system that showcases real-world urban sustainability impact, citizen engagement, and AI-assisted decision-making.