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