WeatherWeb is a React + Vite weather application that fetches real-time weather data from OpenWeatherMap API and displays a weather card UI with search functionality.
- React 19 + Vite application
- Real-time weather data integration with OpenWeatherMap API
- Weather card interface displaying condition, temperature, location, humidity, and wind speed
- Search functionality to look up weather by city name
- Dynamic weather icons mapped to weather conditions
- Responsive UI with local asset-based icons
- Environment-based API key configuration
src/main.jsx— React app entry pointsrc/App.jsx— Root app componentsrc/components/Weather.jsx— Weather card component with API integration and search logicsrc/components/WeatherIcons.jsx— Weather icon mapping configurationsrc/index.css/src/components/Weather.css— global and component stylingpublic/— static public assetspackage.json— project dependencies and scripts
- Node.js installed
- OpenWeatherMap API key (get it from https://openweathermap.org/api)
- Install dependencies:
npm install- Create a
.env.localfile in the project root and add your API key:
VITE_API_KEY=your_openweathermap_api_key_here- Run the development server:
npm run devAPP link: https://weather-forecast-web-selvet.vercel.app
npm run dev— Start the development servernpm run build— Create a production buildnpm run preview— Preview the production build locallynpm run lint— Run ESLint to check code quality
- The app fetches default weather data for Manisa, Turkey on initial load
- Users can search for weather in any city by entering the city name in the search bar
- The app uses OpenWeatherMap's Geocoding API to convert city names to coordinates
- Weather data is retrieved based on coordinates and displayed in real-time
- React 19 — UI library
- Vite — Build tool and dev server
- React Icons — Icon library
- OpenWeatherMap API — Weather data provider
- ESLint — Code quality tool