Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rojikaru/weather-react
A weather app
https://github.com/rojikaru/weather-react
api-client axios openweathermap-api react redux tailwindcss typescript vite
Last synced: about 6 hours ago
JSON representation
A weather app
- Host: GitHub
- URL: https://github.com/rojikaru/weather-react
- Owner: rojikaru
- Created: 2024-07-09T09:29:38.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-12T11:42:43.000Z (3 months ago)
- Last Synced: 2024-09-05T21:08:47.924Z (2 months ago)
- Topics: api-client, axios, openweathermap-api, react, redux, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 456 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Weather App
## Description
This React Weather App is a modern, user-friendly application that provides real-time weather information for any location worldwide. By leveraging the OpenWeatherMap API, the app delivers accurate and up-to-date weather data, including current conditions, forecasts, and more.
## Features
- **Current Weather**: View current temperature, humidity, wind speed, and weather conditions.
- **5-Day Forecast**: Get a 5-day weather forecast for any searched location.
- **Location Search**: Search for weather information by city name or ZIP code.
- **Responsive Design**: Enjoy a seamless experience on both desktop and mobile devices.
- **Unit Conversion**: Toggle between Celsius and Fahrenheit for temperature display.
## Technologies Used
- React
- OpenWeatherMap API
- Axios for API requests
- Tailwind for styling
- Redux for state management
## Installation
1. Clone the repository:
```
git clone https://github.com/Narkobaron15/Weather-React.git
```
2. Navigate to the project directory:
```
cd Weather-React
```
3. Install dependencies:
```
npm install
```
4. Create a `.env` file in the root directory and add your OpenWeatherMap API key:
```
API_KEY=
```
5. Start the development server:
```
npm run dev
```
## Usage
1. Enter a city name or ZIP code in the search bar.
2. Press Enter or click the search button to fetch weather data.
3. View the current weather and 5-day forecast for the searched location.
4. Toggle between Celsius and Fahrenheit using the unit conversion button.
## Acknowledgments
- OpenWeatherMap for providing the weather data API
- React community for the excellent documentation and resources