Weather App - a simple weather app developed in typescript using React, HTML and SASS

Last update: Jun 2, 2022

React Weather App

MIT License

DEMO with mock data

Weather App is a simple weather app developed in typescript using React, HTML and SASS. The app allows you to see the weather from your current location or another location around the globe using OpenWeather Api and Google Maps Api. Using One Call API the app displays the current weather, 24 hours and 6 days forecast. You can change the unit system from metric to imperial. The app is available in light and dark mode.

If you like this repository you can support me on

Buy Me A Coffee

Light mode

Dark mode

Libraries

Setup

Create a file called .env in the root of the React-WeatherApp project. Add the following code in the file.

REACT_APP_OPENWEATHER_API_BASEURL = "https://api.openweathermap.org/data/2.5/onecall"
REACT_APP_OPENWEATHER_API_KEY = "YOUR_OPENWEATHERAPI_KEY"
REACT_APP_GEOLOCATION_GEOCODE_BASEURL = "https://maps.googleapis.com/maps/api/geocode/json"
REACT_APP_GEOLOCATION_API_KEY = "YOUR_GOOGLEMAPSAPI_KEY"

The app is using One Call API from OpenWeather API. To start the project you need an account and OpenWeather API Key. You can signup and get the key from here.

The app is using Geocoding and Reverse Geocoding from Google Maps API. To start the project you need a google account and Google Maps API Key. You can get the key from here.

To use real data, change the flag useMockData to false from Container.tsx.

Resources

Illustrations are from Freepik

Other versions

Xamarin-WeatherApp - developed in Xamarin

GitHub

https://github.com/gheorghedarle/React-WeatherApp
You might also like...

This simple CRUD project (Demo) is developed with React (TypeScript) and SpringBoot REST API (REST Controller).

This simple CRUD project (Demo) is developed with React (TypeScript) and SpringBoot REST API (REST Controller).

This simple CRUD project (Demo) is developed with React (TypeScript) and SpringBoot REST API (REST Controller).

Mar 24, 2022

👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!

👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!

👻 SnapChat Clone [LIVE APP] [Live App] • [Video Demo] ⚡️ Breakdown Built with React Only functional components using hooks Folder structure: Flat - n

Jun 19, 2022

Project developed using ReactJS, TypeScript, Vite and CSS modules.

Project developed using ReactJS, TypeScript, Vite and CSS modules.

NLW Heat React Project developed at the Next Level Week Heat event held by Rocketseat. This project aims to build the backend of a commenting applicat

Oct 24, 2021

Application of a finance manager developed in Rocketseat's Ignite ReactJS course using ReactJS and TypeScript

Application of a finance manager developed in Rocketseat's Ignite ReactJS course using ReactJS and TypeScript

dtmoney Application of a finance manager developed in Rocketseat's Ignite ReactJ

Jan 24, 2022

FinancesApp Client project developed using ReactJS, TypeScript, Electron and ViteJS

FinancesApp Client project developed using ReactJS, TypeScript, Electron and ViteJS

Application for managing Expenses and Incomes. Developed in ElectronJS, ReactJS, TypeScript and ViteJS.

Mar 11, 2022

A website designed to showcase the US stock market, Built using React, Redux, SASS, and tested using React testing library

A website designed to showcase the US stock market, Built using React, Redux, SASS, and tested using React testing library

Market Overview is a website designed to showcase the US stock market. You could find details about the stock of choice and improve your strategies. Built using React, Redux, SASS, and tested using React testing library.

Mar 23, 2022

Create A Simple Weather App Using React

Create A Simple Weather App Using React

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jun 13, 2022

Web frontend of the NLW heat 2021 project, used: React; Typescript/TSX; Vite; Socket.io; Scss/Sass; and other libs for react (axios, context...).

Web frontend of the NLW heat 2021 project, used: React; Typescript/TSX; Vite; Socket.io; Scss/Sass; and other libs for react (axios, context...).

This is the web frontend of the NLW heat 2021 project, carried out by rocketseat. It is free to use, and any questions or errors, please do not hesitate to consult me, or post an issue. In this code we used: React; Typescript/TSX; Vite; Socket.io; Scss/Sass; and other libs for react (axios, context...).

Oct 25, 2021

Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications

Artemis UI About Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications. Docs and De

Jun 1, 2022
Comments
  • 1. build(deps): bump ejs from 3.1.6 to 3.1.8

    Bumps ejs from 3.1.6 to 3.1.8.

    Release notes

    Sourced from ejs's releases.

    v3.1.8

    Version 3.1.8

    v3.1.7

    Version 3.1.7

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-05-12 06:57
Weather-app - Build a weather app in react js using Open Weather API

React JS Weather App Build a weather app in react js using Open Weather API. Fol

Jan 23, 2022
A simple weather app developed using React and the Metaweather API
A simple weather app developed using React and the Metaweather API

A lovely Weather Forecast App that allows you to search by city. Created with React and Bootstrap.

Jun 7, 2022
A weather app that was built using weather APIs and is a PWA web app
A weather app that was built using weather APIs and is a PWA web app

This is a weather app that was built using weather APIs and is a PWA web app.

May 13, 2022
A simple weather app developed with React
A simple weather app developed with React

React Weather Um aplicativo meteorológico simples desenvolvido com React Live Demo on Vercel API Os dados meteorológicos são recuperados de http://ope

Jun 14, 2022
Weather-App - A Web application shows dynamic weather report using Reactjs and openweather
Weather-App - A Web application shows dynamic weather report using Reactjs and openweather

Screenshots of this project Getting Started with Create React App This project w

Jan 28, 2022
Weather - Live Weather Prediction using ReactJs
Weather - Live Weather Prediction using ReactJs

Live Weather Prediction using ReactJs Fetches Temperature with location name, Pr

Jan 16, 2022
A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cities and save them to favourites on local storage.
A weather app done with React. Allows you to make a search for the current weather by simply typing

Simpliest Weather React-App A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cit

May 24, 2022
A simple Countdown created using Vite, React, Typescript and Sass
A simple Countdown created using Vite, React, Typescript and Sass

Countdown ?? About This a simple Countdown created using Vite, React, Typescript and Sass. Demo: https://countdown-teal-zeta.vercel.app/ ?? Technologi

May 26, 2022
Build Web App for displaying book list and getting API using React, Redux, Typescript, SASS

Bookstore This is a web App that displays a list of books and fetches an API. Built with React, Redux, Typescript, SASS. Built With JavaScript React R

Apr 6, 2022
Website to provide Service for Finances App Expense and Revenue Management. Developed using ViteJS, TypeScript, ReactJS, Styled-Components and Framer Motion.
Website to provide Service for Finances App Expense and Revenue Management. Developed using ViteJS, TypeScript, ReactJS, Styled-Components and Framer Motion.

Website to provide Service for Finances App Expense and Revenue Management. Developed using ViteJS, TypeScript, ReactJS, Styled-Components and Framer Motion.

Jun 17, 2022