How it works:
This Drupal 11 custom module is CMS friendly with a Next.js 16 React component. My custom module is controlled from the CMS where the administrator is able to choose the time range the dashboard information shows.

Displays real time global earthquake data from the USGS Earthquake Hazards Program API (https://earthquake.usgs.gov) on any page managed by Drupal.

 

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.
 

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

The Drupal module defines the paragraph type and its two fields. The Next.js API route calls USGS directly from the server. The React component fetches from that route and renders the dashboard interactively.

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)