This project is about building a web application to show a weather forecast using weather API.

Overview

Weather App

weather app cover

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


reactjs redux chakra-ui restAPI css3

Want to see live preview »


View DemoReport BugGetting StartedInstallingAuthor


This project is about building a web application to show a weather forecast using weather API from external services Open weather map. Here you will be able to search for a specific location 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.

It have some cool features like save 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 and responsive for every screen size.

To use the app, type a name of the city and click on search/press Enter or else click on the Your location weather button, every time you click on the button first it will check if the data is available in the session storage or not, and if not then it will send a network request else it will take the 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.

Mobile responsive

weatherapp

weatherapp2


Demo

weather-app-demo-readme.mp4

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

  • 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/m-sehrawat/Weather-App.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

Tools used on this project

  • Visual Studio Code
  • Vite Js React Template

Contact

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

linkedin Twitter

© 2022 Mohit Sehrawat

Show your support

Give a ⭐️ if you like this project!

You might also like...
Changd - Open source web monitoring application for monitoring visual site changes using screenshots, XPath's or API's
Changd - Open source web monitoring application for monitoring visual site changes using screenshots, XPath's or API's

Changd is a open source web monitoring application and a free alternative to Cha

Small boilerplate project for building React apps with Serverless functions

Serverless + React Stack A simple, containerized project for quickly starting with Serverless and React. The goal of this project is to containerize d

Aplicativo  de Conversão de moedas para Android e IOS sendo consumido de uma API web de Moedas. Estudano API em react-native
Aplicativo de Conversão de moedas para Android e IOS sendo consumido de uma API web de Moedas. Estudano API em react-native

APP-Cambio Aplicativo de Conversão de moedas para Android e IOS sendo consumido de uma API web de Moedas. Estudando o consumo de API em react-native A

Cegep Project - Peer-to-peer student assistance web application.
Cegep Project - Peer-to-peer student assistance web application.

Maalem - Cegep Student help web application created by Alec Tufenkjian, Alexis Provost, and Ryan Guzelian during the winter 2021 term. Application web

A web application for learning about your local politicians built with a React and Next.js front-end, an Express Node.js GraphQL backend API

Integra is a web application for learning about your local politicians. It is built with a React and Next.js front-end, an Express Node.js GraphQL backend API, and a MongoDB database with a Prisma schema.

MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps

MERN Stack Boilerplate MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps in pure JavaScript. Create New MERN App

Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

A universal boilerplate for building web applications w/ TypeScript, React, Redux, Server Side Rendering and more.

Vortigern Vortigern is our opinionated boilerplate for crafting universal web applications by using modern technologies like TypeScript, React and Red

Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Owner
Mohit Sehrawat
Full Stack Developer @Kyndryl | MERN Developer | React JS | Redux | JavaScript | NodeJS | Express | MongoDB | Java
Mohit Sehrawat
A simple project that show a list of Superheroes and a short description.

React Marvel App with Typescript Table of Content About The Project Description Built With Installation Usage Demo Contact About The Project Descripti

José Miguel DP 2 Jun 3, 2022
Application to show and select saved tasks. React + TypeSctipt. Online version is available.

Friendly Task Manager Application to show and select saved tasks. To create application I used: React, TypeScript Application has mobile and desktop v

pasterakcode 1 Dec 23, 2021
This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux.

Isomorphic Redux App This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux. # Features

Anton Izmailov 33 May 15, 2019
An example to show a full end-to-end app using express and redux.

Sample Express-Redux Application Purpose This is a sample project to help you bootstrap an entire web application from end to end! When trying to buil

Angel Batista 198 Jul 13, 2022
A simple demo to show the boilerplate-cra from React Avançado

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

Willian Justen 10 Oct 26, 2022
Example to show how Liferay Portlets can be developed with es module functionality.

LIFERAY ES MODULE PORTLET Sample repository to show how to use Liferay portlets with es modules. Goal Provide packages and components with a portlet a

Jonas Wanner 2 Mar 24, 2022
Show how to use node-hid with electron-react-boilerplate

electron-hid-test-erb : Show how to use node-hid with electron-react-boilerplate This is just a simple clone of the electron-react-boilerplate repo, w

Tod Kurt 2 Jun 14, 2022
This workshop will show you how to dev a full Starknet dApp with NextJS & Starknet.js

This workshop will show you how to dev a full Starknet dApp with NextJS & Starknet.js, including multi-wallets support(Argent-x | Braavos) and multi-call transactions.

419 Labs 15 Nov 8, 2022
React library enabling users to show bubbly transitions between route changes.

react-bubbly-transitions Show bubbly transitions between route changes, in your React 18 apps. Click here for a demo. Or check out the npm package her

Joe 18 Nov 22, 2022
🌊 A template for building an SaaS/admin application using React + Material-UI.

?? Remains of a SaaS business I once tried to build. Now transformed into a template for building an SaaS/admin application using React + Material-UI.

Tim von Känel 1.6k Jan 2, 2023