A sleek and modern weather app built with React and Vite that allows users to check current weather conditions for any city around the world.
- 🔎 Search for any city’s weather
- 📍 Weather info includes:
- Temperature in °C
- Weather condition (Rain, Clouds, etc.)
- Date display
- Custom weather icons
- 🎯 Built with React + Vite
- 🎨 Fully responsive and modern UI
- 💡 Clean component structure
- 🔐 Uses
.env
file to securely store API keys
Tool | Purpose |
---|---|
React | Frontend library |
Vite | Development server + build tool |
CSS3 | Styling |
OpenWeatherMap API | Weather data API |
git clone https://github.com/your-username/react-weather-app.git
cd react-weather-app
npm install
touch .env
Add your OpenWeatherMap API key like this:
VITE_API_KEY=your_openweathermap_api_key_here
npm run dev
Then open your browser at: http://localhost:5173/
OpenWeatherMap API
- URL: https://api.openweathermap.org
- Format:
GET https://api.openweathermap.org/data/2.5/weather?q=CityName&appid=API_KEY&units=metric
- User enters a city name → hits Search
- App fetches real-time weather data from OpenWeatherMap API
- Displays:
- Date
- City name
- Weather icon based on condition
- Temperature in °C
- Weather description