A beautiful, responsive weather application built with React, TypeScript, and Tailwind CSS that displays current and forecasted weather conditions.
- Real-time weather data from OpenWeatherMap API
- 5-day weather forecast with temperature trends
- Location-based weather (with user permission)
- Search any city worldwide
- Detailed weather information:
- Current temperature (℃/℉ toggle)
- "Feels like" temperature
- Humidity, wind speed, pressure
- Sunrise/sunset times
- UV index
- Visibility
- Responsive design - works on mobile, tablet, and desktop
- Beautiful UI with weather-appropriate backgrounds
- Loading states and error handling
- Frontend: React 18 with TypeScript
- Styling: Tailwind CSS
- State Management: React Context API
- Build Tool: Vite
- API: OpenWeatherMap (Current + 5-day Forecast)
- Deployment: Vercel (or your hosting provider)
Check out the live version: https://weather.sandboxas.lt/
- Node.js (v16 or higher recommended)
- npm or yarn
- OpenWeatherMap API key (free tier available)
- Clone the repository:
git clone https://github.com/Daigtas/weather-app.git Navigate to the project directory: bash
cd weather-app
Install dependencies: bash
npm install
Create a .env file in the root directory: env
VITE_OPENWEATHER_API_KEY=your_api_key_here
Start the development server: bash
npm run dev
Open http://localhost:5173 in your browser
Available Scripts 📜
npm run dev: Starts development server
npm run build: Creates production build
npm run lint: Runs ESLint
npm run preview: Previews production build locally
npm test: Runs tests (if available)
Contributing 🤝
Contributions are welcome! Please:
Fork the repository
Create a new branch for your feature
Commit your changes
Push to the branch
Open a pull request
License 📄
This project is licensed under the MIT License - see the LICENSE file for details. Acknowledgements 🙏
Weather data provided by OpenWeatherMap
Icons from React Icons
Inspired by various weather applications