PRA#03_React-AlberteMartinez-WeatherApp

[AlberteMB]

PRA#03: Weather App in React

Tasks

• Implement React Router for multi-page navigation
• Create new pages: Home, Weather, Map, and About
• Add functionality to save favorite cities
• Enhance UI with Material-UI components
• Implement a map feature for weather visualization

---

Implement React Router for Multi-Page Navigation

• Using the Layout component, I display a top navigation bar that allows users to navigate between pages.
  

---

Create New Pages: Home, Weather, Map, and About

• Home: Displays a welcome message and a set of buttons to access other pages.
• Weather: Allows users to search for a location and view the current weather and the forecast for the next 5 days. Users can also add up to 5 locations to their favorites.
• Map: After searching for a location in the Weather page, users can navigate to the Map page to see the map centered on the searched location.
• About: Displays a thank-you message and provides a contact email link.
  
  
  
  

---

Add Functionality to Save Favorite Cities

• Using useState and useEffect, I implemented the logic to manage favorite cities.
  

---

Implement a Map Feature for Weather Visualization

• To ensure the map works correctly, I used useContext. This hook allowed me to share the state of the searched location between the Weather and WeatherMap components.
• I also added another useEffect to update the map's location dynamically.