-
-
Dashboard: real-time global incident map with severity-coded markers (green → red).
-
Live stats : total reports, high-priority incidents, and this week's activity , update as reports come in.
-
Step 1 of the report flow: drag-and-drop photo upload with an optional description field.
-
The mission behind ECHO ,visual analysis without false certainty, and a shared map built for triage, not enforcement.
Inspiration
Environmental hazards rarely start as headlines — they start as a pile of trash near a drainage canal, a strange sheen on a canal, smoke rising from an open burn site. By the time these problems are officially reported, documented, and prioritized, real damage has often already been done. The gap between "someone noticed it" and "someone acted on it" is where a lot of environmental harm quietly compounds.
We wanted to close that gap with something almost anyone already has: a phone camera. What if the moment you see an environmental problem, you could turn it into an evidence-based report in under two minutes — no forms, no expertise, no bureaucracy?
That question became ECHO — Environmental Crisis & Hazard Observatory.
What it does
ECHO turns a single photograph of an environmental problem into a structured, AI-assisted incident report:
- Upload a photo — waste, pollution, smoke, damaged vegetation, illegal dumping, blocked drainage, or anything else visibly wrong.
- AI investigation — GPT-4o analyzes the image and returns a structured report: category, severity, confidence, visible evidence, potential risks, a recommended next step, and — just as importantly — what it cannot confirm from a photo alone.
- Tag a location — type it in or use device GPS.
- Add to the map — the incident joins a live, global observatory map alongside other reports, color-coded by severity (green → yellow → orange → red).
The result is a dashboard that feels less like a chatbot and more like an environmental command center: a global map, real-time stats, and a growing archive of evidence anyone can contribute to in under 90 seconds.
How we built it
- Next.js 14 (App Router) + TypeScript for the application shell and routing.
- Tailwind CSS, with a custom dark theme built around a satellite-monitoring / scientific-dashboard aesthetic — deliberately avoiding the "cute eco app" or "generic AI chatbot" look.
- GPT-4o does the actual image analysis, called through a server-side API route so the API key never reaches the client. The system prompt is carefully engineered to enforce hedged, non-scientific language ("appears," "suggests," "potential") and a strict JSON schema, which we validate before ever showing it to the user.
- react-leaflet with free CARTO dark map tiles renders the observatory map — no map API key required, keeping the project easy to run.
- No backend database, no authentication. Given the hackathon's scope, we intentionally kept persistence simple: submitted reports are stored in the browser via
localStorage, merged with a set of clearly labeledDEMO DATAincidents so the map is never empty for a demo or first-time visitor.
Challenges we ran into
- Keeping the AI honest. The biggest design challenge wasn't getting GPT-4o to describe an image — it was stopping it from overclaiming. A photo can't tell you chemical composition, exact pollution levels, or legal responsibility, and it was important the AI never implied it could. We solved this with explicit prompt constraints and a dedicated "What AI Cannot Confirm" section in every report, rather than treating that as an afterthought.
- Making a map-and-photo app feel premium, not generic. It's easy for "upload a photo, get an AI report" to look like a hackathon chatbot demo. We spent real effort on visual language — severity color coding, monospace metadata, a staged "investigation" animation — to make ECHO feel like a purpose-built intelligence tool.
- Staying disciplined about scope. It was tempting to add accounts, admin panels, or a moderation queue. We kept cutting back to the core loop — photo in, evidence out, mapped — because a focused, working demo beats a half-built platform.
What we learned
- Small, hedged, well-structured AI output is often more trustworthy — and more useful — than confident-sounding AI output. Being explicit about uncertainty turned out to be a feature, not a limitation.
- A strong visual identity does a lot of the "convince people this is real" work that extra functionality can't.
- Constraining scope early (no auth, no database, no admin panel) let us spend all our time polishing the one flow that actually matters: photo → report → map.
What's next for ECHO
- Persisting reports to a real backend so incidents are shared across users and devices, not just a single browser.
- Lightweight community verification (e.g. "confirm" / "resolved" flags) to build trust in reports over time.
- Clustering and trend detection on the map to surface recurring hotspots, not just individual incidents.
- Optional integration with local environmental authorities or reporting hotlines for high-severity incidents.
Built With
- css
- gpt-4o
- html
- javascript
- leaflet.js
- localstorage
- nextjs
- node.js
- openai
- react
- react-leaflet
- tailwindcss
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.