Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pawantech12/weather-app-using-reactjs

A responsive weather app built with ReactJS and TailwindCSS, fetching real-time weather data from the OpenWeather API based on user searches. Fully responsive and hosted on Vercel, it displays current conditions like temperature, humidity, and weather description for any city. Free to use and open for contributions.
https://github.com/pawantech12/weather-app-using-reactjs

openweather reactjs real-time responsive tailwindcss weather-app

Last synced: about 1 month ago
JSON representation

A responsive weather app built with ReactJS and TailwindCSS, fetching real-time weather data from the OpenWeather API based on user searches. Fully responsive and hosted on Vercel, it displays current conditions like temperature, humidity, and weather description for any city. Free to use and open for contributions.

Awesome Lists containing this project

README

        

# Responsive Weather App đŸŒĻī¸

Welcome to the **Responsive Weather App**, a modern, user-friendly application built with **ReactJS** and **TailwindCSS**. This app uses the **OpenWeatherMap API** to fetch and display real-time weather data for any city searched by the user. The app is designed to be fully responsive, ensuring a seamless experience across all devices.

https://github.com/user-attachments/assets/17c3298f-8133-4656-b179-9ecde7a6da70

## Features

- 🔍 **City Search:** Enter the name of any city to get its current weather conditions.
- 🌡ī¸ **Real-time Weather Data:** Fetches up-to-date weather information such as temperature, humidity, and weather description using the OpenWeather API.
- 📱 **Fully Responsive:** Optimized for all devices, from mobile to desktop, using TailwindCSS.
- ⚡ **Fast & Efficient:** Built with ReactJS and Vite for fast performance and smooth user experience.
- 🌐 **Hosted on Vercel:** Live and accessible from anywhere.

## Live Demo

Check out the live app here: [Weather App on Vercel](https://weather-app-using-reactjs-flax.vercel.app/)
## Tech Stack

- **ReactJS:** For building the interactive user interface.
- **TailwindCSS:** For styling and creating a responsive layout with utility-first CSS.
- **OpenWeatherMap API:** To fetch real-time weather data based on the city input.
- **Vercel:** For hosting and deployment.

## Installation

To run this project locally, follow these steps:
#### 1. Clone the Repository:

```bash
git clone https://github.com/pawantech12/weather-app-using-reactjs.git
```

#### 2. Navigate to Directory:

```bash
cd weather-app-using-reactjs-master
```

#### 3. Install Dependencies:

```bash
npm install or npm i
(or `yarn install` if you prefer Yarn)
```

#### 4. Set up OpenWeather API Key:
- Create a `.env` file in the root directory.
- Add your OpenWeather API key in the following format:

```bash
VITE_APP_OPENWHEATHER_API_KEY=your_openweather_api_key
```

#### 5. Start the development server:

```bash
npm run dev (or `yarn dev`)
```

This will usually start the server on http://localhost:5173 by default.
## Usage
- Search for any city in the search bar to view its current weather conditions.
- The app will display temperature, humidity, weather description, and more.

## API
This project uses the [OpenWeatherMap API](https://openweathermap.org/api) to fetch real-time weather data. You will need to sign up for an API key to use the app.
## Contributing
Contributions are welcome! Feel free to open an issue, submit a pull request, or suggest new features or improvements.
## License

This project is free to use and does not have a license. You are free to modify, distribute, and use it for any purpose.

Enjoy the weather app and feel free to contribute! ☀ī¸đŸŒ§ī¸đŸŒŠī¸