An intelligent traffic monitoring and route optimization platform that leverages AI to provide real-time traffic insights and personalized route recommendations.
- Live traffic monitoring with continuous data updates
- AI-powered traffic predictions using advanced machine learning
- Traffic severity analysis with color-coded alerts
- Historical traffic pattern analysis
- Alternative route suggestions with time savings calculations
- Google Maps integration for accurate navigation
- Plus Code detection and conversion to readable addresses
- Multi-modal transportation options (driving, walking, transit, cycling)
- Together AI integration for intelligent traffic analysis
- Personalized route recommendations based on user preferences
- Traffic pattern prediction with confidence scores
- Smart routing algorithms that adapt to real-time conditions
- User authentication via Supabase
- Responsive design optimized for all devices
- Dark/Light theme support with system preference detection
- Real-time updates with live data synchronization
- React 18 - Modern UI library
- TypeScript - Type-safe development
- Vite - Lightning-fast build tool
- Tailwind CSS - Utility-first CSS framework
- Supabase - Backend-as-a-Service (Auth, Database, Real-time)
- Google Maps API - Mapping and routing services
- Together AI - AI-powered traffic insights
- Google Places API - Location search and geocoding
- ESLint - Code linting and quality
- PostCSS - CSS processing and optimization
- Git - Version control
- Node.js 18+
- npm or yarn
- Git
-
Clone the repository
git clone https://github.com/mandatedisrael/TrafficIQ.git cd TrafficIQ -
Install dependencies
npm install
-
Set up environment variables
cp .env.example .env
Fill in your API keys in
.env:VITE_GOOGLE_MAPS_API_KEY=your_google_maps_api_key VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key VITE_TOGETHER_API_KEY=your_together_ai_api_key
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
- Go to Google Cloud Console
- Enable Google Maps JavaScript API and Places API
- Create credentials and copy your API key
- Create a project at Supabase
- Get your project URL and anon key from Settings > API
- Run the provided SQL migrations in your Supabase dashboard
- Sign up at Together AI
- Generate an API key from your dashboard
Run the migrations in your Supabase SQL editor:
supabase/migrations/20250628235725_black_mountain.sqlsupabase/migrations/20250629000031_jolly_summit.sql
- Enable location access when prompted
- Search for a destination using the search bar
- View route alternatives with time savings
- Get AI insights about traffic conditions
- Start navigation with your preferred app
- Enter any destination in the search bar
- View multiple route options with traffic data
- Compare routes by time, distance, and traffic levels
- Get personalized recommendations
- Real-time traffic conditions in your area
- Traffic severity indicators (Low, Moderate, High, Severe)
- Historical traffic patterns and predictions
- Live traffic updates every few minutes
- Intelligent traffic analysis and recommendations
- Predictive traffic modeling
- Route optimization suggestions
- Smart alerts for traffic incidents
npm run build- Connect your GitHub repository to Netlify
- Set build command:
npm run build - Set publish directory:
dist - Add environment variables in Netlify dashboard
npm install -g vercel
vercel --prodWe welcome contributions! 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
- Follow TypeScript best practices
- Use meaningful commit messages
- Add tests for new features
- Update documentation as needed
TrafficIQ/
├── src/
│ ├── components/ # React components
│ │ ├── AITrafficInsights.tsx
│ │ ├── AlternativeRoutes.tsx
│ │ ├── AuthModal.tsx
│ │ ├── DestinationSearch.tsx
│ │ ├── Header.tsx
│ │ └── ...
│ ├── contexts/ # React contexts
│ ├── hooks/ # Custom React hooks
│ ├── services/ # API and external services
│ ├── types/ # TypeScript type definitions
│ └── App.tsx # Main application component
├── supabase/ # Database migrations
├── public/ # Static assets
└── package.json # Dependencies and scripts
- Location data is processed locally and not stored permanently
- User authentication is handled securely via Supabase
- API keys are properly secured and not exposed to clients
- Traffic data is anonymized and aggregated
- Lighthouse Score: 95+ Performance
- Bundle Size: Optimized with code splitting
- Load Time: < 2 seconds on 3G networks
- Real-time Updates: Sub-second data refresh
Location Access Denied
- Ensure location permissions are enabled in your browser
- Try refreshing the page and allowing location access
API Key Errors
- Verify all API keys are correctly set in
.env - Check that APIs are enabled in respective dashboards
Build Errors
- Clear node_modules and reinstall:
rm -rf node_modules && npm install - Update Node.js to version 18+
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
- Contact the development team
This project is licensed under the MIT License - see the LICENSE file for details.
- Google Maps for comprehensive mapping services
- Supabase for backend infrastructure
- Together AI for advanced AI capabilities
- The React community for excellent tooling and resources
Built with ❤️ by the TrafficIQ Team
⭐ Star this repo if you find it helpful!
⭐ Star this repo if you find it helpful!