Skip to content

Latest commit

 

History

History
159 lines (106 loc) · 5.79 KB

README.md

File metadata and controls

159 lines (106 loc) · 5.79 KB
Raw

WEATHER APP


A web application to show the weather forcast details of 7 days including current day of your current location & here you will be able to search for all the weather details of any city with search sugesstions of cities.


Tech Stack

<>REACT<> || <>REDUX<> || <>REDUX-THUNK<> || <>REACT-APEXCHARTS<> || <>REACT-TAOSTIFY<> || <>CHAKRA-UI<>
<>GOOGLE-MAP-API<> || <>COUNTRY-STATE-CITY PACKAGE<> || <>OPEN-WEATHER-API<> || <>LOCAL-STORAGE<> || <>REST API<>

Want to see live preview »


✧ Report Bug ✧ Getting Started ✧ Installing ✧ Author ✧


This project is about building a web application to show a weather forecast using weather API from external services Open Weather APi . Here you will be able to search for a specific location with the search suggesstions in the world and also it will automatically detect your current location in the beginning (for that you need to allow location) and will display all the important weather details align with time, date, weather image and sunrise sunset graph and temperature graph.
It have some cool features like save the weather data in redux-store and local-storage to reduce the dependency of network requests, search weather details according to the city with search suggesstions, detect your current location for displaying weather data, shows a map of that location, sync data to get the latest updated details of the current weather, toast notification for every action, pop up modal to display extra details of seven-day forecast weather, cool zoom-in zoom-out animations, sunrise sunset and temperature graph and responsive for every screen size.
To use the app, type a name of the city, you will get sugesstions select the suggesstion it will take that input and will show the weather details of searched location. If you want to see your location weather data again then just click on current location icon which is at the left top of the application.

Features:

  • Saving the weather data in redux-store and local-storage to reduce the dependency of network requests.
  • Search weather details according to the city with search suggestions of city.
  • Detect your current location for displaying weather data.
  • Shows a map of that location.
  • Shows graph for sunrise sunset and temperature .
  • Sync data to get the latest updated details of the current weather.
  • Toast notification for every action.
  • Displaying of seven-day forecast weather.
  • Cool zoom-in zoom-out animations.
  • Shows time with real time updating and weather showcasing image which fetched from open-weather-api.
  • Responsive for every screen size.

Detect your current location for displaying weather data




Search weather details according to the city with search suggestions of city



Displaying of seven-day forecast weather



Responsive for every screen size



Prerequisites

  • NPM

Setup

The project repository can be found in GitHub link or just clone the project using this command.

Using HTTPS

# git clone  https://github.com/Ankit-Mishra07/weather-webApplication.git
  • Open terminal on your workspace with
cd /home/workspace/weather-webApplication/client

Install

Install NPM

Check that you have node and npm installed

To check if you have Node.js installed, run this command in your terminal:

node -v

To confirm that you have npm installed you can run this command in your terminal:

npm -v

To install all the dependences of the project, run the following command:

npm install

To run the application, run the following command:

npm start

Tools used on this project

  • Visual Studio Code

Author

👤 Ankit Mishra

🤝 Contributing

This project was created for educational purposes as part of the React web development curriculum; contributing is not accepted.

Show your support

Give a ⭐️ if you like this project!