Clean Up The Beach

Inspiration

Marine litter is human-created waste that has been discharged into the coastal or marine environment. Most of it is plastic, and it is one of the most pressing global environmental challenges impacting the planet.

Marine litter is not only ugly – it can harm ocean ecosystems, wildlife, and humans. The amount of plastic waste entering the ocean from land each year exceeds 4.8 million tons. And because plastic takes a long time to degrade, the issue only multiplies as the litter increases.

One way coastal communities respond to this challenge is through the civic environmental stewardship practice of volunteer beach cleanups. Beach cleanups can reduce litter, protect our ocean, and raise awareness about litter and plastic pollution.

What it does

I created a website to raise awareness, enable people to organize beach cleanups, and contact organizations working to make this happen at a global scale.

How we built it

We used HTML, JavaScript, and CSS to build the website. Leaflet and openstreetmap were used for the map, Axios for API calls, and Google Cloud's geolocation API to convert addresses to lat/lon coordinates to place markers on map. Three.js and Vite.js were used for the game.

Challenges we ran into

Learning front end and CSS animations and having them coordinate with one another in terms of timing and interactivity and how it shows up was challenging! While it left less time to work on more functionality, but I thought it important to learn how to use website design to tell a story.

There were also files too big for github to take in for the 3D graphic assets, so I had to zip the folder.

Accomplishments that we're proud of

Created a website and thought about how to design one where website design aids the message and helps tell a story. Also used geolocation api, leaflet, and openstreetmap for the first time!!!

What we learned

Lots of animation in 2d and 3d, connecting front end to a map, and in retrospect how to structure website better.

What's next for Clean Up The Beach

Porting it to node to have a better back end to facilitate organizing events! Deploying it so that anyone can navigate the entire website and play the game—

Built With

• axios
• css3
• geolocation-api
• html5
• javascript
• leaflet.js
• openstreetmap
• three
• vite