— Advanced Carbon Removal Monitoring System
17tons, an innovative startup, has invested in the Metatons platform to enhance corporate involvement in the fight against climate change. The technology used allows the measurement, monitoring, and verification of carbon removal projects.
The development of a Digital Monitoring, Reporting, and Verification (dMRV) Dashboard is required, providing access to key information on carbon removal offsetting and insetting projects. In particular, the focus will be on front-end development and the optimization of the platform's UI/UX.
To build the web application, we chose NextJS as our framework, specifically version 14, which allowed us to experiment with App Router, the new routing system introduced by Vercel in its framework.
For server-based state management, we selected tanstack's excellent react-query library. Thanks to included features like automatic caching, background refetching, and automated polling, it enabled us to save time and provide the client with a codebase that is both simple and powerful, as well as flexible.
For the UI development, we opted for the outstanding react-aria library, which adheres to ARIA standards, allowing us to meet accessibility requirements, a priority in all our projects.
The application also utilizes interactive maps for visualizing monitoring data and more. To handle this aspect, we chose Mapbox, a very powerful tool that enables the creation of highly customizable interactive maps.
Everything was clearly developed using Typescript, which has become indispensable in our projects.
The project began with a preliminary mockup received from the client, which we examined to understand what worked well and what could be improved.
We created a simple and accessible Design System. This was our primary objective throughout the project.
The first step was to define the design tokens, the fundamental units such as colors, spacing, typography, and other key elements, which were standardized to maintain consistency throughout the project.
We defined a color palette that combines aesthetics and accessibility. Each combination was tested to comply with the WCAG (Web Content Accessibility Guidelines), ensuring that the design is accessible and usable by everyone, including users with visual impairments.
One of the main objectives was to create a simple and effective interface. We designed components that are easy to use and navigate, while maintaining a refined and intuitive design.
Desktop-oriented design: The design system was conceived exclusively for the desktop experience, without planning for responsive modes for tablets or mobile devices. This choice was dictated by the professional nature of the product, intended for use on large screens. By focusing on a single platform, we were able to optimize the user experience, ensuring a highly performant and consistent interface.
These are some of the tools and technologies we are madly in love with, which were used to create this product