Skip to content

⛈A simple and responsive Weather Application using openweathermap API build with react js which gives current weather details of the cities across the world.

License

Notifications You must be signed in to change notification settings

SubramanyaKS/Weather-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⛈ Weather App

A simple weather app built with React.js and utilizes the OpenWeatherMap API to fetch and display weather information for a given location.

API

The Application Programming Interface is a set of rules and regulations and standards that allows software programs to interact with each other. It acts as a middleman between two applications, allowing them to exchange data and information

Features

  • The application features a robust search functionality for user-friendly access.
  • Ensuring a seamless experience, the UI is responsive and adapts to various devices and screen sizes.
  • Users can expect precise and reliable results when utilizing the search feature.
  • Current weather conditions, encompassing temperature, humidity, wind speed, and a detailed weather description, are prominently displayed.
  • The application efficiently retrieves weather data by either detecting the user's location or accepting a manually entered city name.
  • In beta stage, the voice search option provides an innovative and hands-free alternative for user interaction.

Technology Used

  • React
  • Bootstrap
  • OpenWeathermap API
  • VS Code

API Details

the details used from the openweathermap API is follows:

  1. id City ID.
  2. name City name.
  3. sys.country Country code (GB, JP etc.)
  4. main.temp Temperature. Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
  5. main.feels_like Temperature. This temperature parameter accounts for the human perception of weather. Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
  6. main.pressure Atmospheric pressure (on the sea level, if there is no sea_level or grnd_level data), hPa
  7. main.humidity Humidity, %
  8. main.temp_min Minimum temperature at the moment. This is minimal currently observed temperature (within large megalopolises and urban areas). Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
  9. main.temp_max Maximum temperature at the moment. This is maximal currently observed temperature (within large megalopolises and urban areas). Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
  10. coord.lon City geo location, longitude.
  11. coord.lat City geo location, latitude.
  12. weather.description Weather condition within the group. You can get the output in your language.
  13. weather.icon Weather icon id

Pre Requisite

  • Install git
  • Installation of NodeJS is mandatory with NPM
  • Login in to Openweathermap api website to get your API key

Run and Setup

  1. Fork the Project and clone Repository using git clone
git clone https://github.com/SubramanyaKS/Weather-app.git
  1. Navigate to the project directory:
cd Weather-app
  1. Install all dependency in package.json
npm install
  1. Obtain an API key from OpenWeatherMap:

    Visit the OpenWeatherMap website and sign up for an account.After signing in, go to your account dashboard and generate an API key.

  2. Create a .env file in the root directory of the project and add your API key:

REACT_APP_API_KEY=<Your openwearhermap API Key>
  1. Start the development server using command:
npm start
  1. Open your browser and navigate to http://localhost:3000 to see the app running.

Contribution

We welcome contributions! If you'd like to contribute to Weather-app, please follow our Contribution Guidelines.

Deploy

Weather App is live and ready for you to explore! Visit WeatherApp

Author

Subramanya K S

LICENSE

This project is distributed under MIT License read LICENSE file for more details .

Credits

Openweathermap API Fontawesome Icons

If you like the project 🌟 the repository.

Thank you with ❤ Subramanya KS

About

⛈A simple and responsive Weather Application using openweathermap API build with react js which gives current weather details of the cities across the world.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published