Skip to content

yusuf987/weather-forecast

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

image info

this app will show next 5 days weather forcast of bangalore location.

Demo

The project is hosted on netlify below is the live URL,
https://weather-forecast-blr.netlify.app/

How to build/ run/test project

option 1 (with git)

  • step 1 - clone the project by running the command git clone https://github.com/yusuf987/weather-forecast.git in command terminal
  • step 2 - swith to project directory by cd weather-forecast
  • step 3 - install the project dependencies by npm i
  • step 4 - run npm start this will start the project in default browser on https://localhost:3000/

option 2

  • step 1 - download the zip folder of the project source code as mention in below images
  • image info
  • step 2 - extract the folder and open the project in your code editor
  • step 3 - swith to root folder and run command npm i (rood folder the one where package.json file exists) once command succesfully project will start in defalt browser on https://localhost:3000/

What could be done with more time

  • since we calling weather API on the first load the first render may delay under the slow network connection, to give a better user experience we would show a decent spinner till the laoding time
  • i have notice small discrepancy in mozilla browser, this could be fix
  • [error handeling] - proper error handling can be done in the case of error response from weather api
  • option to change city

Unit Test

Jest and enzyme are used to perform unit tests on components. Following command runs all the unit test cases in the application.

npm test a

API Reference

this project using open Weather (https://openweathermap.org/) api for 5-day weather api data

Features

  • show hour wise weather forecast in 3-hour set
  • icon indicating the sky description along with each hour set
  • option to view in Celcius and Fahrenheit
  • next 5 days with week name

Manual Testing

web browser: I have tested the UI on different browsers mention below and found 98-99% identical behavior

  • Chrome Version 87.0.4280.88 (Official Build) (64-bit)
  • Microsoft Edge Version 87.0.664.60 (Official build) (64-bit)
  • FireFox Version 84.0 (64-bit)

mobile devices: for small devices test I used Chrome's developer tools and test over different screen size and found 96-97% identical behavior below are the device name & version i used

  • Moto G4
  • Galaxy S5
  • Pixel 2
  • iphone 6/7/8
  • ipad

Technology & Tools

this app uses a number of open source projects and tools to work properly:

  • [ReactJS] - HTML enhanced for web apps!
  • [node.js] - mainly used for NPM to bootstrap react project
  • [VS Code] - as code editor
  • [github] - to hoast the source code as public project
  • [netlify] - to hoast the build project

About

weather forecast sample project for wipro

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published