A weather application that uses React-Typescript and favors a multi-layered architecture.

Last update: Dec 22, 2021

Getting Started with Create React App

This project was bootstrapped with Create React App.

Run with npm run start

A simple weather widget that displays a variety of weather details for either the current or a given location.

Key Features

  • Current weather brief
  • Hourly forecast (5 hours)
  • Daily forecast (7 days)
  • Current weather detail
  • Daily forecast selection
  • Forecast by zipcode
  • Forecast by currently detected location

Project Architecture

While the project is fairly straightforward, I opted for a 2 layer design to distinguish between the application and presentation related code/logic. This was mostly a means of exercise and demonstration, but given the complex JSON object returned from OpenWeather's API it ended up serving the project, particularly when fleshing out the presentation layer.

Application services exist for both geolocation and weather related requests/logic, with the latter exposing 2 public methods that a component can use. The weather/geo services are interfaced to allow for swapping APIs. The WeatherWidget receives an implementation of the WeatherServiceInterface that it can then use in the presentation layer.

Remarks

I intentionally didn't invest too much time into the styling of the app as it was largely a functional exercise. I also opted to not componetize every part of the view as the app is very simple. Much of the WeatherWidget logic could be used in a custom hook, but it's not necessary.

GitHub

https://github.com/silvaDominic/weather-widget
You might also like...

Weather Progressive Web Application

Weather Progressive Web Application

This is a code repository for the corresponding YouTube video. In this tutorial we are going to build, deploy and publish a Weather Progressive Web App. Covered topics: React.js, Service Workers, PWA, Lighthouse...

Jun 14, 2022

Restaurant Finder application for NYC demonstrating Atlas Search Features. Uses React and Tailwind.

Restaurant Finder application for NYC demonstrating Atlas Search Features. Uses React and Tailwind.

What's Cooking with Atlas Search A Restaurant Finder Application Demo MongoDB Atlas Search Hello! 👋 This application allows you to search lightning f

Jun 11, 2022

A web application that uses the Studio Ghibli API to provide an index of their films and details so you can choose your favorite to watch

A web application that uses the Studio Ghibli API to provide an index of their films and details so you can choose your favorite to watch

Studio Ghibli Films A web application that uses the Studio Ghibli API to provide an index of their films and details so you can choose your favorite t

Jun 7, 2022

it is a React application which uses SpaceX open source graphql APIs

spaceX-mini-project it is a React application which uses SpaceX open source graphql APIs

Nov 5, 2021

React application that uses json server to store all your important tasks.

React application that uses json server to store all your important tasks.

I-do React application that uses json server to store all your important tasks. Run the app clone the project

Nov 2, 2021

Flipkart-clone - Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture

Flipkart-clone - Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture

Flipkart Clone MERN APP Dhaval Patel's Flipkart Clone is done with top-notch fea

May 30, 2022

An example of a weather app UI built with Ionic and React

An example of a weather app UI built with Ionic and React

ionic-weather-app-ui An example of a weather app UI built with Ionic and React If you'd like to support, you can buy me a coffee ☕️ Included in this I

Jun 1, 2022

React weather app with Geolocation and openweathermap.org-Api. 🌎

React weather app with Geolocation and openweathermap.org-Api. 🌎

Available Scripts npm start Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you ma

Mar 25, 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
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
This AWS Ecommerce Website is a multi-tier ecommerce web application that uses React, HTML, typescript, and Javascript

This AWS Ecommerce Website is a multi-tier ecommerce web application that uses React, HTML, typescript, and Javascript Outline Overview The goal of th

Jun 4, 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 App - a simple weather app developed in typescript using React, HTML and SASS
Weather App - a simple weather app developed in typescript using React, HTML and SASS

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

Jun 2, 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 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
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
Weather Application built using ReactJs , OpenCage API and OpenWeatherMap API

Weather-bot Netlify Site Status : Weather application built using ReactJs, OpenCage Api and OpenWeatherMap Api Tech Stack and Dependencies Name Descri

May 13, 2022
React + TypeScript app built using clean architecture principles

React + TypeScript app built using clean architecture principles

Jun 20, 2022
Application to View Weather Data of Cities,Created Using React.js
Application to View Weather Data of Cities,Created Using React.js

Previsão de Chuva Horária-app - criado utilizando ReactJS Aplicação para visuali

Dec 18, 2021