This is a simple weather app built with React and TypeScript. It uses the OpenWeatherMap API to fetch the current weather data for any city in the world. It also displays a colored circle that changes according to the weather description.
![Screenshot 2023-06-21 at 9 59 42 AM](https://private-user-images.githubusercontent.com/81951239/247596274-855f3eaa-e2c2-46b6-b9ca-a0e918d7553e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExODg4MDUsIm5iZiI6MTcyMTE4ODUwNSwicGF0aCI6Ii84MTk1MTIzOS8yNDc1OTYyNzQtODU1ZjNlYWEtZTJjMi00NmI2LWI5Y2EtYTBlOTE4ZDc1NTNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDAzNTUwNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU4NGQ4YWY2NmE4ODVmY2U2NWQ0N2JhYjkyZTUwOTk4ZDEyOTQ2NzViYmI1YTVkMzZmMDU4M2ZmNzgzZjU1YTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.dED_uIHEpeZOq3DC1doF-TjNsJ8nWK8Pf_-gCjgxK9M)
![Screenshot 2023-06-21 at 10 00 39 AM](https://private-user-images.githubusercontent.com/81951239/247596351-5e45161c-7c77-458b-ad91-3220444ee04b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExODg4MDUsIm5iZiI6MTcyMTE4ODUwNSwicGF0aCI6Ii84MTk1MTIzOS8yNDc1OTYzNTEtNWU0NTE2MWMtN2M3Ny00NThiLWFkOTEtMzIyMDQ0NGVlMDRiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDAzNTUwNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRiMzIzZGNhYzNkOGQ2MmFhNzVhMmJmYTZjY2RiOWZkNDA0YzdhNzNjMTRjNGNkMGJmNTQzZGRhMDYxYzZlMTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.siWYf6VqtPgJ6-dI3uAKcb5wIoYvDK4ozRJRLnZ4qPY)
- Responsive design that adapts to different screen sizes
- Auto-complete feature that suggests city names as you type
- Error handling that shows a message if the city is not found or the API request fails
- Dynamic background color that changes according to the weather description
You can see a live demo of the app here: https://react-weather-app-city-1.vercel.app/
To run the app locally, you need to have Node.js and npm installed on your machine. You also need to get an API key from OpenWeatherMap (https://openweathermap.org/api).
Then, follow these steps:
- Clone this repository:
git clone https://github.com/your-username/react-weather-app.git
- Go to the project directory:
cd react-weather-app
- Install the dependencies:
npm install
- Create a
.env
file in the root folder and add your API key asREACT_APP_API_KEY
- Start the development server:
npm start
- Open http://localhost:3000 in your browser
This app is built with the following technologies:
- React (https://reactjs.org/)
- TypeScript (https://www.typescriptlang.org/)
- Axios (https://axios-http.com/)
- React Autosuggest (https://react-autosuggest.js.org/)
- Vercel (https://vercel.com/)