Inspiration
Urban waterways are fragile ecosystems, but one major challenge is keeping citizen-science data fresh. Volunteers may check a stream once, but often do not return to the same location. This makes it difficult to track changes in stream health over time.
We wanted to solve this by making repeat monitoring more engaging and purposeful. This inspired us to build StreamKeeper, a platform that turns stream monitoring into a set of meaningful quests and encourages volunteers to become long-term stream stewards.
What We Built
StreamKeeper uses a Freshness Map and Dynamic Quest Board to prioritize stream locations that need a new check. Each location receives a priority based on factors such as how long it has been since the last check, previous stream condition, neighborhood data gaps, and volunteer proximity.
Volunteers can adopt a stream and complete a simple 5-question field check. After submitting an observation, the stream's freshness status is updated and the volunteer's revisit streak and community coverage progress can increase.
How We Built It
We built StreamKeeper as a mobile-first web application using React, Vite, Tailwind CSS, Leaflet, Recharts, and localStorage. The project uses a simple client-side architecture without a backend database.
We divided the project into separate features for the map, quest board, check flow, dashboard, streaks, and data management. This allowed each team member to work independently before integrating everything into one complete flow.
Challenges We Faced
One of our biggest challenges was designing a priority system that would reward meaningful revisits rather than simply increasing the number of observations. We also had to keep the application simple enough to build within the hackathon while still demonstrating a complete user journey.
Another challenge was working with limited real-world data. Where official open data was unavailable, we used clearly labelled synthetic data for demonstration purposes rather than presenting it as real observations.
What We Learned
Through this project, we learned how to design a gamified citizen-science experience, work with map-based data, build reusable React components, manage client-side data with localStorage, and integrate multiple features developed by different team members.
Most importantly, we learned that good gamification should encourage the right behavior. For StreamKeeper, that means returning to the streams that need monitoring most, not simply collecting more checks.
Built With
- css3
- git
- github
- html5
- javascript
- leaflet.js
- localstorage
- react
- react-leaflet
- recharts
- tailwindcss
- vite
Log in or sign up for Devpost to join the conversation.