Ocean Guardian - Marine Conservation Platform

A gamified web app that turns marine conservation into a citizen-science game using real-time geospatial mapping.

Comment

Inspiration

The ocean covers over 70% of our planet, yet it is facing an unprecedented crisis. Every year, 19 to 23 million tonnes of plastic waste leak into aquatic ecosystems. If we maintain business as usual, researchers estimate that plastic accumulation in our oceans will reach a staggering 600 million metric tons by 2040. Furthermore, without drastic action, we could see a 70–90% decrease in live coral reefs by 2050.

Because the ocean is so vast, scientists simply cannot be everywhere at once to monitor these rapid ecological changes. They need more eyes and ears on the ground—which is where citizen scientists come in. We were inspired to build OceanGuardian to solve two major pain points in marine citizen science: low volunteer retention and lack of connectivity in remote coastal areas. We wanted to create the "Pokémon GO" of ocean conservation, using gamification to make data collection addictive, while utilizing edge-computing so it works completely offline.

What it does

Ocean Guardian is a Web Application that transforms marine conservation into an engaging, gamified citizen-science experience. Its core functionality revolves around crowdsourcing critical ocean health data while remaining completely functional in remote, low-bandwidth environments.

Here are the primary features:

  • Interactive Sighting Map: Users can log and view real-time, GPS-tagged observations of shoreline garbage, floating debris (like ghost nets), wildlife, and coral bleaching. The map dynamically clusters thousands of data points to ensure smooth rendering on mobile devices.
  • Debris & Coral Reporting: A streamlined field-reporting tool that automatically captures GPS coordinates and compresses high-resolution photos to under 1MB entirely on the user's device before uploading, saving crucial bandwidth.
  • Gamification Engine: To keep volunteers engaged, the app acts like the "Pokémon GO of Ocean Conservation". Every valid submission earns Experience Points (XP) and helps users level up, climbing leaderboards and unlocking advanced platform features based on their reputation score.
  • Community & Research Tools: Users can organize localized cleanup missions and coordinate via live chat, while scientists and NGOs can export the crowdsourced data as CSV or GeoJSON files to generate grant-ready environmental reports.

How we built it

Because we built this for the Avalon Vibe hackathon, we embraced the "vibe coding" movement—shifting our role from writing syntax line-by-line to acting as high-level systems architects guiding AI agents. We utilized AI coding assistants and strictly adhered to a "Skeleton Architecture" approach.

1st version: Initially created with Mocha, used 80 credits out of the 500 sponsored credits, due to project size limitation of free tier account I downloaded the code and continue the project with Antigravity. Uploaded to Github and hosted it with Cloudflare.

2nd version: Fully created with Creao.ai, I use significant amount of credits to test the capability of Creao.

To prevent the AI from generating unstable code, we used a "vertical slice" implementation method. Instead of asking the AI to build the whole app at once, we prompted it to build in full-stack modules.

  • Frontend: We used React, Vite, and Tailwind CSS
  • Mapping: We integrated react-leaflet with algorithmic clustering to render thousands of data points without locking the mobile thread.
  • Backend: We used Turso and Cloudflare Workers for secure, real-time data syncing.
  • Gamification Math: We leveraged LaTeX in our documentation to outline our core Leveling algorithm, which the AI implemented in the backend via PostgreSQL Remote

Challenges we ran into

When utilizing AI for rapid development, the biggest challenge is "hallucination" and the AI's lack of architectural intuition.

  • Security Vulnerabilities: The AI consistently tried to calculate Experience Points (XP) on the client side (React). We had to aggressively prompt the AI to move this logic to a secure Turso Database Function to prevent malicious users from hacking their XP scores.
  • Data Density: Rendering 10,000 markers crashed the mobile browser DOM. We had to specifically instruct the AI to wrap our map data in a MarkerClusterGroup to optimize rendering.

Accomplishments that we're proud of

  • Mastering AI-Assisted Architecture: We successfully utilized "vibe coding" to build a complex, production-ready application. Instead of getting bogged down in syntax, we acted as systems architects, successfully guiding AI agents to implement a robust vertical-slice architecture.
  • High-Density Map Rendering: We successfully optimized our interactive map to mathematically cluster and render thousands of environmental data points smoothly on mobile devices without crashing the browser's main thread.

What we learned

We learned that effective vibe coding is about strict, deterministic constraints. You cannot simply tell an AI "make a cool app." You have to provide a rigid framework—specifying exact libraries, positive constraints, and database schemas. By strictly controlling the architectural boundaries, we were able to use AI to achieve massive productivity gains and build a highly complex, production-ready citizen science tool in a fraction of the traditional development time.

What's next for Ocean Guardian - Marine Conservation Platform

  • AI-Powered Image Analysis: We plan to integrate computer vision models that can automatically analyze user-submitted photos to monitor coral health, detect the severity of bleaching events, and categorize floating debris without manual input.
  • Advanced Community Moderation: We will fully roll out the reputation score system (scaling from 0 to 1000). Users who consistently submit high-quality, verified data and maintain a "plastic-free streak" will earn scores over 50, granting them moderator privileges to approve other users' sightings and ensure data integrity.
  • Global Database Integrations: We want to expand our scientific export tools. The goal is to allow the CSV and GeoJSON telemetry generated by our citizen scientists to be automatically pipelined into the databases of major NGOs and university researchers to produce grant-ready reports.
  • Sponsored Cleanup Missions: We plan to scale the real-time WebSocket "Cleanup Missions" feature, allowing local coastal communities, tourist dive operators, and conservation groups to sponsor and gamify their own localized beach and reef cleanup events.

Built With

Share this project:

Updates