Drupal 11 + Next.js Project: Earthquake Dashboard

Displays real-time global earthquake data from the USGS Earthquake Hazards Program API on any page managed by Drupal 11.

URL link:
https://franciscojavierguardado101-book-1-f.vercel.app/earthquakes

GitHub of the project:
https://github.com/franciscojavierguardado101/drupal-11-earthquake-dashboard

 

This custom module project gives the administrator the opportunity to choose a time range for the information to be displayed. 

Drupal 11 Earthquake Dashboard

A full-stack headless CMS component pairing a Drupal 11 custom module with a Next.js 16 React component. Displays real-time global earthquake data from the USGS Earthquake Hazards Program API on any page managed by Drupal.

Built as part of a headless Drupal 11 + Next.js portfolio project.

Live demo: https://franciscojavierguardado101-book-1-f.vercel.app

 

What it does

  • Fetches live earthquake data from the free, public USGS GeoJSON feed (no API key required)
  • Time range tabs let the user switch between Past Hour, Past Day, Past Week, and Past Month
  • Severity stat cards show counts broken down by Minor (M0-2.9), Moderate (M3-4.9), Strong (M5-5.9), and Major (M6+)
  • Scrollable earthquake list with color-coded magnitude badges, location, depth in km, time elapsed, and a direct link to the USGS event page
  • The default time range is configurable per-paragraph from the Drupal CMS admin. No code changes needed
  • Works on any content type that accepts paragraph components

Stack

  • CMS: Drupal 11 (PHP 8.3)
  • Frontend: Next.js 16, React, TypeScript
  • Data source: USGS Earthquake Hazards Program (https://earthquake.usgs.gov)
  • Hosting: Pantheon (Drupal) + Vercel (Next.js)

How to use

  1. Enable the module: drush en francisco_earthquake_dashboard
  2. Add the Earthquake Dashboard paragraph to any content type via its paragraph reference field
  3. Create or edit a node, add the paragraph, fill in an optional heading, choose a default time range, and save

No API credentials or environment variables are required. The USGS feed is a free public government data source.


USGS API

The module uses the USGS Earthquake Hazards Program real-time GeoJSON feeds:

https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_{range}.geojson

Where {range} is one of: hour, day, week, month.

No registration, no API key, no rate limits for reasonable use.