The Ocean Cleanup Dashboard

About & Our Project 📖

The Ocean Cleanup is an organization with the goal of making the ocean plastic-free. They do this by deploying interceptors in the ocean and at river mouths. These interceptors catch plastic waste. The Ocean Cleanup wants to inform people about what they are doing. Therefore, our project was to create a dashboard for The Ocean Cleanup that provides information about these interceptors. This assignment was created for students at the Frontend Design & Development program at HVA.

Languages, Frameworks & Tools 🛠️

Our project is build with the following technologies tools and tech stack:

• HTML
• CSS
• JavaScript
• Svelte
• Sveltekit
• HighCharts
• Node.js
• Mapbox
• Hygraph

Instalation 🎛️

Clone this repository to your code editor.

Open the terminal and use the following commands.

npm install

npm install graphql-request graphql

npm install highcharts

npm install mapbox

npm install mapbox-gl

Keep in mind if you want to continue working with highcharts you will need to request a license.

You can request one here: Educational License - Highcharts Blog | Highcharts

The use of this dashboard 💻

This dashboard is intended for anyone interested in The Ocean Cleanup and can be used to view information about the interceptors, such as the amount of waste an interceptor has removed from the water.

Sources 📻

API & Hygraph connection:

• https://kit.svelte.dev/docs/hooks#server-hooks

License

This project is licensed under the terms of the MIT license.