Smart Traffic

Smart Traffic is a web application that enables drivers to report traffic incidents, hazards, accidents, and road work in real time while helping nearby users stay informed and travel more safely.

Comment

Inspiration

Every summer in my country, Morocco, a lot of tourists visit here. In 2025 alone, Morocco received 11.6 million tourists at the end of July, a 16% increase against the same period in 2024, according to the Ministry of Tourism, Handicrafts and Social and Solidarity Economy. As a moroccan citizen going out in summer, I noticed messy it can get, with more vehicles on the road and more accidents and road hazard become more common, which makes it difficult for drivers to choose the safer and faster routes. This inspired me to build Smart traffic, an online platform where people can report incidents and help other drivers make better decisions while staying safe and contributing to safer, better and smarter roads.

What it does

In Smart Traffic, you can: -View an interactive map. -Report accidents, traffic jams, road work, and road hazards. -Place reports directly on the map. -Save reports locally so they remain after refreshing the page. -Filter incidents by category. -Find their current location using GPS. -Quickly access emergency contact numbers for police, ambulance, and fire services.

How I built it

I built Smart Traffic using modern technologies: Next.js, React, TypeScript, TailwindCSS, Leaflet & React Leaflet, OpenStreetMap, Geolocation API, Local Storage, GitHub.

The software uses Leaflet in order to render an interactive map that allows users to file reports anywhere on the map. The reports are then saved in local storage, which means that they will still be there even when the page is refreshed. The other features included in the project were the GPS capability that centers the map based on user location, and the categorization of reports.

Challenges I ran into

I found so many challenges in this project. First, Working with interactive maps was completely new to me, It was hard to figure out the first time how to place markers dynamically and change map events using react state. another challenge was integrating GPS without constantly forcing the map back to the user's location which was very annoying, but I fixed it at the end. Also spent time fixing issues with React State, modals, marker rendering, and making sure the reports were stored correctly.

Accomplishments that I'm proud of

This is my first ever Hackathon project, so I'm very proud that I was able to build a complete working prototype from scratch especially that I'm working alone. the features that I'm most proud of are: GPS location support, emergency contacts to help tourists easily find emergency numbers if needed, category filtering, a polished and unique interface.

What I learned

In this whole process, I have learned a lot beyond programming. For one, I got practical exposure to working with interactive maps, React state management, browser API, local storage, and even how to construct a bigger program through combining components. In addition, I was taught the value of planning, debugging, and iterating on my work to develop a product within a deadline. Most importantly, I learned that technology can be employed to solve problems in the community , even a small one.

What's next for Smart Traffic

This Prototype is only the beginning, the future version of Smart Traffic would include:

  • a cloud database so reports are shared between all users. -User accounts and authentication -notifications for nearby incidents. -Suggested alternative routes based on reported incidents. -A system to verify reports and reduce false info. -Add a leaderboard that rewards the most active and trusted community contributors each year. -AI-powered traffic prediction and congestion analysis.
Share this project:

Updates

Submission history