Circular Economy Dashboard – for sustainable SMEs
The Circular Economy Dashboard is an interactive tool designed for small and medium-sized Italian businesses that want to measure, understand, and improve their environmental impact in line with the European Green Deal and the PNRR calls for proposals.
Through a customized simulation, the application calculates a circularity score based on three key indicators—recycled material, waste recycling rate, and renewable energy—comparing it with national (ISPRA) and European (Eurostat) benchmarks.
The system also provides a personalized improvement plan and estimates the tons of CO₂ avoided, making the concept of a circular economy concrete, measurable, and accessible.
Technologies used
- Frontend: JavaScript (ES6+), Vue.js 3 (Composition API), D3.js for data visualization (radar chart and bar benchmark), GSAP for semantic and high-performance animations
- Graphics: Dynamic SVG generated client-side, modern CSS with a responsive-first approach
- Backend: Node.js on Ubuntu (DigitalOcean), Express, Puppeteer for dynamic PDF report generation
- Integrations: Dynamic QR Code, CSV export, benchmark based on official data ISPRA and Eurostat
- Deploy & Hosting: Cloud infrastructure on DigitalOcean, reverse proxy with Nginx, TLS certificates issued by Let's Encrypt
❌ No real-time technologies such as WebSocket or MQTT, nor PHP were used — the project is based on stateless RESTful calls and a lightweight full-stack JavaScript stack, consistent with the goal of keeping the application simple, secure, and easily deployable.
Design Approach
The application was born as a user-oriented functional prototype, with a strong focus on:
- Clear separation between logic, state, and presentation: scoring, state management, and graphical display are independent modules.
- Reusable componentization: each element (slider, graph, roadmap) is autonomous and potentially reusable in other contexts.
- Intentional UX: contextual visual feedback, explanatory tooltips, wait messages during asynchronous operations (e.g., PDF generation), and a fully responsive layout.
- Contextualized data: each value is accompanied by clear instructions on how to find it in reality. company (invoices, waste records, bills)
Objectives achieved
- ✅ Provide a professional demonstration tool, useful for consultants, public bodies, or companies undergoing ecological transition
- ✅ Enhance official Italian and European data in an intuitive and visually effective interface
- ✅ Demonstrate how an application without complex frameworks can offer a rich, high-performance, and scalable user experience
- ✅ Align with the PNRR principles and the ESG reporting needs of SMEs
Hosting and Distribution
The application is distributed in two components:
- Static Frontend: hosted on
livedata.itas a single HTML file, with Vue.js, D3, and GSAP loaded from a CDN — zero builds, maximum portability - Dynamic Backend: run on an Ubuntu Droplet on DigitalOcean, with Node.js for calculating scores and generating professional PDF reports (complete with QR code, legal disclaimer, and customized roadmap)
The entire system is protected by end-to-end HTTPS, with a valid certificate issued by Let's Encrypt.
Future Perspectives
The dashboard is designed to be extended with:
- Multilingual support (IT/EN)
- Integration with official APIs (e.g., SDI for electronic invoicing, ISPRA Open Data in real time)
- Advanced Excel export and direct sharing via email
- Embeddable version for integration into institutional portals or consulting platforms
This project demonstrates how simplicity, contextualized data, and intentional UX can create high-value digital tools, even in complex areas like industrial sustainability.
You don't need hyper-complex architectures to innovate: just start from a real need, use the right technologies, and design for the user, not for the technology.
➡ Try it: https://livedata.it/simulazioni/circular-dashboard.html