-
-
Screenshot of homepage
-
Our custom-made Google My Map
-
Contact Form
-
Our What You Can Do page w/ links and pictures
This is our team’s first hackathon, and we knew we wanted our project to encompass what each team member knew about coding, as well as new programming skills we would learn during this hackathon. When the topics were released, we were scrambling for ideas. Some of our ideas included a medical symptom checker app, an app that rates refugee camps based on the human right violations committed there, and a website that would allow teachers to rate their classrooms. After discussing these ideas, along with a few others, we decided instead to create a web app to encourage coral reef preservation. Our app shows predicted future trends for reefs around the world as well as provides resources to people who want to help stop coral reef destruction. We chose this topic because even though there isn’t a lot of awareness about this issue, it is just as prevalent as other current and more well-known events like Covid-19 and the BLM movement. Despite our team’s inexperience with web development, the magnitude of this issue drove our development.
When we started our website, we knew we wanted to embed our own custom Google Map. This map would highlight reefs all over the world and rank them based on a formula that takes into account the average increased temperature in centigrade and the average change in the aragonite saturation of the ocean, both of which are vital to keeping the ocean's PH stable. To find this data, we encountered our first challenge. We scoured the web conducting research on how different conditions affected the populations of reefs. Our research convinced us to use two criteria when determining how endangered reefs are in the future: the average increase in temperatures(C) from 1951-1978 and 2010-2019, and the other on the average change in the aragonite saturation from 1880-2015. We then created our own formula to score each reef region all over the world, using their average temperature and aragonite increases. After doing this, we color-coded the zones by their score and added a key describing our zones to the website. Making the key on the website was challenging since everything had to be perfectly aligned, but we solved the issue by using a table. After making the table, we made the About Us page. It talks about our team’s background and the initiative behind Save the Reef. We then made the What You Can Do page, which has an infographic that shows things that you can do to save reefs and has GoFundMe pages and petitions that support the reefs. After that, we created the Contact Us page, which uses Bootstrap to provide a way to contact us. Using Bootstrap was a challenge since none of us had used it before. After finishing the Bootstrap, we added a scrolling marquee along with other features to make the website more user-friendly!
Log in or sign up for Devpost to join the conversation.