Inspiration
We have all seen illegal dumpsites, smelled chemical smoke from nearby factories, or watched rivers change color from runoff. The problem is that most people have no idea who to call or what to report. There are dozens of agencies, confusing hotlines, and no feedback once you file. Most people just give up. We built CivicAlert to fix that. It gives everyday citizens a simple, direct way to report environmental issues and get them to the right authority automatically.
How We Built It
CivicAlert is a fully client-side single-page application built with vanilla HTML, CSS, and JavaScript. No frameworks, no build tools, no installations required. Just open the file in a browser and it works.
The core user flow is:
- Select your issue - air pollution, water contamination, illegal dumping, deforestation, and more
- Set severity - low, medium, or high urgency
- Describe and locate - GPS detection via the browser Geolocation API or a typed address geocoded through Nominatim
- Submit - the report routes to the nearest responsible authority and generates a reference number with a live status timeline
We built in an interactive Leaflet.js map, authority ranking sorted by distance using the Haversine formula, a live community feed, and a personal report tracker saved with localStorage. The whole app is one .html file.
What We Learned
- How to use the browser Geolocation API for real-time GPS detection
- How geocoding and reverse geocoding work through the Nominatim API
- How to build parallax scrolling with JavaScript using window.scrollY and CSS translateY() transforms
- How z-index and stacking contexts work in layered UI designs
Built With
- api
- css
- gps
- html
- icons
- javascript
- leaflet.js
- localstorage
- lucide
- nominatim
- openstreetmap
Log in or sign up for Devpost to join the conversation.