2024 · Full-Stack / Web
EcoScout — Community Litter Mapping App
Click a map spot, store it in SQLite, watch it appear on the dashboard.
Litter Reporting Map · React + SQLite
The problem
Cleanup crews don't know where litter is. They re-clean the easy spots and miss the rest, because reports live scattered across threads nobody can query. The clean-up side needed the same map the auto-detection side has — a place where a person (or the drone pipeline) drops a point.
The constraint
It had to ship end-to-end in a hackathon and stay runnable without a cloud operator: a real database, a real API, and a map a non-technical organizer can use instantly.
What I built
An Express server wraps a local SQLite database with three routes: GET /markers returns the litter list, POST /ADD inserts a report from lat/lng plus an "info" description, POST /REMOVE deletes a cleaned site (the rare web CRUD thing where remove is a feature, not a chore). The React + Vite client embeds a Google Maps JS canvas: clicking posts a marker via /ADD, and a dashboard table renders every report with a 60-second auto-refresh so the map and the data stay in sync without manual reloads.
The outcome
A working litter-reporting loop — click the map, persist to SQL, see it in the list — submitted as the EcoScout DoraHacks build, and the data pattern that later grew into the Postgres-backed litter map of the drone system.