Wind Energy Utilization Dashboard: A Project to Learn Serverless Functions

Find it here

Introduction

The average person’s perception of the production factor of wind turbines is extremely exaggerated. I wanted to build a simple indicator in a couple of hours to be able to point to high-quality live data to dispel these beliefs. Mostly this was an excuse to learn about and implement serverless functions.

Objective

The page displays live wind energy utilization as a percentage of installed capacity. The color-coded background ranges from deep red for low utilization to deep green for high utilization. In fact this is probably overkill, as i’ve only ever seen it red.

Technologies and Learning Goals
  • HTML, CSS, JavaScript: The website is extremely simple.
  • Serverless Functions: The focus was to learn about serverless architecture. When the webpage is loaded, a serverless function is triggered to fetch live data.
How It Works

On page load, the JS calls a serverless function hosted on netlify, which itself calls the EnergyCharts API to get the necessary data. Then it converts it to a percentage of installed power and displays the absolute value and percentage.

sequenceDiagram participant W as Webpage participant S as Serverless Function participant A as EnergyCharts API W->>S: Invoke serverless function S->>A: Request energy data A-->>S: Provide energy data S->>W: Return data to browser
Deployment

Hosted on Netlify. Configuration is in netlify.toml.

Project Structure
.
├── app.js               ### Main JS for data fetch and display
├── index.html           ### Main HTML
├── netlify              ### Netlify configurations
│   └── functions
│       └── fetchEnergyData.js   ### Serverless function for data fetch
├── netlify.toml         ### Netlify deployment config
├── package.json         ### Dependencies and metadata
└── styles.css           ### Webpage styles
Acknowledgments
  • Energy Charts team for the wind energy data API.
  • Netlify for hosting and enabling serverless functions.
Conclusion

This quick project served two purposes: resolving a debate and offering a hands-on experience with serverless functions. The dashboard effectively visualizes live wind energy utilization data in Europe.