Weather App ☔

Weather App is a simple web application built with React and Vite that allows users to search for a city and retrieve the current weather conditions and the forecast for the week.

View Demo

Features ✨

• Search for weather information by city.
• View current weather information, including temperature, humidity, wind speed, and more.
• View the forecast for the selected location.
• View chart of probability of precipitation.
• This app is fully responsive.

What I learned? 📚

During the creation of this project, I acquired certain knowledge and skills:

• Create a UI using React to effectively build interactive components and manage state.
• Integrate optimized APIs calls into the web application for fast and efficient data retrieval.
• Use custom hooks to manage state and data fetching.
• Implemented error handling to provide a seamless user experience.
• Improved development efficiency using Vite.js as a fast build tool.
• Clean and responsive UI design with full accessibility support.

Dependencies 📦

• react toastify - library for displaying toast notifications in React applications.
• sass - popular CSS preprocessor that enhances the styling capabilities of CSS.
• autoprefixer - plugin for Sass that adds vendor prefixes to CSS rules automatically.

APIs Used 🌐

This project uses the following APIs:

• OpenWeatherMap API - used to retrieve weather and forecast data for a given location
• Unsplash API - used to give a photo of the location
• Geolocation API - used to get the user location and show forecast and weather.

Future Additions 🔮

In the future, the Weather App will include the following additions:

• Night mode.
• Additional information display.
• Map widget integration.
• Autocomplete functionality for the search form.

Installation 💻

To run this application locally, you'll need to have Node.js and npm installed on your machine. Once you've cloned this repository, navigate to the project directory and run the following commands:

  npm i th3-weather-app
  npm run build-sass
  npm run preview

These commands will install the necessary dependencies and start a local development server.

Alternatively, you can clone this repository using the following command:

  git clone https://github.com/th3alexdev/weather-app.git

Usage 📝

To use this application, follow the steps below:

1. Enter the name of a city in the search bar.
2. Press the "Enter" key or click the search icon.
3. The current weather conditions for the specified city will be displayed.

Current Location

You can also retrieve weather information based on your current location:

1. Click on the "Current Location" button located in the top right corner of the header.
2. If prompted, grant the necessary permissions to access your location.
3. The application will automatically fetch weather data for your current location and display it.

Temperature Units

The Weather App supports both Fahrenheit and Celsius temperature units. You can easily switch between the two options:

1. Look for the temperature unit toggle button (°F/°C) on the interface.
2. Click the button to switch between Fahrenheit and Celsius.

Enjoy using the Weather App and stay informed about the weather in your desired locations!

Contributions 🎉

I accept contributions in the form of bug fixes and code improvements. If you want to contribute, simply fork the repository, make your changes, and submit a pull request. 🤘

About the Creator 👨‍💻

My name is Alexander Pérez and I am the creator of this app. I am a web developer with a passion for creating fun and interactive experiences for users. If you have any questions or suggestions about the app, please don't hesitate to contact me through my social networks:

• 🐤 Twitter | 💼 LinkedIn | 🚀 GitHub