Dashboard The Ocean Cleanup

👨🏼‍💼 Opdracht

Voor de opdrachtgever GRRR heb ik een concept mogen ontwerpen voor een dashboard van The Ocean Cleanup. De bedoeling was om de data van de verschillende Interceptors en hoeveelheid opgeruimd plastic zo overzichtelijk mogelijk weer te geven.

📚Inhoudsopgave

• 👨🏼‍💼 Opdracht
• 👩🏽‍💻 Gebruik
• 🛠Installatie
• 📱 Kenmerken en uitleg Node, Express en EJS

👩🏽‍💻 Gebruik van website

Vanuit de website van The Ocean Cleanup kom je terecht bij het dashboard. Hierop is een wereldkaart te zien met vde verschillende Interceptors, het aantal opgeruimd plastic tot nu toe, de system statuses en er is een mogelijkheid tot het delen van het dashboard of te navigeren naar verschillende links. Ook is er een darkmode beschikbaar.

🛠Installatie

Clone deze repository.

Open de repository in je code-editor

Open de terminal en typ 'npm install'

Door gebruik te maken van 'npm start', krijg je een lokale link waar je de code live kunt bekijken

Om je project online te zetten, kun je gebruik maken van 'Cyclic'

📱 Kenmerken

Dit project is gemaakt met Node, Express, EJS. Ik heb gebruik gemaakt van d3.js om de kaart te implementeren waarop te zien is waar en welke Interceptors op dit moment gebruikt worden. Per Interceptor kan je zien hoeveel afval er is opgeruimd in totaal en in de laatste 30 dagen.

Tools

• 🖥️ Visual Studio Code
• 🖥️ Cyclic

Gebruikte technieken

• 📟 HTML
• 🎨 CSS
• 🕹️ JavaScript
• 🚃 Express
• 🗺 D3

Licentie

This work is licensed under GNU GPLv3.