A simple React app that displays the current weather information in London, and weather forecasts for the next 5 days. A 60 second counter and progress bar displays the time until the weather information is refreshed.
OpenWeather API provided the weather information.
Clone or download the repository.
These are required for install:
- Node
- yarn or npm
Install the project dependencies
yarn install
or
npm install
Scripts that were made available through Create React App
yarn start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
yarn test
Launches the test runner in the interactive watch mode.
Details of project implementation.
- Fetched weather information using two OpenWeather API endpoints:
- To retrieve the current weather (https://openweathermap.org/current)
- For a 5 day/3 hour interval weather forecast (https://openweathermap.org/forecast5)
- Data manipulation of 5 day/3 hour interval dataset to retrieve daily forecasting.
- Timer to increment data refresh counter and CSS to animate progress bar.
- Web API's localStorage to save latest successfully fetched weather information. In the case of a failed fetch this data will be displayed instead.
- If fetching data fails and is not saved in localStorage, no data available messages are shown.
The following assumptions were made when developing this project.
- The weather location is London.
- 5 day forecast.
- 60 second countdown for weather information refresh.
- OpenWeather API free account only.
- The time of day for daily weather forecasting was taken at 12:00 when possible.
- Forecasting starts at current time to the nearest 3 hour interval. During the early mornings (after 00:00 and before 09:00), the 5th day forecast at 12:00 was not available because it is not within the 40 forecasts. Assumed to take the forecast at 09:00 instead to achieve a 5th day forecast.
- Forecast icons are hosted by OpenWeather.
- Temperatures in degrees celsius.
Ideas to improve the application.
- OpenWeather API recently released an endpoint named "One Call API" that provides the current weather and a daily forecast for 7 days. This could be an appropriate endpoint to use because it is one API call and no daily forecasting data manipulation required.
- Progress bar animation smoothness.
- More interesting animations when transitioning to new data.
- Option to change location.
- Open Weather Map API
- This project was bootstrapped with Create React App.
- React v16
- axios
- react-spring
- react-spinners
- node-sass
- Jest
- react-test-renderer
- react-testing-library
- mockdate
James Wong