When coming up with an idea after the theme was released, we realized that a huge part of our environment that is being affected every day is marine life. With many different factors harming the creatures of the water, we decided that the people who are curious about what is specifically malnourished the aquatic life and where to find resources to help out can visit Serene Marine to help restore the peace.

What it does

It's an interactive website with our homepage being a globe where users can click on major bodies of water to get informed on sea pollution, carbon intake, and the animals affected in those areas. Along with that, there are professional resources attached that the users can explore to actively help marine life.

// you can add the links here if you want.

How we built it

When building this project on the main page, the frontend utilized three.js to create a globe and the coordinates of different bodies of water. For the webpages of the bodies of water, we used material-UI and React.js to create each webpage. We used Adobe Illustrator to design the logo of our website. The backend used Node.js and Express to get APIs.

Challenges we ran into

The main challenge that we ran into is trying to find an API that provides all the necessary information regarding the bodies of water. There was a lack of data that we could find online which caused us to hard code the data on our frontend. When designing parts of the webpage, we used different photo-editing applications we were not too familiar with and had to do quite some research in perfecting certain aspects of our website.

Accomplishments that we're proud of

We worked as a team and grew with each other by learning new technologies and finishing our project that serves the purpose of helping the environment.

What we learned

We learned a lot about marine life and how endangered certain species are becoming because of sea pollution and carbon intake. We learned how to work with different applications we were unfamiliar with and how to create moveable objects like our globe for our homepage. We learned how to work as a team in a high-paced environment and how to overcome technical challenges.

What's Next for Serene Marine

Our goal for the future is to further spread awareness about the environmental problems within the Oceans. To achieve this goal we can find anAPI that would help us get different ocean data and real-time updates on them to integrate into our frontend. We would also want to improve the Ui of the website.

Built With

Share this project: