Weather-Application

Weather App

Web application to show the current and upcoming week weather forecast.

Want to see live preview »

✧ Getting Started ✧ Installing ✧ Author ✧

This project involves crafting a web application that showcases a weather forecast using data fetched from the OpenWeatherMap API. Users can effortlessly search for specific global locations or allow automatic detection of their current location (requires location permission), presenting vital weather details.

Highlighted features include the capability to store weather data in both the Redux store and session storage, minimizing reliance on network requests. Users can search for weather details by city, automatically detect and display current weather based on location, view a location map, synchronize data for real-time updates, receive toast notifications for actions, access a pop-up modal for an in-depth seven-day forecast, and experience smooth zoom-in and zoom-out animations. The application is responsive across all screen sizes.

To utilize the app, simply input a city name and click on search/press Enter. Alternatively, click on the "Your Location Weather" button. Upon clicking the button, the app checks if data is available in session storage. If not, it initiates a network request; otherwise, it retrieves data from session storage.

🚀 Features

Saving the weather data in redux-store and session-storage to reduce the dependency of network requests
Search weather details according to the city
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
Responsive for every screen size.

</>

Getting Started

This project was built using React v 17.0.2, Redux v 4.1.2, Chakra UI, CSS and Rest API. It is a web application and for running on your local environment you should follow these guidelines.

Prerequisites

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/Meetmendapara09/Weather-Application.git

Open terminal on your workspace with

cd /home/workspace/Weather-App

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 run dev

Tool used on this project

Visual Studio Code

Contact

If you want to contact me, you can reach me through below handles.

Show your support

Give a ⭐️ if you like this project!

Cosmicwav/Weather-Application