https://github.com/viboverse/react-weather-app
Weather dashboard with search and forecast powered by a public weather API.
https://github.com/viboverse/react-weather-app
api css html javascript openweather-api react tailwindcss webapp
Last synced: about 2 months ago
JSON representation
Weather dashboard with search and forecast powered by a public weather API.
- Host: GitHub
- URL: https://github.com/viboverse/react-weather-app
- Owner: viboverse
- Created: 2025-08-30T17:44:59.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2026-01-02T14:22:08.000Z (6 months ago)
- Last Synced: 2026-01-08T20:47:16.810Z (6 months ago)
- Topics: api, css, html, javascript, openweather-api, react, tailwindcss, webapp
- Language: JavaScript
- Homepage: https://react-weather-app-vtjz.vercel.app/
- Size: 3.48 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Weather App
Fast, minimal weather app built with React and Vite, styled with Tailwind CSS and animated using Motion. It shows the current conditions and a 5‑day forecast from OpenWeatherMap. Runs on Node 18+ and is deployed on Vercel.
## ✨ Features
- Current weather: temperature, humidity, wind, and conditions
- 5‑day forecast with daily breakdown
- City search with friendly errors
- Responsive layout with subtle animations
## 🛠️ Tech stack (versions)
- React 19.1.0
- Tailwind CSS 4.1.11
- Motion 12.23.6 (Framer Motion for React 19)
- Vite 7.0.4
- Tooling: ESLint 9.31.0, Prettier 3.6.2
- Runtime: Node 18.18.0+, npm 9.0.0+
## 🚀 Installation
Prerequisites
- Node.js 18.18.0 or newer
- An OpenWeatherMap API key
Clone and run
```powershell
# Clone
git clone https://github.com/viboverse/react-weather-app.git
cd react-weather-app
# Install deps
npm install
# Configure environment
# Create .env and add your API key
"VITE_API_KEY=YOUR_OPENWEATHER_API_KEY" | Out-File -Encoding utf8 .env
# Start dev server
npm run dev
```
Build and preview
```powershell
npm run build
npm run preview
```
## 📸 Screenshots
## 🙏 Acknowledgments
- OpenWeatherMap API for weather data
- Shields.io for the badges
- Vercel for hosting
---
**Built by [Vahab Afsharian](https://github.com/viboverse)**