weatherman

Weather forecasts. Anywhere. Anytime.

Application features:

• Displays weather conditions for current location by default
• Search for location by clicking on the location label
• Pull down to reload data
• Trendline to visualize temperature for next 12 hours
• Weather forecast for the next 5 days
• Background color changes depending on daytime/nighttime
• Development items visible on trello board "Weatherman Trello"
• UI automated tests covering page load, pull down to refresh, and search by location features
• unit tests covering components, redux workflows, and apis of the application

Assumptions and caveats

• App design mainly targeted mobile web, though dev and testing were done on desktop for convenience
• Development and testing done on Chrome 67.0.3396.79
• Pull down to reload data will reload data for user's current physical location

To install

Clone this repo with

git clone https://github.com/bcfchen/weatherman

cd into the weatherman/client folder and install npm packages by:

npm install

To run

Check that you're in the weatherman/client folder and run the project by:

npm start

The page should automatically open up in your browser at localhost:3000

Unit tests

Check that you're in the weatherman/client folder and run unit tests with the command:

npm test

The terminal will output the test results and coverage

e2e tests

Run the project with the "To run" steps above, then cd into weatherman/client/test directory

Install dependencies by running

npm install

Note that because of the selenium-cucumber-js dependency the installation may take longer depending on network

Run automated test suites by:

npm run e2e

The page should automatically open up and run test cases. Coverage report should be displayed after tests are complete

To use

Navigate to localhost:3000 (if not there already) to view current weather

Click on location name to search for new location. If new location is currently daytime, background will change to daytime theme

Drag down anywhere on the page to reload data (for your current location)

Main libraries & services used

• React/Redux
• Material-ui for components and typography
• Accuweather for weather data
• react-select for location name search autocomplete
• highcharts for temperature visualization
• Selenium Webdriver and Cucumber.js for automated testing