A modern, responsive weather application built with React, Vite and Material UI(MUI) that provides real-time weather information through a clean and user-friendly interface.
Weather App is a responsive web application developed using React.js and vite.
The application allows users to search for a location and view relevant weather information based on your city. Experience dynamic visuals with condition-based card images that change with the weather, bringing every forecast to life through a simple, clean, and intuitive interface 🌧️☀️❄️.
The project was built to practice modern React development, API integration, component-based architecture, responsive UI design, and frontend project organization.
Search for weather information by entering a city or location.
Displays important weather information such as:
- 🌡️ Temperature
- 🌤️ Weather condition
- ❄️ Minimum Temperature
- ☀️ Maximum Temperature
- 💧 Humidity
| Technology | Purpose |
|---|---|
| ⚛️ React.js | Building the UI and components |
| ⚡ Vite | Development server and build tool |
| 🎨 CSS3 | Custom styling and responsive design |
| 🧩 Material UI (MUI) | Pre-built UI components and interface elements |
| 🧱 HTML5 | Application structure |
| 🌐 WeatherMap API | Fetching weather data |
- Open the Weather App.
- Enter the name of a city or location.
- Submit the search.
- The application sends a request to the weather API.
- Weather information is retrieved.
- The UI displays the weather details.
While developing this project, I practiced and improved my understanding of:
- ⚛️ React component architecture
- 🪝 React Hooks
- 🔄 State management
- 🌐 API integration
- 🧩 Pre-built UI components and interface elements
- 📡 Asynchronous JavaScript
- 🎨 CSS responsive design and animations
- ⚡ Vite development workflow
- 🐛 Error handling
Possible improvements for future versions include:
- 🌡️ Add detailed hourly forecasts
- 📅 Add 5–7 day weather forecasts
- 🌙 Add dark/light mode
- 🌧️ Add weather animations
- ⭐ Add favorite locations
- 🕒 Add search history
weather-app/
│
├── public/
│ └── vite.svg
│
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── App.jsx
│ ├── AppAssets.js
│ └── index.css
│ ├── main.jsx
│ └── informationCard.css
│ ├── informationCard.jsx
│ └── searchbox.css
│ ├── searchBox.jsx
│ └── weatherApp.css
│ ├── weatherApp.jsx
│
├── .gitignore
├── .eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── README.md
Before running the project, make sure you have the following installed:
- 🟢 Node.js — JavaScript runtime environment
- 📦 npm — Package manager for installing dependencies
- 🐙 Git — Version control system for cloning and managing the repository
You can verify your installations using:
node --version
npm --version
git --versiongit clone https://github.com/saif-08/weatherAppcd weatherAppnpm installnpm run devhttp://localhost:5173
Open the URL in your browser to use the application.
This project is licensed under the MIT License.
You are free to use, modify, and distribute this project according to the terms of the license.
💻 MERN Stack Developer 🚀 Passionate about building modern web applications 📚 Continuously learning and improving development skills
If you found this project useful or interesting, consider giving it a ⭐ on GitHub.
It helps support the project and motivates me to build more projects! 🚀
Made with ❤️ using React + Vite
🌤️ Weather App • Built for learning • Built for the portfolio