Coral Know

Many marine biologists and researchers face a significant challenge in studying coral reefs, where important ecological information is dispersed across multiple datasets, making it difficult to compare information for a specific location. Coral Know has provided a solution to the challenge by offering an interactive map where users can click anywhere in the ocean, enabling them to locate the nearest coral reef, along with other important environmental and health information.

Coral Know identifies the closest coral reef to your selected map point using the haversine formula. It then generates key ecological information about that coral reef, including Reef ID, coordinates, Health Score (calculated from the bleaching index, temperature, and pollution index), Protection Status, Reef Type, Bleaching Index, Marine Life Health (factoring in species count, dissolved oxygen, and salinity), Acidity, Salinity, Dissolved Oxygen, and Pollution Index.

I first started with developing the backend, since I knew I was under a heavy time constraint, I used Supabase to handle all of the important data by creating Postgres SQL tables for different fish species, Reef IDS, health scores, etc. After finding my data and creating tables, I worked on developing the frontend, which I used multiple languages for. When I started, I hardly knew any of them. After looking at short tutorials, open-source code, and other people’s projects, I got to work. I used JavaScript for the supabaseClient, TypeScript for the main App code, HTML for the index, and CSS for styling. For the map, I used leaflet.js, which I learned by looking at open-source code. For deploying the code, I used Vercel, and for version control, I used git.

While developing Coral Know, we ran into multiple challenges; our biggest one was being able to get the frontend and backend to connect, as well as learning how to program a frontend for my tech stack. I knew I was on a heavy time constraint, so after an exhausting all-nighter, I was finally finished analyzing open-source code and watching short tutorial videos, which allowed me to begin programming my frontend.

Coral Know is able to generate 15+ pieces of information that are key for analyzing coral reefs and has an easily accessible User Interface.

From creating Coral Know, I learned how to get different pieces of a tech stack to work together, how to calculate distances on earth using the haversine formula, and how new programming languages such as leaf.js work.

While Coral Know is advertised for Marine Biologists and researchers I want to expand it for educational purposes, however the information about the coral reefs may be difficult for someone to understand which is I why in the future I hope to implement an AI summary that describes what each piece of information and allows for the user to talk to the AI to ask any clarifying questions. In order to implement this feature, I will be using an OpenAI API key.

Built With

• css
• html
• javascript
• leaflet.js
• supabase
• typescript
• vercel