— Sistema di monitoraggio completo di rimozione del carbonio
17tons, Una startup innovativa ha investito nella piattaforma Metatons per potenziare la partecipazione delle imprese nella lotta contro il cambiamento climatico. La tecnologia utilizzata consente di misurare, monitorare e verificare i progetti di rimozione del carbonio.
Si richiede lo sviluppo della Dashboard di digital Monitoring, Reporting e Verification (dMRV), che permette l’accesso alle informazioni principali dei progetti di offsetting e insetting per la rimozione del carbonio. In particolare, il focus sarà sulla realizzazione del Front-end e sull’ottimizzazione dell’UI/UX della piattaforma.
Per la costruzione della web application abbiamo scelto NextJS come framework nella versione 14 che ci ha permesso di sperimentare App Router, il nuovo sistema di routing introdotto da vercel nel suo framework.
L'ottimo react-query di tanstack è invece la libreria che abbiamo scelto per la gestione dello stato basato su server. Grazie a funzionalità incluse come il caching automatico, background refetching, polling automatizzato ci ha permesso di risparmiare tempo e offrire al cliente un code base semplice ma allo stesso tempo potente e flessibile.
Per la costruzione della UI abbiamo invece optato per l'ottima libreria react-aria che rispetta gli standard ARIA consentendoci di essere pronti alle esigenze di accessibilità che sono per noi prioritari nei nostri progetti.
L'applicativo fa inoltre uso di mappe interattive per la visualizzazione di dati di monitoraggio e non solo. Per gestire questo aspetto la nostra scelta è andata su Mapbox, uno strumento molto potente che consente di creare mappe interattive altamente personalizzabili.
Il tutto è stato chiaramente creato usando Typescript di cui non riusciamo più a fare a meno nei nostri progetti.
Il progetto è iniziato con un mockup preliminare ricevuto dal cliente, che abbiamo esaminato per capire cosa funzionava bene e cosa poteva essere migliorato. Abbiamo creato un Design system semplice ed accessibile. Questo è stato il nostro obiettivo principale per tutto il progetto.
Il primo passo è stato definire i token di design, le unità fondamentali come colori, spaziature, tipografia e altri elementi chiave, sono state standardizzate per mantenere coerenza in tutto il progetto.
Abbiamo definito una palette di colori che unisce estetica e accessibilità. Ogni combinazione è stata testata per rispettare le linee guida WCAG (Web Content Accessibility Guidelines), assicurando che il design sia accessibile e utilizzabile da tutti, inclusi gli utenti con disabilità visive.
Uno degli obiettivi principali era creare un'interfaccia semplice ed efficace. Abbiamo progettato componenti facili da usare e navigare, mantenendo un design curato e intuitivo.
Progettazione orientata al desktop: il design system è stato pensato esclusivamente per l'esperienza desktop, senza prevedere la modalità responsive per tablet o dispositivi mobili. Questa scelta è stata dettata dalla natura professionale del prodotto, destinato a un utilizzo su schermi di grandi dimensioni. Concentrandoci su una sola piattaforma, siamo riusciti a ottimizzare l'esperienza utente, garantendo un'interfaccia altamente performante e coerente.
Questi sono alcuni strumenti e tecnologie, di cui siamo follemente innamorati, usati per realizzare questo prodotto