https://github.com/shresth88/weather-forecast

This app provides accurate temperature, weather conditions, humidity, and wind speed. View forecasts based on your location, explore recent searches, and experience dynamic backgrounds that match current weather conditions.
https://github.com/shresth88/weather-forecast

api-rest bootstrap reactjs

Last synced: 3 months ago
JSON representation

This app provides accurate temperature, weather conditions, humidity, and wind speed. View forecasts based on your location, explore recent searches, and experience dynamic backgrounds that match current weather conditions.

• Host: GitHub
• URL: https://github.com/shresth88/weather-forecast
• Owner: Shresth88
• Created: 2025-03-30T10:59:30.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-30T11:55:21.000Z (over 1 year ago)
• Last Synced: 2025-03-30T12:19:58.404Z (over 1 year ago)
• Topics: api-rest, bootstrap, reactjs
• Language: JavaScript
• Homepage: https://weather-forecast-wfhk.vercel.app/
• Size: 3.51 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🌤 Weather Forecast App

## 📌 Overview

The **Weather Forecast App** is a simple yet powerful web application that provides real-time weather updates for any location worldwide. It fetches data from the OpenWeather API and displays temperature, weather conditions, humidity, wind speed, and date with a dynamic UI. The app also keeps a history of recent searches and allows users to revisit them quickly.

## 🚀 Features

- 🌎 Search weather by city name

- 🌡 Displays real-time temperature & weather conditions

- 💨 Shows humidity and wind speed

- 🕒 Displays local date & time

- 📜 Recent search history with quick access

- 🎨 Dynamic background changes based on weather conditions

- ⚡ Fast and responsive UI

## 🖼 Screenshots

![Screenshot (169)](https://github.com/user-attachments/assets/2741d180-3c8f-49ca-bf1d-d1ef2dddeead)

![Screenshot 2025-03-30 170000](https://github.com/user-attachments/assets/3dd7c5d0-1cac-4d26-a617-d587132b581b)

![Screenshot 2025-03-30 170030](https://github.com/user-attachments/assets/923ada64-4db4-45af-ab45-3c0a92f20f32)

![Screenshot 2025-03-30 170045](https://github.com/user-attachments/assets/8a968b69-62f1-4dce-a3a9-c2a418bd0ad4)

![Screenshot 2025-03-30 170110](https://github.com/user-attachments/assets/3632ef40-ec6d-481c-83d4-13ff3025b0cb)

![Screenshot (167)](https://github.com/user-attachments/assets/004fd796-e58f-49f1-82c2-f3f63ba258fd)

![Screenshot 2025-03-30 170243](https://github.com/user-attachments/assets/5020ab5c-8907-4d9e-b90f-856b159c9147)

![Screenshot (168)](https://github.com/user-attachments/assets/1e4a9780-b0fc-456f-a98c-c06bd9602bfa)

## 🛠 Tech Stack

- **Frontend:** React.js, CSS

- **Backend:** Node.js (if needed for API proxying)

- **API:** OpenWeather API

- **Icons:** Tabler Icons

- **Date Handling:** Day.js

## 📦 Installation

```sh

# Clone the repository

git clone https://github.com/yourusername/weather-app.git

cd weather-app

# Install dependencies

npm install

# Start the application

npm run dev

```

## 🔑 API Configuration

1. Get your API key from [OpenWeather](https://openweathermap.org/)

2. Create a file named `.env` in the project root

3. Add the following line:

   ```env

   REACT_APP_API_KEY=your_api_key_here

   ```

## 📌 Usage

1. Open the app in the browser (`http://localhost:5173/` by default)

2. Enter a city name in the search bar and press Enter

3. View real-time weather updates with dynamic background changes

4. Access previously searched cities via the sidebar

## 🤝 Contributing

Feel free to submit a pull request if you have any improvements or new feature ideas! 🚀

## 📜 License

This project is licensed under the MIT License.

---

💙 Built with love by [Shresth Sharma](https://github.com/Shresth88)