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.
<>REACT<> || <>REDUX<> || <>REDUX-THUNK<> || <>REACT-APEXCHARTS<> || <>REACT-TAOSTIFY<> || <>CHAKRA-UI<>
<>GOOGLE-MAP-API<> || <>COUNTRY-STATE-CITY PACKAGE<> || <>OPEN-WEATHER-API<> || <>LOCAL-STORAGE<> || <>REST API<>
✧
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.
- 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.
- NPM
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 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
- Visual Studio Code
👤 Ankit Mishra
- Github: @Ankit-Mishra07
- Linkedin: @ankit-mishra07
This project was created for educational purposes as part of the React web development curriculum; contributing is not accepted.
Give a ⭐️ if you like this project!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent