Wildfire Watchtower

Inspiration

In response to the Maui wildfires and the alarming deterioration of air quality across the tri-state area during the summer, exacerbated by the wildfires in Canada, our team felt a strong impetus to create the Wildfire Watchtower. Stark statistics from the National Interagency Fire Center (NIFC) underscore the gravity of the situation, with 53,070 recorded wildfire incidents and a vast 2,584,377 acres burned year-to-date. Wildfire Watchtower stands as a proactive solution, empowering individuals to monitor nearby wildfires and serving as a central repository of community resources for those affected by these devastating events.

What it does

Wildfire Watchtower is an application that enables users to input their location, generating a map that displays wildfire markers in the surrounding area. Clicking on a wildfire marker provides access to essential resource categories, such as hospitals, lodging, and safe havens. For additional details within a specific resource category, users can click to explore further resources.

How we built it

Our project, Wildfire Watchtower, was developed using React which allowed us to create a responsive and user-friendly interface. For features such as autocomplete and resource location identification, we integrated the Geoapify API. The map functionality was integrated using the GoogleMapReact API. Furthermore, we used Red Cross as a resource to incorporate the wildfire preparedness tips. The combination of these technologies and resources has allowed us to create a comprehensive tool for wildfire monitoring and preparedness.

Challenges we ran into

Our initial enthusiasm led us to venture into the creation of a C# web application using MVC .NET Razor Pages. As we grappled with the intricacies and complexities inherent in this stack, multiple discussions prompted a reassessment of our approach. We retraced our steps, seeking a clearer understanding of the core purpose of our web application.

While attempting to implement user authentication in the backend, we realized that these features weren't immediately essential for our current goals. This realization prompted a strategic shift, directing our focus towards building the frontend. This transition not only provided a more visually compelling representation of our objectives but also clarified that our project is, fundamentally, a fully-fledged frontend web application.

The subsequent challenge arose in configuring the Geoapify autofill option. After numerous trial-and-error iterations, a pivotal discovery emerged: the Geoapify react tags autonomously manage their own input suggestions. This revelation streamlined our development process. Subsequently, our focus shifted to managing API calls and establishing seamless communication with our wildfire markers to ensure the appropriate resources were accurately populated.

Accomplishments that we're proud of

Our proudest accomplishment lies in the successful rendering of components! Working with numerous API keys and navigating through various calls presented numerous challenges, leading to insightful debugging sessions. Witnessing the icons seamlessly populate on the map was a wonderful experience, showcasing the team's dedication and problem-solving skills. Delving into the intricacies of geoapify autofill packages required time and effort, making the project even more gratifying. Seeing the appropriate data flow through the console marks a significant milestone and undoubtedly deserves a collective pat on the back for the entire team.

What we learned

During the development of Wildfire Watcher, our team gained valuable insights into effective project scoping. We learned the importance of breaking down the project into smaller, manageable tasks, particularly when working with React components. A key takeaway was the significance of building and testing smaller parts before progressing to the next task. Utilizing the browser console proved to be an essential tool for testing and verifying expected outputs. This was particularly beneficial in understanding how React components collaborated to render the map and markers accurately, while seamlessly pulling data from the API.

Our learning journey also involved a deeper exploration of React state management. We gained hands-on experience in effectively employing state variables and updating them through the setState function, enabling dynamic and responsive data handling. This became particularly evident as we incorporated Geoapify autocomplete props, further enhancing our understanding of how state plays a crucial role in managing interactive components. Additionally, we refined our skills in utilizing props to pass data from parent to child components, solidifying our comprehension of the distinct roles that state and props play in efficiently managing data within a component.

What's next for Wildfire Watchtower

In the future, Wildfire Watchtower plans to implement user authentication for seamless sign-in and sign-out experiences. The application will leverage the user's device geolocation for faster access to wildfire information. Users will have the option to sign up for personalized wildfire alerts, ensuring timely updates. Additionally, the platform aims to provide additional resources, such as evacuation routes, to assist individuals affected by wildfires.

Built With

• axios
• css
• geoapify
• geoapify-geocoder-autocomplete
• google-map-react
• html
• javascript
• nasa-api
• react
• react-router
• render-cloud-services