A modern, elegant weather application built with React and Redux that provides real-time weather information and forecasts for any location worldwide.
- 🌍 Location-Based Weather: Automatically detects your current location and displays local weather
- 🔍 City Search: Search for weather information in any city worldwide
- 📊 Weather Charts: Visual representation of temperature and weather trends
- 📅 7-Day Forecast: Detailed daily weather forecasts
- 🎨 Modern UI: Clean, responsive design with beautiful typography
- ⚡ Fast Performance: Built with Vite for lightning-fast development and production builds
- 🌡️ Detailed Metrics: Temperature, humidity, wind speed, and more
- Node.js (v14 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/Krishnx21/Weather.git cd Weather -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser
Navigate to
http://localhost:5173(or the port shown in your terminal)
To create an optimized production build:
npm run buildTo preview the production build locally:
npm run preview- React 18.2.0 - Modern UI library with hooks
- React DOM 18.2.0 - React rendering for web
- Redux Toolkit 2.0.1 - Simplified Redux state management
- React Redux 9.0.4 - Official React bindings for Redux
- Vite 5.0.8 - Next-generation frontend tooling
- @vitejs/plugin-react 4.2.1 - Official React plugin for Vite
- Custom CSS with modern design principles
- Google Fonts (DM Sans & Instrument Serif)
- Open-Meteo API - Free weather API for real-time weather data
Weather/
├── src/
│ ├── components/ # React components
│ │ ├── CurrentWeather.jsx
│ │ ├── CurrentWeather.css
│ │ ├── Forecast.jsx
│ │ ├── Forecast.css
│ │ ├── SearchBar.jsx
│ │ ├── SearchBar.css
│ │ ├── WeatherChart.jsx
│ │ └── WeatherChart.css
│ ├── store/ # Redux store and slices
│ │ └── weatherSlice.js
│ ├── utils/ # Utility functions
│ ├── App.jsx # Main App component
│ ├── App.css # App styles
│ ├── main.jsx # Application entry point
│ └── index.css # Global styles
├── index.html # HTML template
├── package.json # Project dependencies
├── vite.config.js # Vite configuration
└── README.md # Project documentation
Allows users to search for weather in any city. Features a clean input design with search functionality.
Displays the current weather conditions including:
- Temperature
- Weather description
- Location name
- Local time
Shows a 7-day weather forecast with daily high/low temperatures and weather conditions.
Visual chart representation of weather data trends over time.
The project uses Vite with React plugin. Configuration can be modified in vite.config.js.
State management is handled through Redux Toolkit. The weather slice manages:
- Weather data fetching
- Loading states
- Error handling
- Location information
This app uses the Open-Meteo API for weather data:
- No API key required
- Free and open-source
- Reliable weather forecasts
- Global coverage
The application is fully responsive and works seamlessly across:
- 💻 Desktop computers
- 📱 Mobile phones
- 📲 Tablets
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
Krishnx21
- GitHub: @Krishnx21
- Weather data provided by Open-Meteo
- Icons and design inspiration from modern weather applications
- Built with ❤️ using React and Redux
If you have any questions or run into issues, please open an issue on GitHub.
Made with ☀️ and ❄️ by Krishnx21