https://github.com/arnobt78/live-weather--react
Weather App is a React-Vite weather project, using OpenWeather API, display the Weather Status, Temperature, Humidity, Wind of any City in the world, and deploy on Vercel.
https://github.com/arnobt78/live-weather--react
javascript openweather-api openweathermap-api react react-vite recatjs vercel-deployment weather-data weather-forecast weather-station
Last synced: 6 months ago
JSON representation
Weather App is a React-Vite weather project, using OpenWeather API, display the Weather Status, Temperature, Humidity, Wind of any City in the world, and deploy on Vercel.
- Host: GitHub
- URL: https://github.com/arnobt78/live-weather--react
- Owner: arnobt78
- Created: 2024-09-27T13:51:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-30T23:55:10.000Z (6 months ago)
- Last Synced: 2025-07-01T00:38:04.218Z (6 months ago)
- Topics: javascript, openweather-api, openweathermap-api, react, react-vite, recatjs, vercel-deployment, weather-data, weather-forecast, weather-station
- Language: JavaScript
- Homepage: https://weather-arnob.vercel.app/
- Size: 374 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather Live - ReactVite Web Application
  
---
## Project Summary
**Weather-ReactVite** is a fast, minimal, and modern weather web application built with React and Vite. It lets users search any city in the world and view up-to-date weather details including temperature, humidity, and wind information using the [OpenWeather API](https://openweathermap.org/). Designed for learning and demonstration, this project is ideal for beginners and intermediates who want to understand how to build and deploy a real-world React app with API integration and Vercel deployment.
- **Live-Demo:** [https://weather-arnob.vercel.app/](https://weather-arnob.vercel.app/)
---
## Table of Contents
1. [Project Summary](#project-summary)
2. [Features](#features)
3. [Live Demo](#live-demo)
4. [Technology Stack](#technology-stack)
5. [Project Structure](#project-structure)
6. [Installation & Setup](#installation--setup)
7. [How It Works](#how-it-works)
8. [API Integration](#api-integration)
9. [Usage Examples](#usage-examples)
10. [Learning Points](#learning-points)
11. [Conclusion](#conclusion)
---
## Features
- 🌦️ **Real-Time Weather Data** – Fetches live weather info for any city worldwide.
- 🔍 **City Search** – Users can search for any city and get instant results.
- 🌡️ **Details Displayed** – Temperature, humidity, wind speed, and weather status.
- ⚡ **Fast & Modern** – Built using React + Vite for fast HMR and lightweight builds.
- 📱 **Responsive Design** – Looks great on both desktop and mobile.
- 🚀 **Deployed on Vercel** – Easy one-click deployment and live demo.
- 💡 **Great for Learning** – Clean code, API usage, and React best practices.
---
## Technology Stack
- **Frontend Framework**: [React](https://react.dev/)
- **Build Tool**: [Vite](https://vitejs.dev/)
- **API**: [OpenWeather API](https://openweathermap.org/)
- **Deployment**: [Vercel](https://vercel.com/)
- **Other Tools**: ESLint, Babel or SWC for Fast Refresh, CSS
---
## Project Structure
```
Weather--ReactVite/
│
├── .eslintrc.cjs # Linting configuration
├── .gitignore # Git ignore file
├── index.html # Main HTML file
├── package.json # NPM dependencies and scripts
├── package-lock.json # NPM lock file
├── vite.config.js # Vite configuration
├── README.md # Project documentation
│
└── src/
├── App.jsx # Main React component
├── main.jsx # App entry point
├── index.css # Global CSS
├── assets/ # Images, icons, etc
└── Components/ # Reusable React components
```
---
## Installation & Setup
Follow these steps to get the project running locally:
### 1. Install Node.js
Download and install Node.js from [nodejs.org](https://nodejs.org/en/).
---
### 2. Clone the Repository
```bash
git clone https://github.com/arnobt78/Weather--ReactVite.git
cd Weather--ReactVite
```
---
### 3. Install Dependencies
```bash
npm install
```
This installs all required packages from `package.json`.
---
### 4. Get OpenWeather API Key
- Register for free at [OpenWeather](https://openweathermap.org/).
- Get your API key from your dashboard.
---
### 5. Run the App Locally
```bash
npm run dev
```
Visit [http://localhost:5173/](http://localhost:5173/) in your browser.
---
## How It Works
1. **Search for a City**: Type a city name and submit.
2. **API Request**: The app fetches weather data for the city using OpenWeather API.
3. **Display Data**: Weather details (temperature, humidity, wind, status) are shown.
4. **Responsive UI**: The design adapts to your device for a seamless experience.
---
## API Integration
This app uses the **OpenWeather API** to fetch weather data. You’ll need an API key to use it.
**Basic fetch example:**
```js
const apiKey = "YOUR_API_KEY";
const url = `https://api.openweathermap.org/data/2.5/weather?q=London&appid=${apiKey}&units=metric`;
fetch(url)
.then(response => response.json())
.then(data => {
// Use data.main.temp, data.weather[0].description, etc.
});
```
---
## Usage Examples
### Example: Main Weather Fetch Function
```jsx
async function fetchWeather(city) {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`
);
const data = await response.json();
// Display data.main.temp, data.weather[0].description, etc.
}
```
### Example: Simple Weather Card Component
```jsx
function WeatherCard({ city, temp, humidity, wind, status }) {
return (
{city}
{status}
Temperature: {temp}°C
Humidity: {humidity}%
Wind: {wind} m/s
);
}
```
---
## Learning Points
- **React Fundamentals**: State, props, component structure, hooks.
- **API Calls**: Using `fetch`/`async-await` to integrate remote APIs.
- **Vite Tooling**: Fast development, hot reloading, and minimal config.
- **Component-Based Design**: Modular UI for easy extension and maintenance.
- **Environment Variables**: How to safely use API keys locally.
- **Deployment**: How to publish your app with Vercel.
---
## Keywords
React, Vite, OpenWeather, Weather App, API Integration, JavaScript, Frontend, Web Development, Vercel Deployment, Learning Project, Beginner Friendly
---
## Conclusion
This project demonstrates how to build a simple, powerful, and modern weather web app using React and Vite. It's perfect for learning about React, working with APIs, and deploying frontend apps. Feel free to fork, modify, and use it as your own weather dashboard or as a starter for more advanced projects.
---
## References
- [OpenWeather API Documentation](https://openweathermap.org/current)
- [React Documentation](https://react.dev/)
- [Vite Documentation](https://vitejs.dev/)
- [Vercel Documentation](https://vercel.com/docs)
---
## Happy Coding! 🚀
Thank you for checking out this project! If you have suggestions or find it helpful, feel free to star the repo and share it with others.
**Happy Coding!** 😊
---