A real-time traffic monitoring dashboard powered by ESP32 microcontroller and ultrasonic sensors.
It detects vehicle density, prevents collisions, and dynamically manages traffic flow — built with React + TypeScript, TailwindCSS, and Shadcn UI.
This system continuously monitors multiple lanes using sensors connected to an ESP32 board.
The live data is displayed on a responsive web dashboard built with Vite + React + TypeScript and updated in real-time using TanStack Query.
- ESP32 Microcontroller
- Ultrasonic Distance Sensors
- Arduino Framework
- Real-time Data Streaming
- React + TypeScript
- TailwindCSS + Shadcn UI
- TanStack Query
- Recharts for Analytics
| Name | Role | Roll No | GitHub | |
|---|---|---|---|---|
| Tapabrata Bakuli | Project Lead / Full-Stack Developer | 58 | GitHub | |
| Soumi Chakraborty | Member | 56 | GitHub | |
| Samrat Paul | Member | 57 | GitHub | |
| Apurba Mondal | Member | 59 | GitHub | |
| Asfar Anwar | Member | 60 | GitHub |
📁 Folder Structure
Place your project files like this:
sentinel-road/ ├── public/ │ ├── team/ │ │ ├── tapabrata.jpg │ │ ├── soumi.jpg │ │ ├── samrat.jpg │ │ ├── apurba.jpg │ │ └── asfar.jpg │ └── favicon.ico │ ├── src/ │ ├── components/ │ │ ├── ui/ │ │ │ ├── button.tsx │ │ │ ├── card.tsx │ │ │ └── ... (Shadcn UI files) │ │ ├── BlurText.tsx │ │ ├── ColorBends.tsx │ │ ├── ConnectionStatus.tsx │ │ ├── DensityOverview.tsx │ │ ├── EventLog.tsx │ │ ├── LaneCard.tsx │ │ ├── TrendChart.tsx │ │ └── CollisionAlert.tsx │ │ │ ├── hooks/ │ │ └── useTrafficData.ts │ │ │ ├── pages/ │ │ ├── about.tsx ✅ (the file you shared) │ │ └── dashboard.tsx (your main traffic dashboard) │ │ │ ├── App.tsx │ ├── main.tsx │ └── index.css │ ├── package.json ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts
© 2025 — Smart Traffic Control System
Built with ❤️ by CSE (IoTCSBT) — Roll 56 ~ 60, IEM Kolkata.