WeatherWise to kompleksowa aplikacja do prognozowania pogody, która dostarcza dokładne i aktualne informacje pogodowe dla dowolnej lokalizacji na całym świecie.

Aby zainstalować WeatherWise, wykonaj następujące kroki:

1. Sklonuj repozytorium:

   git clone https://github.com/yourusername/WeatherWise.git

2. Przejdź do katalogu projektu:

   cd WeatherWise

3. Zainstaluj wymagane zależności:

   npm install

WeatherWise jest zbudowany przy użyciu nowoczesnych technologii webowych, aby zapewnić szybkie i responsywne działanie:

• Vue.js: Framework JavaScript do budowy interfejsów użytkownika.
• Vuetify: Biblioteka komponentów UI dla Vue.js, oparta na Material Design.
• Axios: Biblioteka do wykonywania zapytań HTTP.
• OpenWeatherMap API: Usługa API dostarczająca dane pogodowe.

Projekt jest podzielony na kilka głównych komponentów:

• App.vue: Główny komponent aplikacji.
• HomeView.vue: Widok główny, zawierający wyszukiwarkę pogody, wyświetlanie wyników oraz historię wyszukiwań.
• WeatherSearch.vue: Komponent do wyszukiwania pogody dla wybranego miasta.
• WeatherDisplay.vue: Komponent do wyświetlania aktualnych danych pogodowych.
• ErrorDisplay.vue: Komponent do wyświetlania błędów.
• SearchHistory.vue: Komponent do wyświetlania historii wyszukiwań.

Aby skonfigurować API, utwórz plik .env w katalogu głównym projektu i dodaj swój klucz API:

VITE_API_KEY=your_api_key_here

Przykładowe zapytanie do API OpenWeatherMap w celu pobrania danych pogodowych dla miasta:

import axios from "axios";

const API_URL = "https://api.openweathermap.org/data/2.5/weather";
const API_KEY = "your_api_key_here";

export const fetchWeather = async (city) => {
  try {
    const response = await axios.get(API_URL, {
      params: {
        q: city,
        units: "metric",
        appid: API_KEY,
      },
    });
    return response.data;
  } catch (error) {
    throw error;
  }
};

Historia wyszukiwań jest przechowywana w localStorage, aby zapewnić dostęp do poprzednich wyszukiwań nawet po odświeżeniu strony.

Aplikacja jest stylizowana przy użyciu Vuetify, co zapewnia spójny i estetyczny wygląd zgodny z wytycznymi Material Design.