← Back to Home

Global Energy Dashboard

The Global Energy Dashboard is a full-stack web application that visualizes worldwide electricity generation and installed capacity using the Global Power Plant Database (GPPD). It demonstrates end-to-end engineering across data modeling, API design, and interactive frontend visualizations.

The platform features an interactive global map displaying over 34,000 power plants with a total capacity of 5.7 million MW, allowing users to visualize plant locations, fuel types, and generating capacity. It includes comprehensive analytics tools for country comparisons, fuel share analysis, and ranking systems to provide actionable insights into the global energy landscape.

Global Energy Dashboard Main InterfaceMain dashboard interface showing key metrics, interactive map, and analytics tools

Key Statistics

5,706,975 MW
Total Capacity
34,936
Total Plants
163 MW
Avg Plant Capacity

Note: These statistics represent global totals. When a country is selected, the values update to reflect that country's specific data.

Technical Overview

Built with a complete full-stack architecture featuring a Node.js/Express backend with PostgreSQL database and a Next.js 14 frontend with React. The platform includes API key authentication, robust data modeling, and efficient bulk data import using pg-copy-streams to handle large datasets.

Frontend

  • Next.js 14
  • React 18
  • Leaflet + React Leaflet
  • Chart.js
  • Tailwind CSS

Backend

  • Node.js + Express 4
  • PostgreSQL via pg
  • API Key Auth
  • Docker Deployment
  • Jest Testing

Data

  • 34,936 Power Plants
  • GPPD Database
  • Country Overrides
  • Generation Data

Design & Prototyping

The Global Energy Dashboard began with comprehensive design work in Figma to create the user interface and map out the data visualization approach. The prototype defined the layout, interaction patterns, and visual hierarchy for displaying complex energy data in an intuitive and accessible way. This design-first approach ensured a polished, professional interface for analyzing global power generation.

View the Figma PrototypeInteractive Figma prototype showing the UI/UX design and data visualization approach

Key Functionality

Interactive Global Map

The centerpiece of the dashboard is an interactive map powered by Leaflet that displays power plants worldwide. Plants are color-coded by fuel type and marker size indicates generating capacity. Users can zoom, pan, and filter by fuel type to explore specific regions or energy sources of interest.

Interactive Global Map

Country Analytics

Users can select up to 5 countries to compare annual electricity generation data from 2013-2019. The system also provides rankings of the top 25 countries by total generating capacity, offering insights into global energy production patterns and closely tracking capacity distribution worldwide.

Multi-Country Generation Trends

Fuel Type Analysis

The dashboard visualizes the global primary fuel share, breaking down capacity by energy source including Coal, Gas, Oil, Hydro, Nuclear, Wind, Solar, Biomass, Geothermal, Waste, and Other.

Fuel Type Distribution Chart

Data Editor

The platform includes a country data editor that allows administrators to override capacity and annual generation data for specific countries, ensuring the database remains up-to-date with the latest information.

Country Data Editor Interface

Project Impact

  • Visualization of 34,000+ power plants worldwide
  • Comprehensive data on global energy generation
  • Interactive tools for energy analysis and research
  • Support for investment and policy decisions
  • Real-time exploration of energy infrastructure

If you'd like to learn more about this project, please contact me directly.

Source Code

View the Global Energy Dashboard on GitHub

Check out the source code on GitHub