Safe City AI

Predict city risks in real-time. Stay safe with AI-powered alerts, interactive maps, and personalized notifications wherever you go.

Comment

Inspiration

Urban safety is a growing concern, and many residents are unaware of real-time risks like crime spikes, traffic accidents, or severe weather. I wanted to create a tool that empowers citizens to stay safe proactively, using AI to predict and alert them about potential hazards in their city.

What it does

SafeCity AI aggregates local data, including historical incidents, weather conditions, and simulated reports, to predict high-risk areas 24–48 hours in advance. It highlights risk zones on an interactive map, provides trend dashboards, and sends real-time notifications. The platform features light/dark mode, animations, and a user-friendly interface.

How I built it

  • Frontend: HTML5, CSS3, JavaScript (ES6), optionally React for components
  • Map & Visualization: Leaflet.js for interactive maps, Chart.js for trend graphs
  • AI & Logic: Rule-based scoring with optional AI-generated insights
  • Data Handling: Browser LocalStorage for MVP; external APIs can be integrated for live data
  • UI/UX Enhancements: Fade-in/fade-out animations for forms, hover effects, sliding cards, and a dark-mode neon meteor effect
  • Deployment: Vercel for hosting and live demo

Challenges I ran into

  • Balancing real-time interactivity with performance and smooth animations
  • Designing a dark mode that is visually appealing with neon effects without distracting users
  • Managing AI predictions and mapping logic alone within a tight hackathon timeframe
  • Ensuring responsiveness across desktop and mobile screens

Accomplishments I'm proud of

  • Built a fully functional MVP entirely on my own
  • Integrated AI predictions with an interactive map and dashboard
  • Implemented light/dark modes, smooth animations, and an engaging user interface
  • Created a hackathon-ready demo that is intuitive and visually impressive

What I learned

  • How to combine AI logic with frontend mapping and visualization
  • The importance of animations and theme modes for user engagement
  • How to manage a solo hackathon project while balancing technical complexity and polish
  • Practical deployment strategies using Vercel

What's next for SafeCity AI

  • Integrate real-time data APIs for crime, traffic, and weather
  • Add personalized alerts and user accounts
  • Enhance AI predictions with machine learning models for better accuracy
  • Expand notification system to mobile push notifications
  • Gamify alerts to increase user engagement and adoption

Built With

Share this project:

Updates