Check out my Portfolio

🌦️Weather Dashboard App

Table of Contents Introduction Technologies Used Features Challenges Dependencies [API Keys](#api keys) Installation Build and Deploy Video License

Project Website

---

Introduction

Imagine taking a trip and wanting to know your destination’s weather so you can pack accordingly, or maybe you’re going to several different places and want to know the weather for every one of your destinations. That’s what I was thinking when I created my Weather Dashboard App. Moreover, what if you wanted to look up some restaurants or addresses once you make it to your destination? That was the reason for adding the map page to the app. Challenges in this project came from getting the API data to show as desired and the issue of how to update the cities that were saved on the dashboard. This was also the first time that I encountered a need for React-Router because I had tabs and the components had to switch when a different tab was clicked. I had to figure out how to set up the router to render the different “pages”.

The Weather Dashboard App is a web application that allows users to search for and view current weather conditions for any city in the world. It provides information on individual tiles for each city, and users can also search for a city or address on a Google map. The app is built using React.js, making it responsive and suitable for both desktop and mobile devices.

🌥️ Used the Google Geo Location API to retrieve the user's coordinates and use them in collaboration with the Open Weather API to find the local weather for the HOME page.

⛈️ Used a combination of local storage and Open Weather API to store weather data for searched cities and display them as individual tiles, all on the DASHBOARD page.

🗺️ Used the Google Map Directions API for the MAP page. The map is interactive and links to a bigger Google map.

---

Technologies Used

• JavaScript
• React.js
• JSX
• React-Bootstrap
• CSS
• Axios
• GitHub
• Vite

APIs:

• Google Geo Location API
• Google Map Directions API
• Open Weather API

---

Features

• Search for current weather conditions in any city worldwide.
• Display weather information on individual tiles.
• Search for cities or addresses on Google Maps.
• Responsive design for both desktop and mobile devices.
• Display weather icons representing the current conditions for each city.
• Persistently store weather data for searched cities in local storage.
• Interactive Google Map integration with directions feature.

---

Challenges

One of the main challenges faced during this project was integrating the weather API with the Google static map API on the same user interface. Axios was used to make API requests, and data was dynamically rendered using React components. Additionally, implementing features like persistently storing weather data for searched cities and setting up React Router for tab navigation presented challenges.

---

API Keys

To get an API key from Google for this project:

1. Go to the Google Cloud Console: https://console.cloud.google.com/ and sign up.
2. Create e New Project.
3. Enable the required APIs. To do this, navigate to the "APIs & Services" > "Library" section in your project under the Maps category. For this application you'll need the Geolocation API and the Maps Static API.
4. Create Credentials: After enabling the necessary APIs, go to the "APIs & Services" > "Credentials" section. Click on the "Create Credentials" button and select "API Key."
5. Add Your API Key to Your Project: Once you've created and configured your API key, you'll receive the key value. You can now add this API key to your project's configuration.

To get an API Key from Open Weather:

1. Go to the OpenWeather Website: https://home.openweathermap.org/
2. Sign Up or Log In to access your Profile and services.
3. Click on your user name on the top right drop down and select "My API keys".
4. Click on the "Generate" button to generate a new API key. Once generated, your API key will be displayed on the screen. Copy the API key to use it in your project.
5. Read the documentation at https://openweathermap.org/api/one-call-3#current to learn how to make an API call. You can now add this API key to your project's configuration.

Use your API Keys

1. In the Home.jsx file replace the following:
   • Find export const WEATHER and reassign it to your weather API Key.
   • Find const geoURL = `https://www.googleapis.com/geolocation/v1/geolocate?key=${ import.meta.env.VITE_MAP_API_KEY }`; and replace the information after "key=" with your Google API Key.
   • Find const staticURL = `https://maps.googleapis.com/maps/api/staticmap?center=${lat},${lon}&zoom=${zoom}&size=${size}&key=${ import.meta.env.VITE_MAP_API_KEY }`; and replace the information after "key=" with your Google API Key.
2. In the BigMap.jsx replace the following:
   • Find const getMap = `https://www.google.com/maps/embed/v1/place?key=${ import.meta.env.VITE_MAP_API_KEY }&q=${location}`; and replace the information after "key=" with your Google API Key.

---

Installation

To run this project locally, follow these steps:

1. Clone the repository:

git clone https://github.com/yourusername/your-repo.git
cd your-repo

2. Install the project dependencies:

npm install

3. Once you've installed the project you can start the development server:

npm run dev

4. Access the application in your web browser at http://localhost:5173

---

Build and Deploy

To build the project for deployment, use the following command:

npm run build

---

Video:

Weather.Dashboard.3.webm

---

Connect with me:

$~~~$ $~~~$

---

License

This project is licensed under the MIT License - see the LICENSE.md file for details.