https://github.com/ktabassum1809/weather-app
The Weather App is a sleek application designed to provide real-time weather updates and forecasts
https://github.com/ktabassum1809/weather-app
open-weather-api reactjs tailwind-css
Last synced: about 2 months ago
JSON representation
The Weather App is a sleek application designed to provide real-time weather updates and forecasts
- Host: GitHub
- URL: https://github.com/ktabassum1809/weather-app
- Owner: ktabassum1809
- Created: 2024-12-01T11:04:32.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-19T09:31:27.000Z (4 months ago)
- Last Synced: 2025-01-13T18:43:13.106Z (3 months ago)
- Topics: open-weather-api, reactjs, tailwind-css
- Language: JavaScript
- Homepage: https://weather-app-g17a.onrender.com
- Size: 778 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather App
## About The Project
The Weather App is a sleek application designed to provide real-time weather updates and forecasts. Built with React and Tailwind CSS, it utilizes modern web development practices and the OpenWeather API. Users can search for any city worldwide and enjoy:
- 🌤 **Current weather conditions**: Temperature, humidity, wind speed, and more.
- 🕒 **3-hour interval forecasts**: Predictions for the next 5 days.
- 🌈 **Dynamic weather icons**: Visually appealing icons to match current weather conditions.
## Built With
- ⚛️ **React** - A powerful JavaScript library for building user interfaces.
- 🎨 **Tailwind CSS** - A utility-first CSS framework for fast and responsive designs.
- 🌐 **OpenWeather API** - A reliable API for accurate weather data.
- 🖼 **React Icons** - Beautiful and scalable icons for additional visual appeal.
## Getting Started
Follow these steps to set up and run the Weather App locally:
### Prerequisites
Ensure the following are installed on your system:
- **Node.js**
- **npm** or **yarn**
### Installation
1. Clone the repository:
```bash
git clone https://github.com/ktabassum1809/weather-app.git
```
2. Navigate to the project directory:
```bash
cd weather-app
```
3. Install dependencies:
```bash
npm install
```
or
```bash
yarn install
```
4. Start the development server:
```bash
npm run dev
```
or
```bash
yarn start
```
The development server will start, and you can view the app in your browser at
```bash
http://localhost:5173.
```
## Features
- 🔍 **Search for Cities**: Type a city name to get instant weather updates.
- 🌡 **Real-Time Data**: View live temperature, humidity, wind speed, and more.
- 🕒 **Hourly Forecast**: 3-hour step forecasts for the next 5 days.
- 🌇 **Sunrise & Sunset Times**: Know when the day starts and ends.
- 🌐 **Unit Toggle**: Switch between Celsius and Fahrenheit.
## Roadmap
- [ ] 🌍 Add geolocation-based weather updates.
- [ ] 💎 Enhance UI with animations and transitions.
- [ ] ⚠️ Include weather alerts and notifications.
## Usage
- **Search**: Enter a city name in the search bar and click the 🔍 icon.
- **View Details**: Check the current weather and the 3-hour step forecast.
- **Toggle Units**: Switch between °C and °F using the temperature toggle button.
## Contact
👤 **Your Name**
- 📧 [Your Email](mailto:[email protected])
- 🖥 [GitHub Repository](https://github.com/ktabassum1809/weather-app.git)
## Acknowledgments
- 🌐 [OpenWeather API](https://openweathermap.org/api) for weather data.
- 🎨 [Tailwind CSS](https://tailwindcss.com/) for styling.
- ⚛️ [React Icons](https://react-icons.github.io/react-icons/) for elegant icons.
- 📘 [React Documentation](https://reactjs.org/) for development guidance.