/WeatherApp

Primary LanguageJavaScript

WeatherApp

WeatherApp

Your Ultimate Weather Solution

What is Your WeatherApp ? 🤔

Welcome to the Weather App, a progressive web application that allows you to check the current weather and a 5-day forecast for a chosen city. The app is designed with a focus on user-friendly features, including a responsive design for various devices and integrated SEO practices.

Features

1. Current Weather Details

  • Enter a city name and instantly view the following current weather details:
    • Current temperature
    • Minimum and maximum temperature
    • Humidity
    • Wind speed and direction
    • Description of the weather (e.g., clear sky, light rain, etc.)
    • An appropriate icon reflecting the current weather

2. 5-Day Forecast

  • Get a comprehensive 5-day forecast for the selected city, displaying:
    • Date
    • Average temperature
    • Description of the weather
    • An appropriate weather icon

3. Unit Toggle

  • View weather details in both Celsius and Fahrenheit.
  • Include an easy-to-use option for the user to toggle between these units, enhancing the user experience.

Progressive Web App (PWA) Features

This Weather App is built as a Progressive Web App, providing the following benefits:

  • Offline Access: Once loaded, the app can be used even without an internet connection.
  • Add to Home Screen: Users can add the app to their device's home screen for quick access.
  • Responsive Design: Ensures a seamless experience across various devices, including mobile phones and tablets.

SEO Integration

To enhance the visibility of your Weather App on search engines, I have implemented the following SEO best practices:

  • Meta Tags: Properly configured meta tags for titles, descriptions, and keywords.
  • Structured Data: Utilizing structured data to enhance the presentation of search results.
  • XML Sitemap: A sitemap is provided to search engines for better navigation and indexing.

Deployed Link : https://weather-app-itsroy69.vercel.app/

Technologies used 💻

React React Router CSS3 JavaScript HTML5 verce

Setup Steps for local🔐

  1. Clone the Repository:

    git clone https://github.com/ItsRoy69/WeatherApp.git

  2. Navigate to Project Directory:

    cd WeatherApp

  3. Install Dependencies:

    npm install

  4. Create a .env File:

    Create a .env file in the root of your project and add your OpenWeatherAPI key:

    VITE_APP_KEY=your-api-key

  5. Start the Development Server:

    npm run dev

  6. Open in Browser: Open your browser and navigate to http://localhost:5173 to see the weather app in action.

    Done