AquaQuest

Home dashboard — Explore water health around you
Community Map — Find waterbodies near you
Home dashboard — Explore water health around you
Site detail — Water quality trends & health snapshot
Wildlife breakdown — Biodiversity at a glance
Observation with One Health Insight — Water, human, ecosystem
Water Stories — Community feed
Comments — Threaded discussion with experts
Profile — Impact, badges & contributions
Badges — Gamified citizen science journey
Community Actions — Join cleanups & challenges
Challenge detail — 7-Day Observation Streak
Recent Observations — Community activity feed

Inspiration

Growing up in Cox's Bazar, Bangladesh — a coastal region where rivers, canals, beaches, and wetlands shape everyday life — I saw firsthand how local waterbodies were changing. Litter appearing after tourist weekends. Canals turning dark near old bridges. Fish disappearing from places where they used to be abundant.

At the same time, the people living around these waters were noticing these changes long before any formal monitoring system did. Fishermen knew when the water "smelled wrong." Students noticed plastic piling up. But there was no simple way for their everyday observations to become useful.

The OneAquaHealth IEEE Global Hackathon — focused on urban freshwater ecosystems, citizen science, and the One Health approach — felt like the right place to bridge that gap. The idea behind AquaQuest was simple: people who live around water are already observing it. The technology should just make those observations easier to record, share, and act on.

What it does

AquaQuest is a mobile-first Progressive Web App that turns freshwater citizen science into a guided, evidence-supported, community-driven experience.

The platform allows users to:

Explore waterbodies through a map and site directory (rivers, canals, beaches, wetlands, estuaries)
Observe water conditions using a 5-step guided workflow covering clarity, litter, smell, colour, and wildlife
Attach photo evidence to observations and reports
Report environmental concerns such as wastewater discharge, heavy litter, unusual colour, strong smell, blocked waterways, or dead fish
Understand findings through One Health Insight cards that connect water health → human health → ecosystem impact
Join community challenges like river cleanups, biodiversity watches, and observation streaks
Track impact through points, levels, badges, and streaks
Learn about freshwater ecosystems, biodiversity, water quality, and One Health
Share stories through a community feed with likes, threaded comments, and replies

The core flow is: Explore → Observe → Understand → Contribute → Act.

How we built it

AquaQuest is built entirely with lightweight, dependency-free web technologies so it can run reliably on any modern mobile device — including phones with limited storage and slow connections.

Tech stack:

HTML5, CSS3, Vanilla JavaScript (ES6+)
Leaflet.js — interactive community map
Chart.js — water quality trends and wildlife charts
Font Awesome — icons
Inter + Caveat — typography
LocalStorage API — persistence
Service Worker + Web App Manifest — PWA / offline support
Canvas Confetti — user feedback effects
jsPDF — data export

Architecture: A modular single-page application organized into:

Core (app, storage, mode, theme, toast)
Data (sites, challenges, learn topics)
Services (mock API layer simulating backend calls)
Features (observations, contributions, gamification, monitoring, social, notifications, navigation)
Pages (home, map, site detail, observe, feed, actions, reports, profile, etc.)
UI (drawer, onboarding, skeleton)

The whole prototype was built from scratch with no build tools, no frameworks, and no backend — using only a phone and Acode editor.

Challenges we ran into

1. Making citizen science feel simple. Environmental terminology easily intimidates non-experts. Finding the right balance between scientific accuracy and everyday language took multiple iterations — for example, replacing "turbidity" with "water clarity" and "eutrophication risk" with "excessive algae growth."

2. Building a complete app experience without a backend. A mock service layer was created to simulate backend-style responses (authentication, sites, observations, contributions), so the frontend talks to structured service functions rather than directly manipulating storage. This keeps the architecture ready for a real backend later.

3. PWA + offline-first on mobile. Service worker caching strategies had to be tuned so that static assets, map tiles, and CDN libraries were available offline while still fetching fresh API data when online (hybrid caching — cache-first for static assets, network-first for APIs).

4. Single-file-per-page discipline on a mobile-only workflow. Developing entirely on an Android phone with Acode meant every file had to stay organized and readable without the aid of desktop tooling. This forced clean modular decisions early on.

5. Photo handling in a browser. Handling user-selected photos required client-side compression (canvas-based resizing) to keep LocalStorage size manageable and prevent app slowdowns on low-end devices.

6. Navigation consistency. Achieving expected back-button behavior across complex flows (sites → site detail → back) required a custom in-app history stack to prevent navigation loops and duplicate entries.

7. Keeping gamification meaningful, not gimmicky. Points, badges, streaks, and levels were deliberately designed to reinforce real environmental participation — not just maximize engagement metrics.

Accomplishments that we're proud of

Building a fully working PWA with 25+ screens and complete end-to-end flows — entirely from a phone
Creating a guided observation workflow that feels approachable even for someone with zero environmental science training
Designing the One Health Insight Card, which automatically explains the connection between water conditions, human health, and ecosystem impact — a feature rarely found in citizen science apps
Implementing structured community challenges with contribution tracking, evidence requirements, and progress visualization
Achieving smooth offline-first behavior with proper service worker caching
Building a rich demo experience with seeded community data so judges can immediately feel the social layer
Making the entire app installable as a home-screen app on mobile
Delivering a modular, well-organized codebase that can be extended toward a production backend without rewriting the UI

What we learned

Accessibility is a design decision, not a checklist. Simplifying language, reducing cognitive load, and guiding users step by step matters more than adding features.
Community features need real feedback loops. A report that disappears without confirmation feels broken. Users need to see their observations acknowledged, confirmed, and acted upon.
Gamification works best when it mirrors real impact. Points, badges, and streaks felt meaningful because they represented actual environmental participation.
A mock service layer pays off. Separating the UI from data operations makes the eventual transition to a real backend dramatically easier.
PWA is underrated. With just HTML, CSS, and JavaScript, a mobile app experience can be delivered without app store distribution or heavy frameworks.
One Health is a powerful framing. Connecting water quality to human and ecosystem health gives users a reason to care beyond "the water looks dirty."
Constraint drives creativity. Building on a phone with limited tooling forced simplicity, clarity, and clean architecture.

What's next for AquaQuest

The prototype demonstrates the first stage of a much larger vision. Planned directions include:

1. Production backend Replace LocalStorage with a secure cloud database and enable real multi-user synchronization.

2. Verified environmental data Integrate official water quality datasets and real-time sensor data (temperature, pH, turbidity) to complement citizen observations.

3. AI-supported observation validation Introduce smart checks to detect inconsistencies, suggest similar observations, and help users refine their submissions.

4. Researcher and municipal dashboards Provide aggregated data views, trends, and site-level analytics for researchers, NGOs, and local government.

5. Early warning system Use aggregated signals across sites and time to detect emerging environmental risks before they escalate.

6. Expanded One Health analytics Deepen the connection between water quality, biodiversity, animal health, and human well-being indicators.

7. Multi-language support Add Bangla and other regional languages to make AquaQuest accessible to more local communities.

8. Interoperability Align data structures with environmental and health data standards (such as FHIR) to enable cross-platform integration.

9. Community growth Partner with schools, fishing communities, and local NGOs to onboard real citizen scientists and start collecting the first real-world datasets.

10. Gamification expansion Introduce seasonal challenges, team-based participation, and community leaderboards to sustain long-term engagement.

The long-term goal is to turn AquaQuest into a trusted citizen science platform where everyday observations — from a fisherman in Cox's Bazar to a student in Dhaka — contribute to a shared understanding of freshwater ecosystem health across Bangladesh and beyond.