README.md

weather-app-react

City-based weather dashboard powered by React, Vite, and OpenWeather API.

weather-app-react — README

Lightweight weather application built with React + Vite that lets users search a city and view current temperature, min/max values, humidity, and feels-like conditions.

Table of Contents

• 🚀 Project intro
• 📁 Project structure
• ⭐ Differentiators
• 🔧 Features
• 🧰 Tech stack
• ⚙️ Install methods
  • 📦 npm / Node
• 🔐 Environment variables
• 📜 Available scripts
• 🚀 Deployment notes
• 🤝 Contributing
• 📄 License

🚀 Project intro

weather-app-react provides:

• City-based weather search with live API calls
• Current temperature, min/max temperature, and humidity details
• Weather condition summary with feels-like value
• Weather-based visual state (hot/cold/rain imagery + icons)
• Basic invalid-location handling in the search form

This project is ideal as an MVP weather dashboard and frontend API integration reference.

📁 Project structure

weather-app-react/
├── public/
│   └── weather.svg
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   ├── InfoBox.css
│   ├── InfoBox.jsx
│   ├── main.jsx
│   ├── SearchBox.css
│   ├── SearchBox.jsx
│   ├── WeatherApp.css
│   └── WeatherApp.jsx
├── eslint.config.js
├── index.html
├── package.json
├── Procfile
├── README.md
├── vercel.json
└── vite.config.js

⭐ Differentiators

• Simple component split: search input + weather info card
• API config via Vite environment variables
• Friendly visuals mapped to weather conditions
• Ready for static deployment workflows (vite build)

🔧 Features

Core features

Feature	Status	Notes
City weather search	✅ Current	Fetch weather by city name
Temperature metrics	✅ Current	Shows current/min/max in °C
Weather details	✅ Current	Humidity, feels-like, condition text
Dynamic weather card	✅ Current	Visual/image changes based on weather data
Error handling	✅ Current	Displays message for invalid city input

Weather display behavior

• Rain/Thunder view appears when humidity is high and temperature is warm
• Sunny view appears for warm weather
• Cold view appears otherwise

🧰 Tech stack

• Framework: React 19 + Vite 6
• Language: JavaScript (ES Modules)
• UI: MUI (@mui/material, @mui/icons-material)
• Styling: CSS files per component
• API: OpenWeather current weather endpoint
• Hosting: Vercel-compatible static output

⚙️ Install methods

📦 npm / Node

Prerequisites:

• Node.js 18+
• npm 9+

git clone <your-repo-url> weather-app-react
cd weather-app-react
npm install

1. Create .env file in the project root (see Environment variables).

2. Start development server:

npm run dev

Open http://localhost:5173.

🔐 Environment variables

Create a .env file in the project root:

VITE_API_URL="https://api.openweathermap.org/data/2.5/weather"
VITE_API_KEY="your_openweather_api_key"

Notes:

• VITE_API_URL should support q, appid, and units=metric query parameters.
• VITE_API_KEY is required for successful weather requests.

📜 Available scripts

npm run dev              # start Vite dev server
npm run build            # production build in dist/
npm run preview          # preview production build locally
npm run start            # serve dist/ with serve
npm run lint             # lint codebase
npm run heroku-postbuild # build step for Heroku-style deploy

🚀 Deployment notes

• Includes vercel.json for static build output and SPA fallback.
• Build command: npm run build
• Output directory: dist
• Configure VITE_API_URL and VITE_API_KEY in deployment environment variables.

🤝 Contributing

• Fork the repository and create a focused branch.
• Keep pull requests small and include verification steps.
• Never commit secrets or API keys.

📄 License

No license file is currently present in this repository. Add a LICENSE file (for example, MIT) if you plan to distribute it publicly.