Coral Lookout

The way to save.

Comment

Inspiration

Coral reefs are dying faster than scientists can monitor them. We kept noticing the same gap: students and schools want to help, but most tools either need expensive equipment or stop at awareness — posters, essays, and slides that never become shared, measurable data.

We asked a simple question: What if a phone photo could become a real reef observation? That idea became Coral Lookout — a free, student-driven platform where curiosity turns into scans, map pins, gallery posts, and classroom impact. Our mission is to build the world’s largest student-driven coral reef monitoring and conservation network: free for students, useful for teachers, and designed so young people don’t just learn about reefs — they help protect them.

What it does

Coral Lookout connects one upload to a full conservation loop:

  1. Scan — Upload a reef photo and run our coral-saving pipeline: validate the image, classify reef health (healthy → severe damage), surface confidence and damage zones, and get educational recommendations.
  2. Publish — Share results to a community Reef Gallery with posts, comments, upvotes, and creator leaderboards (backed by Supabase when configured).
  3. Pin — Drop observations on a live global map alongside research / NOAA-style hotspots.
  4. Learn — Complete Reef Academy lessons, quizzes, and certificates.
  5. Compete — Earn points, badges, and streaks; join school chapters with join codes, class leaderboards, and a teacher dashboard.

Teachers get a School Chapter tier (demo mode works without Stripe) for roster management, CSV export, and classroom competition. Students get the core experience free.

How we built it

We built Coral Lookout as a Next.js 16 (App Router) + React 19 app with TypeScript and Tailwind CSS 4, deployed toward Vercel.

  • AI pipeline — Server-side orchestrator (preprocess → validate → classify → localize → conserve), with optional Weights & Biases tracing. Reef validation can use local/Hugging Face CLIP (or Gemini / OpenAI / Ollama when keys are set); health classification today uses image color heuristics (whiteness, colorfulness, brightness, green ratio) so demos stay fast and low-cost. The UI already shows confidence, zones, and recommendations — ready to swap in a stronger model later.
  • Community & schools — Supabase (PostgreSQL + Storage) for gallery posts, comments, upvotes, scans, and school chapters; Stripe for the optional $49/mo School Chapter subscription.
  • Map & UX — Leaflet / react-leaflet for the global reef map; Framer Motion for motion; gamification for points, badges, challenges, and streaks.
  • Judge experience — In-app /pitch page (hackathon mode) with problem / solution / impact and a 3-minute demo path matching the README.

Challenges we ran into

  • Honest AI vs. flashy AI — We wanted an instant scanner without API costs or brittle cloud dependency. That meant shipping a real multi-step pipeline while being clear that health scoring is still heuristic-based, with vision models focused on “is this a reef?” validation and a path to production ML.
  • Cloud features without blocking the demo — Gallery, auth, and school data need Supabase; Stripe is optional. We invested in demo modes (SCHOOL_DEMO_MODE, offline-friendly scanner/map/academy) so judges can evaluate the core loop after npm install && npm run dev.
  • One product, many personas — Students, teachers, and hackathon judges need different entry points. Wiring scan → gallery → map → class into one coherent flow (plus /pitch and README scripts) took more product design than a single feature page.
  • Deploy env discipline — Next.js NEXT_PUBLIC_* vars bake in at build time; getting Supabase auth/gallery right on Vercel meant careful env setup and redeploys (documented in DEPLOY.md).

Accomplishments that we're proud of

  • A full multi-page platform (15+ routes) with an end-to-end scan → gallery → map → leaderboard loop.
  • A judge-ready story: README demo path, hackathon /pitch page, and clear “what works without setup” table.
  • School chapters with join codes, teacher dashboard, and freemium model (free for students / School Chapter for teachers).
  • Reef Academy, challenges, compete/rankings, research dashboard, and community/forum surfaces — education and action in one product.
  • Being transparent about the scanner: accessible analysis today, architecture ready for Teachable Machine, Hugging Face, or a custom CNN tomorrow.

What we learned

  • Climate + education products work best when young people can contribute data together, not only consume content.
  • Shipping a usable loop beats a perfect model that never leaves the notebook — confidence scores and damage zones in the UI already teach students how to read reef health.
  • Teachers need classroom-ready tools (join codes, leaderboards, exports) as much as students need a cool scanner.
  • Clear docs and an honest AI note help judges (and teammates) evaluate the real product faster.

What's next for Coral Lookout

  • Supabase Auth for verified student accounts at scale.
  • Production ML for reef health (Teachable Machine, Hugging Face, or a custom CNN) behind the same pipeline UI.
  • Live ocean temperature APIs and a mobile-friendly experience.
  • Global inter-school competitions and deeper Research & NGO partnerships for shared data programs.

Built With

Share this project:

Updates

Submission history