• 

  Complete view of the entire project

🚦 Traffic Management System — AI-Driven Urban Mobility Optimizer

Live Demo: https://trafficoptimizer.netlify.app/

---

💡 Inspiration

Traffic congestion is a persistent problem in urban areas, leading to wasted time, increased pollution, and reduced quality of life. We wanted to build a smart system that uses the power of AI and real-time data to optimize traffic flow dynamically, helping city planners and commuters alike.

---

⚙️ What it does

Our AI-based Traffic Management System analyzes real-time traffic data from sensors and cameras to optimize traffic signal timings. It features:

• 🧠 AI-driven signal control based on traffic density
• 📷 Computer vision to detect vehicle counts
• 📈 Predictive algorithms to forecast congestion
• 📍 Shortest path recommendations using NetworkX
• 🖥️ Interactive dashboard for city planners
• 🔔 Real-time alerts to notify commuters of traffic updates

---

🛠 How we built it

• Frontend: React + Vite + Tailwind CSS
• Backend: Python Flask + NetworkX
• Routing Logic: Graph algorithms for shortest path (Dijkstra)
• Hosting:
  • Backend: Render
  • Frontend: Netlify
• CORS enabled to ensure cross-platform communication
• .env used to securely pass backend URL to frontend

---

🚧 Challenges we ran into

• ❌ Handling CORS between frontend (Netlify) and backend (Render)
• 🐍 Python Flask required explicit port and host binding for Render
• 🔁 Keeping mock traffic data realistic for real-world simulations
• 🛠️ Integrating React state management with async API logic
• ⚠️ Environment variable management across deployments

---

🏆 Accomplishments that we're proud of

• 🌐 Full-stack app fully deployed and integrated
• ⚡ Real-time shortest path routing with instant results
• 📊 Clean UI for planners and users to interact with easily
• 🚀 Configured and deployed backend and frontend independently

---

📚 What we learned

• How to structure monorepos for frontend/backend separately
• Using NetworkX for graph modeling and analysis
• Securely deploying APIs and setting environment variables for build systems
• Handling deployment issues like port binding, CORS, and React builds

---

🔮 What's next for Traffic Management System

• 📡 Integrate real-time data from IoT devices and city traffic feeds
• 🚗 Use YOLO for real-time vehicle detection from live CCTV feeds
• 📱 Launch mobile version with user route recommendations
• 🧠 Train ML models on historical traffic patterns for smart predictions
• 🛣️ Recommend alternate green corridors during peak times

---

👀 Live Preview

👉 Click here to try the app

---

Made with 💻 by Mohan Sai

Built With

• css
• machine-learning
• node.js
• python
• react
• tailwind