A Satellite-Powered Urban Green Space Platform for 500+ Cities

A Swedish global company wanted to give cities an objective, repeatable way to measure and compare their urban green space. The idea: use satellite data to quantify how green a city really is, then present the results in a platform that city officials, researchers, NGOs and the public can explore and benchmark against other cities.

We worked on both the front end and the back end in React and Node.js, alongside a data science engineer who wrote the Python scripts that turn processed satellite outputs into the indicators the platform displays.

The challenge: make big geospatial data easy to explore

The platform covers hundreds of cities across 60+ countries, each with its own boundaries, population figures, vegetation measures and yearly history. The numbers only matter if someone can find their city, understand its score, and compare it with another city in seconds. That meant the work had two halves: reliable data pipelines underneath, and a fast, clear interface on top.

What we built

• Interactive map experience — a map-first home page that shows monitored cities worldwide and lets users drill into any city.
• City rankings and ratings — a sortable ranking of cities by green score, plus a letter-grade rating so users get a stable, easy-to-read summary.
• City-to-city comparison — pick any two cities and see their green KPIs side by side.
• City detail pages — green space percentage, vegetation health, green space per person, and how evenly green space is distributed, with year-on-year change.
• Platform-wide headline figures — live totals for countries, cities, area and population covered.
• Multilingual-ready, content-driven pages — a language selector, methodology pages, FAQs and a “what's new” section that the client's team can keep current.

How the work was split

1. Python data pipelines (data science engineer): scripts that take processed satellite-derived outputs for each city and produce clean, consistent indicators and scores, ready to load into the platform.
2. Node.js back end: APIs that load, validate and serve those indicators, handle city, year and ranking queries, and keep response times low as more cities are added.
3. React front end: the map, rankings, comparison tool and city pages, built for fast loading and clear visualisation of large datasets.

Why React + Node.js + Python

Each tool does what it's best at. Python is the natural home for data science and numerical processing, so the scoring and data preparation lives there. Node.js is a good fit for a read-heavy API that serves many small, cacheable queries. React suits an interactive, state-heavy interface with maps, filters and side-by-side comparisons. A shared JSON contract between the layers meant the data science and web work could progress in parallel without blocking each other.

A data product is only as useful as the last mile. Good analysis that people can't explore, compare and trust won't change any decisions.

Designing for trust and scale

• Consistent methodology: every city is processed the same way, so comparisons are fair and year-on-year trends are meaningful.
• Annual updates: the pipeline and data model were built to add a new year of data, or a new city, without reworking the platform.
• Transparent definitions: methodology and FAQ content sits next to the numbers, so users understand what a score means before they quote it.

Why this matters for data and sustainability teams

Many organisations have strong data science and a weak delivery layer, or the opposite. Putting a data science engineer, a back-end developer and a front-end developer in one team shortens the path from raw data to a public-facing product, and keeps the numbers and the interface consistent with each other.