Weather App

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
• Features
• How to use
• Acknowledgements
• Contact

Overview

This app is built with React. It uses functional components (including state-management hooks such as useContext and useReducer) and leveerages Typescript with Sass. It also relies on the rich React ecosystem using React Query for data-fetching, React Modal for search modal, React Hot Toast for notifications and React Transition Group for basic CSS animations.

Built With

• React
• React Query
• React Modal
• React Hot Toast
• React Transition Group
• Typescript
• Sass
• Create React App

Features

The app allows you to access weather information, both by searching for cities and by providing your current location. You can also choose to display temperature units in either Celcius or Fahrenheit. Additionally, the app persists in localStorage your last chosen location and temperature unit as well as search history so that your preferences are remembered across the site visits.

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/monkeysees/weather-app.git

# Install dependencies
$ npm install

# Start the app in dev mode
$ npm start

Acknowledgements

• How to Favicon in 2022 by Andrey Sitnik
• Accessible Loading Indicators—with No Extra Elements!
• CSS in Action: Invisible Content Just for Screen Reader Users

Contact

• Email monkeyseesone@gmail.com