A modern and responsive weather application that provides real-time weather updates, built using React and styled with Tailwind CSS. This app offers a seamless user experience with features like Dark/Light Mode, local time display, and full responsiveness across all devices. Weather data is fetched from the OpenWeather API.
- 🌞 Dark and Light Mode for a personalized user experience.
- 🕒 Displays your local time along with the weather.
- 📱 Fully responsive design, optimized for all device sizes.
- 🌍 Provides accurate weather information using the OpenWeather API.
- 🌡️ Includes temperature, weather condition, and more.
- ⚡ Fast and lightweight thanks to React and Tailwind CSS.
- React: JavaScript library for building the user interface.
- Tailwind CSS: Utility-first CSS framework for modern styling.
- OpenWeather API: Provides real-time weather data.
Follow these steps to run the Weather App locally:
- Clone the repository:
git clone https://github.com/your-username/weather-app.git
- Navigate to the project directory:
cd weather-app - Install dependencies:
npm install
- Create a
.envfile in the root directory and add your OpenWeather API key:REACT_APP_WEATHER_API_KEY=your_api_key_here
- Start the development server:
npm start
- Open your browser and go to:
http://localhost:3000
- Open the application in your browser.
- Allow location access for accurate weather updates.
- Toggle between Dark Mode and Light Mode to match your preference.
- Enjoy the smooth, responsive interface and up-to-date weather information.
- 🌐 Add support for multiple languages.
- 🗺️ Integrate a map to show weather in different locations.
- 📊 Provide detailed weather forecasts for the week.
Contributions are always welcome!
Feel free to fork the repository and create a pull request with your changes.
This project is licensed under the MIT License.
- React
- Tailwind CSS
- OpenWeather API
- Font Awesome for icons.
If you have any questions or suggestions, feel free to reach out:
- GitHub: Javeriya Saleem
- LinkedIn: Javeriya Saleem