Skip to content
React application to get current weather and 16 day forecast
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Weather application made with React

Visit the ongoing project on

My Objectives

Learn how to implement:

  • react hooks
  • context API

Consolidate knowledge in:

  • Asynchronous javascript
  • Handling REST APIs
  • Using local storage

Challenges faced

  • Implementing react hooks

    • Learning how to use useEffect properly to replace lifecycle methods
    • Learning how to update state with useState, which does not automatically merge with the previous state, but overwrites it (using spread operator)
  • Navigation between dynamically created location components

  • Bad choice when selecting how to structure data in the location context file. Refactored context, app and location components.

  • Implemented react router to switch between the locations. Decided to go with react carousel and locations list where locations would be rendered all at once. This avoids the location being rendered each time when it is opened.


  • Remove added location
  • Implement Local storage
  • Add animations
  • Ability to change measure units
  • Dots representing locations, current highlighted
  • Transform to PWA
  • Get IP location
  • Get current weather and forecast from weatherbit API
  • Create a list of weekdays
  • Apply dynamic weather icons
  • Change background depending on time of day
  • Implement react router to switch between the locations
  • Create a dropdown suggestion list when searching for location with Algolia autocomplete
  • Increase accuracy of location with geolocation using web API
  • loading screen and spinner
  • Hide API keys with environmental variables

How to use

In the project directory, run:

npm install

Installs dependencies necessary to run the app.

npm start

Runs the app in the development mode.

The page will reload if you make edits.
You will also see any lint errors in the console.

You can’t perform that action at this time.