Political rallies, festivals, sports events, construction activities, and sudden gatherings create localized traffic breakdowns. FlowGuard uses historical and real-time traffic data to forecast event-related congestion and recommend optimal manpower deployment, barricading strategies, and diversion plans.
Built using real Bengaluru Traffic Police incident data for analysis and decision support.
FlowGuard is an AI-powered traffic intelligence platform that predicts and manages event-driven congestion and orchestrates real-time diversion routes, resource deployments, and policing coordination. Built with modern React and powered by Google's Gemini AI, FlowGuard provides a tactical command center for traffic administrators, field officers, and logistics managers.
- Interactive Map Visualization - Real-time traffic event mapping with severity indicators
- AI-Powered Insights - Gemini AI chat advisor for predictive traffic analysis
- Real Data Analytics - Built on actual Bengaluru Traffic Police dataset (March 2023 - March 2024)
- Event Management System - Create, update, and track traffic disruption events
- Resource Optimization - Deploy officers and barricades efficiently
- Diversion Planner - Generate alternative routes during events
- Historical Analysis - Traffic hotspot identification and pattern recognition
- Real-time Notifications - Alert system for critical events
- Role-based Access - Admin, Officer, and Manager roles with appropriate permissions
- Node.js (v16 or higher recommended)
- npm or yarn
- Google Gemini API Key (Get one here)
-
Clone the repository
git clone <repository-url> cd flowguard
-
Install dependencies
npm install
-
Configure environment variables
Create a
.envfile in the root directory (or rename.env.example):cp .env.example .env
Add your Gemini API key:
GEMINI_API_KEY=your_gemini_api_key_here
-
Run the development server
npm run dev
The application will start on
http://localhost:3000(or the port specified by the server). -
Open in browser
Navigate to the local server URL displayed in your terminal.
The application includes role-based authentication. Use these demo accounts:
-
Admin Account
- Email:
admin@flowguard.gov - Password:
admin123 - Role: Traffic Administrator (Full system access)
- Email:
-
Field Officer Account
- Email:
officer@flowguard.gov - Password:
officer123 - Role: Field Officer (Event monitoring, resource management)
- Email:
-
Logistics Manager Account
- Email:
logistics@flowguard.gov - Password:
manager123 - Role: Logistics Manager (Resource allocation, route planning)
- Email:
| Command | Description |
|---|---|
npm run dev |
Start the development server with hot reload |
npm run build |
Build the production application (frontend + backend) |
npm run preview |
Preview the production build locally |
npm run lint |
Run TypeScript type checking |
npm start |
Start the production server |
npm run clean |
Clean the dist directory |
flowguard/
├── src/
│ ├── components/ # React components
│ │ ├── AIInsightsPanel.tsx # Gemini AI chat interface
│ │ ├── AuthPage.tsx # Login/authentication
│ │ ├── DiversionPlanner.tsx # Route planning tool
│ │ ├── EventCrud.tsx # Event management
│ │ ├── HistoricalView.tsx # Historical data analysis
│ │ ├── InteractiveMap.tsx # Map visualization
│ │ ├── LandingPage.tsx # Landing page
│ │ ├── OnboardingOverlay.tsx # User onboarding
│ │ ├── RealDataDashboard.tsx # Analytics dashboard
│ │ └── ResourcePanel.tsx # Resource management
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ ├── types.ts # TypeScript type definitions
│ ├── index.css # Global styles
│ └── bangalore_traffic_dataset.json # Real traffic data
├── assets/ # Static assets
├── dist/ # Production build output
├── scratch/ # Analysis and utility scripts
├── server.ts # Express backend server (TypeScript)
├── server.cjs # Express backend server (compiled)
├── index.html # HTML entry point
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
├── package.json # Project dependencies
└── README.md # This file
- View Dashboard - Monitor active events and system statistics
- Create Event - Add new traffic disruption events with location and severity
- Manage Resources - Deploy officers and barricades to events
- Plan Diversions - Generate alternative routes for affected areas
- AI Advisor - Chat with Gemini AI for traffic predictions and insights
- Analytics - Review hotspot data and historical patterns
FlowGuard integrates Google's Gemini AI to provide:
- Predictive Traffic Analysis - Forecast congestion based on event data
- Smart Route Suggestions - AI-recommended diversion routes
- Pattern Recognition - Identify recurring traffic issues
- Natural Language Queries - Ask questions about traffic patterns
- Real-time Recommendations - Dynamic resource allocation suggestions
The platform is built using actual traffic incident data from Bengaluru Traffic Police for analysis and decision support:
- Time Period: March 2023 - March 2024
- Coverage: Multiple police stations and traffic zones
- Analysis: Major corridors and hotspot identification
- Use Case: Historical pattern analysis and predictive modeling
- React 19 - UI framework
- TypeScript - Type safety
- Vite 8 - Build tool and dev server
- Tailwind CSS 4 - Styling
- Lucide React - Icon library
- Recharts - Data visualization
- Framer Motion - Animations
- Express.js - Web server
- Node.js - Runtime environment
- Google Gemini AI - AI/ML capabilities
- dotenv - Environment configuration
- esbuild - Fast JavaScript bundler
- tsx - TypeScript execution
- Autoprefixer - CSS post-processing
Create a .env file with the following:
# Required: Google Gemini API Key
GEMINI_API_KEY=your_api_key_here
# Optional: Server Configuration
PORT=3000
NODE_ENV=developmentGet your Gemini API key from Google AI Studio.
npm run build
npm startThe application can be deployed to:
- Vercel - Frontend hosting with serverless functions
- Render - Full-stack deployment
- Railway - Container-based deployment
Ensure environment variables are configured in your deployment platform.
Port already in use
# Kill the process using port 3000 (or your configured port)
# On Windows:
netstat -ano | findstr :3000
taskkill /PID <process_id> /FDependencies not installed
rm -rf node_modules package-lock.json
npm installGemini API errors
- Verify your API key is correct in
.env - Check your API quota and billing status
- Ensure you're using a valid Gemini API endpoint
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is part of a prototype demonstration and is provided as-is for educational and development purposes.
- Google Gemini AI - For powering intelligent traffic predictions
- Bengaluru Traffic Police - For providing real-world traffic data
- React & Vite Communities - For excellent tooling and documentation
For questions, issues, or feedback, please open an issue in the repository or contact the development team.
Built with for smarter traffic management
FlowGuard - Tactical Traffic Intelligence Engine