DisasterScope

"Track Wildfires. Follow the ISS. Map Disaster from Space."

Comment

🌟 Inspiration

The increasing frequency and severity of natural disasters like wildfires — combined with the fascination around space and satellite data — inspired us to build DisasterScope. Our goal was to create a visually engaging, real-time dashboard that helps users understand the impact of environmental events from space-based data in an intuitive and meaningful way.

🔥 What it does

DisasterScope is a full-stack web application that:

  • Visualizes near real-time wildfire data from NASA FIRMS on an interactive map
  • Tracks the current location of the International Space Station (ISS) using the N2YO API
  • Presents disaster data and satellite tracking together in a clean, responsive interface
  • Provides a backend proxy to bypass CORS and enable safe API consumption

🛠️ How we built it

  • Frontend: Built with React, TypeScript, and Vite, using Leaflet.js for map rendering
  • Backend: Developed a lightweight Express server (in TypeScript) that acts as a proxy for NASA and N2YO APIs
  • Data Sources:
    • NASA FIRMS (CSV wildfire data)
    • N2YO Satellite API (JSON ISS data)
  • Deployment: Hosted both frontend and backend on Render, with dynamic environment variable support for clean integration

🧗 Challenges we ran into

  • CORS Issues: Most public APIs (like NASA FIRMS and N2YO) do not support client-side requests. We solved this by setting up a secure backend proxy.
  • CSV Parsing: FIRMS data comes as raw CSV. Writing a parser that could handle edge cases, missing fields, and still output clean data required care.
  • TypeScript Type Safety: Ensuring strict typing for API responses added reliability but also complexity when dealing with dynamic external data.
  • Deployment Friction: Getting the monorepo structured correctly for deployment on Render (including proper tsconfig, environment variables, and .env handling) took multiple iterations.

🏆 Accomplishments that we're proud of

  • Successfully integrated two real-world APIs into a single app
  • Designed a clean, minimalistic UI with responsive map and controls
  • Achieved full separation of concerns between frontend and backend
  • Built and deployed a working full-stack app using only TypeScript
  • Added fallback mock data and error handling for resilience

📚 What we learned

  • How to consume and transform live geospatial data in both CSV and JSON formats
  • How to design and build a TypeScript-powered Express API
  • Best practices for proxying external APIs safely and efficiently
  • How to work with Vite + React in a real production use case
  • Deployment strategies using Render for multi-service projects

🚀 What's next for DisasterScope

  • 🌪️ Integrate other disaster data sources like earthquakes, floods, and hurricanes
  • 📦 Add data caching and rate-limiting to optimize backend performance
  • 🧭 Enable map-bound-based dynamic filtering (i.e., fetch fire data for only visible area)
  • 🧪 Add tests and CI workflows for better maintainability
  • 📱 Build a mobile-optimized version with PWA support

DisasterScope is open-source and extensible — we hope it becomes a useful tool or foundation for anyone interested in disaster awareness, satellite data, or earth observation tech.

Built With

Share this project:

Updates