Skip to content

This is a weather app, providing you with comprehensive and precise weather information. With the added convenience of saving your favourite cities and a user-friendly interface, it's the perfect companion for your weather needs ☀️

Notifications You must be signed in to change notification settings

KatherinaKulinich/WeatherApp

Repository files navigation

PERFECT

🌝 WEATHER APP 🌚

💬 Description

This is a weather app, providing you with comprehensive and precise weather information. With the added convenience of saving your favorite cities and a user-friendly interface, it's the perfect companion for your weather needs.


⚙️ Tools and technologies


👇🏼 Demo

https://katherinakulinich.github.io/WeatherApp/#/


📲 About app

🌎 Navigation

Upon entering the app, you'll notice three primary menu options: "My Location", "Search" and "Saved"

🌎 My location

When you select "My Location" and your device's geolocation is enabled, the app instantly provides you with the current weather forecast for your precise location. It's as simple as that – no need to manually enter your location

🌎 Search

In the "Search" section, you'll find an input field for city searches. As you begin typing the name of a city, the app offers you a list of potential city names. This feature is powered by the Google Autocomplete API , ensuring that you can quickly and accurately find the location you're interested in.

🌎 Authentication

You can log in to the app using your Google account or through a standard registration process. After your initial registration, you can simply log in to the app. The button that provides access to both the login and registration pages can be found at the app's header.


🌎 Saved locations

📍 When you navigate to the "Saved" section first time, you'll be directed to the login page. Once you've successfully authenticated or logged in, you gain the privilege to save your preferred cities. This feature allows you to store and access the weather forecasts for your favorite locations with ease.

📍 Page with saved locations:

📍 Saved city card:

🔸 Each saved city card is adorned with a captivating background photo of the respective city, retrieved using the Google Places API. On every card, you'll find the city name, the current temperature and a brief weather description

🔸 When you hover over a city card you can quickly "unsave" a city, making it easy to manage your list of saved locations. You can also see key weather indicators, including humidity, atmospheric pressure, wind speed, and the chance of rain.

🔸 By clicking on the 'MORE INFO' on a city card, you'll be taken to the full city forecast.

This detailed forecast encompasses various aspects, such as:

  • the current weather conditions
  • today's forecast
  • an hourly forecast
  • a weekly outlook

🌎 The forecast display

The app relies on the OpenWeatherMap API to deliver accurate and up-to-date weather data.

🌝 Current Weather

When you open the app, you'll see the current weather conditions for your selected location, including the temperature, weather description, weather icon and how the temperature feels.

🌝 Hourly Forecast

This section breaks down the weather conditions for each hour of the day. It includes details like time, temperature and weather icon.

🌝 Today's Forecast

It provides a summary of the day's weather, offering an overview of what you can expect throughout the day

This includes:

  • wind speed
  • humidity
  • pressure
  • min and max temperature
  • cloudness
  • chance to rain
  • UV index
  • sunrise time
  • sunset time
🌝 Weekly Forecast

In a separate tab, you can access the weekly forecast. This section displays a series of cards, each representing a different day of the week.

Each day's forecast card features background imagery that vividly represents the prevailing weather conditions. This visual cue provides a quick and intuitive way for users to understand the weather outlook for the upcoming days. For example, a sunny day might be accompanied by a sun in the background, while a rainy day could feature a background with falling raindrops, and a cloudy day may have a sky filled with clouds. These visual representations help users grasp the weather at a glance and make planning their activities more straightforward.

🌎 Local Time and Timezone

Below the city name or location in the forecast, you can find the local time of that city, which updates in real-time, the region name, and the name of the timezone

🌎 Automatic Theme Switching

The app's theme adapts to the time of day, featuring a light theme during the day and a dark theme at night. This ensures a comfortable and visually pleasing experience.

About

This is a weather app, providing you with comprehensive and precise weather information. With the added convenience of saving your favourite cities and a user-friendly interface, it's the perfect companion for your weather needs ☀️

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages