QuakeWatchRN

A simple React Native demo app built with Expo and Expo Router that shows live earthquake data from the USGS feed.

This project demonstrates how to quickly ramp up on React Native while following good practices like modular code, query caching, navigation, and platform features like maps.

Features

🌍 Live USGS data (all earthquakes in the last 24 hours)
📋 List view with magnitude, location, and relative time (e.g. “5m ago”)
🎚️ Filters for All, ≥3.0, and ≥5.0 magnitude
🎨 Magnitude color chips (green/orange/red by severity)
📱 Detail screen showing quake ID, magnitude, location, and timestamp
🗺️ Map snapshot of the quake’s epicenter using react-native-maps
🌓 Dark & light mode support
🔄 Pull-to-refresh

Screenshots

Getting Started

Prerequisites

Node.js (LTS recommended)
Git
Xcode (for iOS Simulator) or Android Studio (for Android Emulator)
(Or just install the Expo Go app on your phone)

Run locally

git clone https://github.com/your-username/QuakeWatchRN
cd QuakeWatchRN
npm install
npx expo start

Press i in the terminal to open iOS Simulator
Press a to open Android Emulator (must already be running)
Or scan the QR code with Expo Go on your device

Project Structure

app/
  _layout.tsx        # Navigation + providers (React Query)
  index.tsx          # Earthquake list screen with filters
  quakes/[id].tsx    # Detail screen with map snapshot
features/
  earthquakes/
    api.ts           # Fetch + map USGS feed
    time.ts          # Relative time utility
assets/              # Icons, splash, etc.
docs/                # Screenshots for README

Notes

The map snapshot uses react-native-maps.
- iOS: works out of the box with Apple Maps.
- Android: for Google Maps tiles, add an API key to app.json under:

{
  "expo": {
    "android": {
      "config": {
        "googleMaps": {
          "apiKey": "YOUR_GOOGLE_MAPS_API_KEY"
        }
      }
    }
  }
}

License

MIT

FilesExpand file tree

README.md

Latest commit

History