Wear4cast (Suggestions on what to wear based on the weather forecast)

---

About

This project is using React Redux Universal Hot Example as a starter boilerplate:

• Isomorphic Universal rendering
• Both client and server make calls to load data from separate API server
• React
• React Router
• Express
• Babel for ES6 and ES7 magic
• Webpack for bundling
• Webpack Dev Middleware
• Webpack Hot Middleware
• Redux's futuristic Flux implementation
• Redux Dev Tools for next generation DX (developer experience). Watch Dan Abramov's talk.
• React Router Redux Redux/React Router bindings.
• ESLint to maintain a consistent code style
• redux-form to manage form state in Redux
• lru-memoize to speed up form validation
• multireducer to combine single reducers into one key-based reducer
• style-loader, sass-loader and less-loader to allow import of stylesheets in plain css, sass and less,
• bootstrap-sass-loader and font-awesome-webpack to customize Bootstrap and FontAwesome
• react-helmet to manage title and meta tag information on both server and client
• webpack-isomorphic-tools to allow require() work for statics both on client and server
• mocha to allow writing unit tests for the project.

In addition it is using:

• OpenWeatherMap API for current weather and forecasted weather
• redux-promise middleware
• axios for async HTTP requests
• moment-timezone Unix to local time conversion (OpenWeatherMap API returns Unix time)
• coordinate-tz Timezone based on coordinates (OpenWeatherMap API returns longitude and latitude)
• react-chartjs and chart.js charts
• react-custom-scrollbars better looking scrollbars

Installation

npm install

Running Dev Server

npm run dev

The first time it may take a little while to generate the first webpack-assets.json and complain with a few dozen [webpack-isomorphic-tools] (waiting for the first Webpack build to finish) printouts, but be patient. Give it 30 seconds.

Using Redux DevTools

Redux Devtools are enabled by default in development.

• CTRL+H Toggle DevTools Dock
• CTRL+Q Move DevTools Dock Position
• see redux-devtools-dock-monitor for more detailed information.

If you have the Redux DevTools chrome extension installed it will automatically be used on the client-side instead.

If you want to disable the dev tools during development, set __DEVTOOLS__ to false in /webpack/dev.config.js.
DevTools are not enabled during production.

Building and Running Production Server

npm run build
npm run start

Demo

Images

I used AWS S3 to host images on this site

Unit Tests

The project uses Mocha to run your unit tests, it uses Karma as the test runner, it enables the feature that you are able to render your tests to the browser (e.g: Firefox, Chrome etc.), which means you are able to use the Test Utilities from Facebook api like renderIntoDocument().

To run the tests in the project, just simply run npm test if you have Chrome installed, it will be automatically launched as a test service for you.

To keep watching your test suites that you are working on, just set singleRun: false in the karma.conf.js file. Please be sure set it to true if you are running npm test on a continuous integration server (travis-ci, etc).

Deployment on Heroku

To get this project to work on Heroku, you need to:

1. Remove the "PORT": 8080 line from the betterScripts / start-prod section of package.json.
2. heroku config:set NODE_ENV=production
3. heroku config:set NODE_PATH=./src
4. heroku config:set NPM_CONFIG_PRODUCTION=false

• This is to enable webpack to run the build on deploy.

The first deploy might take a while, but after that your node_modules dir should be cached.