UTMS

A smart traffic safety platform that identifies danger zones, suggests safer routes, finds parking, and monitors live traffic to help users navigate cities more safely."

Comment

Inspiration

UTMS (Urban Traffic Management System) was inspired by the need to make city navigation safer and more intelligent. With increasing traffic accidents and the complexity of urban road networks, we wanted to create a solution that combines real-time data, AI-powered insights, and user-friendly interfaces to help people make safer travel decisions.

The project addresses three critical pain points:

  • Danger Zone Awareness: Users often lack information about accident-prone areas
  • Route Optimization: Finding safer alternatives when primary routes cross dangerous zones
  • Real-time Monitoring: Access to live traffic feeds and parking availability

What We Learned

Building UTMS taught us valuable lessons in:

  • Google Maps API Integration: Mastering the Maps JavaScript API, Directions API, Places API, and Street View API
  • React + TypeScript: Building type-safe, component-based frontend applications
  • AI Integration: Implementing Gemini API for intelligent chatbot responses
  • Real-time Data Handling: Managing live video feeds and geolocation services
  • User Experience Design: Creating intuitive interfaces for complex mapping features

How We Built It

The project was built as a frontend-only React + TypeScript application using Vite for fast development:

  1. Core Map Features: Integrated Google Maps with custom markers, circles for danger zones, and route visualization
  2. Danger Zone System: Users can click on the map to add danger zones with descriptions, images, and videos
  3. Smart Route Finding: Implemented route calculation with automatic detection of danger zone intersections and alternate safe route suggestions
  4. Parking Finder: Built a parking location system with live geolocation and directions
  5. Traffic Monitoring: Integrated live camera feeds from TrafficVision for real-time traffic monitoring
  6. AI Chatbot: Created an intelligent assistant using Gemini API that can answer questions about traffic rules, danger zones, and display uploaded media

Challenges Faced

  • API Limitations: Working around CORS restrictions and managing multiple Google Maps API services
  • Route Calculation: Developing algorithms to detect route intersections with danger zones and calculate safe alternatives
  • Real-time Updates: Ensuring smooth video playback and accurate time-based alert triggers
  • State Management: Managing complex state across multiple components (danger zones, routes, parking, chatbot)
  • Performance: Optimizing map rendering and handling large base64-encoded media files

Built With

Share this project:

Updates