• 

  Home

• 

  Analyzer

• 

  Conservation Actions

• 

  Impact Tracker

• 

  Real Data Viewer

• 

  Database

About Ocean Vision AI

Inspiration

Ocean life is disappearing at an alarming pace, yet 80% of our oceans remain unmapped. I wanted to bring ocean conservation mainstream by combining AI technology with real scientific facts.

What it does

Ocean Vision AI is an end-to-end ocean conservation platform that:

• Tracks marine species from photos using Google Vision AI
• Maps ocean ecosystems with live data from iNaturalist API
• Takes into consideration environmental impact and suggests conservation actions
• Web-surfes through a curated marine database of rich species information

How I built it

• Frontend: React + TypeScript with Tailwind CSS for responsive UI
• AI Integration: Google Vision AI for species identification
• APIs: iNaturalist for real marine observations, custom marine database
• Design: Ocean-themed UI with animations and interactives
• Data: Integrated several scientific databases (FishBase, GBIF, WoRMS)

Challenges

• Integration of multiple APIs with different data structures
• Designing accurate species ID questions for AI
• Building a responsive design that works flawlessly on all devices
• Handling API rate limits and fallback data with sophistication

What I learned

• Advanced React patterns with TypeScript
• Best practices in API integration and error handling
• Creating interactive UI animations with CSS and Tailwind
• Basic concepts in marine biology and conservation through research

Impact

Ocean Vision AI fills the divide between scientific ocean data and civic conservation activity, taking ocean conservation to everyone with a smartphone camera.

Built With

• eslint
• fishbase
• gbif
• google-vision
• inaturalist
• lucide
• postcss
• react
• react-hook-form
• react-query
• recharts
• shadcn
• sonner
• tailwind
• typescript
• vite
• worms