Inspiration

In 2019, an American explorer found a plastic bag on the bottom of the Mariana Trench. That's right, the deepest point on the ocean floor has trash in itβ€” like the kind you would find on the side of the road.

What it does

Bald Johns Deep Sea Conservation educates users on how pollution affects life in the deep sea, while encouraging them to submit images of themselves picking up trash to continue learning more.

How we built it

We built the app using Next.js with the App Router, backed by a Neon PostgreSQL database that stores our deep-sea trash catalog β€” 15 real pollutants mapped to their actual ocean depths, each with verified environmental impact facts. The frontend uses Framer Motion to create a scroll-driven dive experience where depth on the page literally equals meters underwater. Image verification is handled through a server-side proxy to Human Delta Services' computer vision API, which validates user-submitted photos of real-world trash. Assets are stored and served via Vercel Blob, and the whole app is deployed on Vercel.

Challenges we ran into

We had some trouble displaying images of marine animals in the background. We also had trouble getting the computer vision to work and making sure it was accurate. Teamwork was also an issue, as we had no idea how to split up the work at first.

Accomplishments that we're proud of

We're proud that the core gameplay loop actually works end-to-end: a user scrolls, discovers a pollutant at its real ocean depth, scans real-world trash to verify it, and unlocks the next zone. The depth-locked progression system and the dynamic ocean color gradient came together better than we expected, and the educational content is genuinely accurate and impactful.

What we learned

We learned how to integrate a third-party computer vision API into a Next.js server route, manage Vercel Blob storage for user-uploaded assets, and keep a relational database schema clean under time pressure. We also learned a lot about just how pervasive deep-sea pollution actually is β€” microplastics at 10,890 meters was a fact none of us knew before this project.

What's next for Bald Johns Deep Sea Conservation

We learned how to integrate a third-party computer vision API into a Next.js server route, manage Vercel Blob storage for user-uploaded assets, and keep a relational database schema clean under time pressure. We also learned a lot about just how pervasive deep-sea pollution actually is β€” microplastics at 10,890 meters was a fact none of us knew before this project.

Built With

Share this project:

Updates