A lightweight and elegant ReactJS application to provide real-time weather updates for any city, state, or country using the OpenWeather API.
- Real-Time Weather Information: Get up-to-date weather details for any location worldwide.
- Search Any Location: Search for weather data by city, state, or country.
- Simple and Cool UI: Designed with a user-friendly and clean interface.
- Responsive Design: Fully optimized for mobile, tablet, and desktop devices.
- Error Handling: Graceful error messages when no results are found or if an API issue occurs.
Clone this repository to your local machine:
git clone https://github.com/sanjaydeveloper15/react-weather-app.git
cd react-weather-appInstall the required packages using your preferred package manager:
npm install
# or
yarn installSign up at OpenWeather API and get your API key. Replace the placeholder API key in the project configuration file with your own.
Start the server to run the app locally:
npm start
# or
yarn start
# or
pnpm start
# or
bun startOpen your browser and navigate to: http://localhost:8001
- Frontend: ReactJS, CSS Modules
- API: OpenWeather API
- Tooling: Node.js, Webpack/Babel
- Open the application in your browser.
- Enter a city, state, or country name in the search bar.
- View the weather information for the entered location, including temperature, humidity, and conditions.
If you enjoyed this project or found it useful:
- ⭐️ Star this repository on GitHub to show your support!
- 📢 Share it with your friends, colleagues, or on social media.
- 💬 Feedback? Reach out to me via Twitter.
- Visual Studio Code: The preferred IDE for working on this project.
- Education Funda (YouTube): Educational tutorials to expand your knowledge.
- Sanjay Kumar (Portfolio): Learn more about the developer.
This app can be deployed on any platform that supports static hosting or React apps. Some suggestions:
- Vercel: Zero-configuration deployment for Next.js, React, and more.
- Netlify: Easy-to-use static site hosting.
- GitHub Pages: Free hosting for personal projects.
- Add Forecasts: Extend functionality to show 7-day or hourly weather forecasts.
- Multiple Language Support: Enable multi-language support for a broader audience.
- Dark Mode: Introduce a dark theme for better user experience at night.
- Unit Selection: Allow users to toggle between Celsius and Fahrenheit.
This project is licensed under the MIT License. See the LICENSE file for details.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page or submit a pull request.
Developed by Sanjay Kumar.
- Portfolio: https://sanjaydeveloper.netlify.app
- Twitter: @sanjaykumarwebs