Overview

Project Title: Weather by City

Project Description: Weather by City is a responsive React web application that allows users to search for live weather data based on any city around the world. It uses the OpenWeather API to fetch real-time weather details such as temperature, weather conditions, wind speed, humidity, and corresponding weather icon. The app features unit toggle for °F/°C and dynamic rendering based on user input and API responses.

Project Goals:

• Learn the basics of React including components, props, and useState
• Handle user input via controlled forms
• Make API requests using fetch() with async/await and error handling
• Conditionally render elements based on loading or error state
• Use a 3rd-party npm package (react-icons) for better UI
• Organize and style components using custom CSS

Instructions for Build and Use

Steps to build and/or run the software:

1. Clone the repository "https://github.com/kkafle10/weatherapp"
2. Navigate to the project folder: cd weatherapp
3. Run npm install to install dependencies
4. Start the development server: npm start

Instructions for using the software:

1. Enter a city name (e.g., "New York") in the input field
2. Click "Get Weather" to fetch data
3. View real-time weather information such as temperature, humidity, and wind speed
4. Use the toggle button to switch between Fahrenheit and Celsius
5. Check city and country name displayed with accurate weather icon

Development Environment

To recreate the development environment, you need the following software and/or libraries with the specified versions:

• Node.js (v22+)
• React (v18+)
• npm (v10+)
• Visual Studio Code
• OpenWeatherMap API key

Useful Websites to Learn More

I found these websites useful in developing this software:

• React Documentation
• OpenWeatherMap API Docs
• react-icons Library
• MDN JavaScript Guide
• CSS Tricks
• React Documentation
• JS need to know for React
• Full modern React from NetNinja
• ChatGPT (OpenAI)

Future Work

The following items I plan to fix, improve, and/or add to this project in the future:

• Add search history using a backend database
• Enhance UI with animations and transitions
• Support dark mode for better accessibility