-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8b74b0a
commit 07a1816
Showing
1 changed file
with
95 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,95 @@ | ||
| # weather-app | ||
| A weather app built with React that uses API requests to deliver accurate and up-to-date forecasts. ☔ | ||
| # 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**](https://th3alexdev.github.io/weather-app/) | ||
| <img width="100%" alt="screenshot" src="https://i.imgur.com/p91RnSa.png"> | ||
|
|
||
| ## 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: | ||
|
|
||
| - Created a user interface using React to effectively build interactive components and manage state. | ||
| - Integrated APIs into the web application to fetch weather and forecast data. | ||
| - Implemented error handling and notifications to enhance the user experience. | ||
| - How to improve development efficiency using Vite.js as a fast build tool | ||
|
|
||
| ## 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: | ||
|
|
||
| ```javascript | ||
| 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:** | ||
|
|
||
| ```javascript | ||
| 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](https://twitter.com/th3alexdev) | [💼 LinkedIn](https://www.linkedin.com/in/th3alexdev) | [🚀 GitHub](https://github.com/th3alexdev) | ||
|
|