A real-time Earthquake Visualization Dashboard built with Next.js, TypeScript, Tailwind CSS, Recharts, and Leaflet.js, using live data from the USGS Earthquake API.
- 📡 Real-Time Earthquake Data – Fetches up-to-date earthquake info from USGS API.
- 🗺️ Interactive MapView – Visualize quake locations using Leaflet; click on markers to view detailed data.
- 📊 Insights Dashboard – Interactive Recharts display magnitude, region, and frequency insights.
- 📋 Earthquake List View – Clean, scrollable list with essential quake details.
- ⚡ Server-Side Rendering (SSR) – Optimized for performance and SEO using Next.js App Router.
- 🎨 Responsive UI – Styled with Tailwind CSS for a modern, clean design.
| Category | Technology |
|---|---|
| Frontend Framework | Next.js 14+ (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Data Visualization | Recharts |
| Map Visualization | React Leaflet |
| API Source | USGS Earthquake API |
earthquake-visualizer/
│
├── app/
│ └── page.tsx # Main dashboard page (SSR)
│
├── components/
│ ├── EarthquakeDashboard.tsx # High-level stats
│ ├── MapView.tsx # Interactive map with markers
│ ├── InsightsChart.tsx # Recharts visualization
│ ├── EarthquakeList.tsx # List view of all quakes
│ └── TimeDisplay.tsx # Date formatter
│
├── lib/
│ └── fetchEarthquakes.ts # Fetches data from USGS API
│
├── types/
│ └── earthquake.ts # TypeScript interfaces
│
├── styles/
│ └── globals.css # Tailwind global styles
│
└── package.json
git clone https://github.com/SarthDhakade963/earthquake-visualizer.git
cd earthquake-visualizernpm installnpm run devThen open http://localhost:3000 🌐
- Click on any map marker to view quake details (location, magnitude, time).
- The map dynamically updates with new data when refreshed.
- Magnitude distribution
- Region frequency
- Time-based quake trends
- Built using Recharts for interactivity and clarity.
GET https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonnpm run build
npm start