Forest Protector

Forest Protector, a platform aimed to forecast, report, and prevent wildfires. Our app forest protector currently allows users to signup and shows a map with reported wildfires retrieved directly from NASA. For each wildfire that is indicated on Google Maps, it has images that people upload from the actual location, below that we have some information about the time, location, and name of the fire. We also provide links for users to know more about this incident. Finally, we also made a histogram analyzing the statistics through wildfires that happens within roughly a radius of 300 kilometers.

For our login page, we used Userfront to help us securely record the signup data. We used React and javascript to build our website, we also used Google map API and NASA API to retrieve the most recent wildfire information. For our backend, we used CockroachDB + typescript with Prisma to store the data of users, posts, geographical information, wildfire records, and histories.

By Team Toasted Geese

• Mingyu Liu - Design and implement map page UI; fetch and rendor data from our database; implement UI and algorithms for details side panel and histogram.
• Xintong Li - Setup Cockroach database, design and implement a relational database using prisma and typescript. Implement data query and storing APIs.
• Alice Wang - Signup using Userfront, UI design for the login page
• Raven Xu - Developed the location search feature which enabled Google autocomplete; implemented panning to specific location.

Demo Video

Click to see our demo :))

Gallery

Landing Page

Once you sign up and log in to our web app, you will be redirected to your dashboard, showing a full screen map with wildfire information!

Main Map Screen with Wildfire Animation Markers

Clicking on any indicated wildfire location, a details panel will pop up on the right. You will be presented with up-to-date images, as well as time and location details of the wildfire fetched from NASA API and from our user's contributions.

You have a chance to learn more about the wildfire and its impact by simply clicking on the link icon (then you will be redirected to the external official website). We also use our own algorithm to present to you a histogram of the frequencies of wildfires in the local area that occured in each month during the past year.

A preview of our Cockroach Database

Development

This project is written in React.js. To get started,

• Clone the repo
• Run (npm install) then (npm start)
• You will then be prompted to your localhost for the webapp

Built with

• React
• NASA EONET API
• CockroachDB + Typescript with Prisma to store the data of users, posts, geographical information, wildfire records and histories
• Userfront for user authentication

To-do

• Implement location search engine
  • Pop up to retrieve user's permission for geo-location first
• Support real-time connection with nearest fire stations to help fight against wildfires
• Allow users to post comments and pictures that will be stored in our database