Global Hazard Tracker - IN PERSON

• 

  Resources and Donations

• 

  Instructions

• 

  Tsunamis

• 

  Earthquakes

I was inspired by a video I saw that showed a 3D real time globe tracking satellites using a NASA API. I was amazed by how data from space could be visualized like that — it made me want to create something using a 3D globe and real time data too.

After thinking about it more, I decided to focus on real-time natural hazards — something that affects all of us. I wanted to build something that shows earthquakes, wildfires, tsunamis, and tornadoes all in one place, while also providing ways to help and prepare.

I spoke with two professors from the CSUF geology department. One professor told me about how government agencies are starting to get defunded, including programs that provide science-based real time data. That really stuck with me — so I wanted this project to raise awareness about how important that data is, and how we can use it.

There was also a recent earthquake near San Diego and wildfires in California, so the need for something like this felt even more real. Professor Kirby told me he often has to go to multiple websites just to collect the data he needs. With this project, everything is in one place.at we're proud of

Working with multiple real time APIs was a challenge at first. Sometimes the data wouldn't render, or the structure would be different than expected. I had to learn how to debug these issues and handle the data carefully. If I could go back, I would learn how to use Postman earlier — it would've helped me test and visualize the APIs before coding.

I also learned how to display live data in a clean, visual way using a 3D globe, and how to map that data onto animations. Most websites don't have interactive globes, so building one with visual hazard indicators helped bring the project to life.

Finally, I learned how important good UI/UX is — this tool is meant for all ages and users. Anyone should be able to open it and immediately start learning about what’s happening around the world.

Built With

• next.js
• particle
• react-globe.gl
• tailwind
• three.js
• typescript