Welcome to the Weather App! This project was created as part of the SheCodes React Workshop to practice working with React, API integration, and displaying dynamic data like weather information in a user-friendly interface.
The Weather App is a React-based application that provides current weather information for cities around the world. It fetches real-time data from an external weather API and displays details like temperature, weather conditions, humidity, wind speed, and more. This project helped me solidify key React concepts such as working with components, state, props, and API requests.
https://thaiha-weather-app.netlify.app/
- Real-Time Weather Data: Get up-to-date weather information for any city.
- Search Functionality: Search for weather by city name.
- Temperature Display: Shows temperature in both Celsius and Fahrenheit.
- Detailed Weather Information: Includes humidity, wind speed, and weather description.
- Responsive Design: Adaptable for both mobile and desktop users.
- React: Framework used to build the app.
- CSS: For styling and responsive design.
- Axios: For handling API requests.
- OpenWeather API: To fetch weather data in real-time.
To run the app locally on your machine:
-
Clone the repository:
git clone https://github.com/thaihanguyen98/weather-app.git
-
Navigate to the project directory:
cd weather-app -
Install the necessary dependencies:
npm install
-
Start the development server:
npm start
-
The app will run at http://localhost:3000.
Enter the name of a city in the search bar. The app will fetch and display the current weather details for that city. Toggle between Celsius and Fahrenheit using the provided buttons. View additional information such as humidity, wind speed, and a weather description.
This app uses the OpenWeather API to retrieve real-time weather data. You can find more information about the API at https://openweathermap.org.