ES6 Weather Forecast

ES6 Weather Forecast in JavaScript using EcmaScript 6 (2015). Looks like this:

Demo here

Features

• ES6 (with babel)
• SCSS
• Hot Module Replacement for faster development
• Axios as promise based HTTP Client. Read this Fetch vs Axios comparison
• Forecast API
• Responsive design
• Mock Data allowing working offline and saving calls to weather API
• Webpack
  • Webpack-dev-server
  • Webpack development environment configuration
  • Webpack Babel loader configuration
  • Webpack SCSS configuration
  • Webpack configuration for HMR
  • Webpack production configuration
    • Split out css files (two threads, JS and CSS) using ExtractTextPlugin
    • UglifyJsPlugin with options
    • Use include in the loader instead of the exclude. More info
    • More perfomance tips: here
• Jest as testing tool. Tests under __tests__ folder
  • Add test like this

Features NOT INCLUDED (with more time...)

• Create React component as well
• Add a selector of Locations to allow the user to select more Locations (not only London)
• Improve the design
• Add more information about clouds, wind, etc...
• Even if that is responsive (i used float divs) it could be targeted with media queries and the mobile user experience could be improved.
• Initial Spinner meanwhile the app is doing the query to weather API
• Add the results to sessionStorage cache

Getting Started

Install pre-requisites

• Node.js and NPM: Download and install. I have version 6.6.0 of Node and 3.10.6 of NPM on Windows PC
• Git: Download and install. I have version 2.7.4 installed on Windows PC

Clone Repo

1. Get the url of your forked project.
   • Go to https://github.com/username/es6-weather-forecast
2. Click on "Clone or download" and Copy to clipboard the url ending on .git.
3. Open your command line and go to your directoy
   You don't need to create a specific folder for the project, it will be created by git
4. Clone the repo on your machine:

$ git clone https://github.com/username/es6-weather-forecast

Note: That will create a new folder called es6-weather-forecast with all the files in.

Install Project dependencies

We will use npm i to install all our dependencies in our node_modules folder.

$ cd es6-weather-forecast  
$ npm i

Run the app in Development mode

$ npm run start

Build

$ npm run build

Lint

$ npm run lint

Test

$ npm run test

Contributing

Please feel free to add your own improvement. I am waiting your Pull Request (PR).

License

MIT License Copyright (c) 2016 Jose Quinto Zamora