Topic Tag Cloud

♦️ ♦️

A demo application rendering a tag cloud from an fixture.

Test matrix (BrowserStack has no Saucelabs-style badge 😿)

Browser	OS / Version	Status
IE	8.1 / 11	👍
IE	8 / 10	👍
Opera	8.1 / 31	👍
Firefox	OSX / 40	👍
Firefox	Linux / 31	👍
Chrome	OSX / 44	👍

Prerequisites

Node.js in v4.x.x

npm@3 (should also work with npm@2)
Grunt-cli ($ npm i grunt-cli -g)

TL;DR

npm install
grunt serve
open http://localhost:8080

Tooling & Architecture

The project uses react@0.14.0

...no assumptions are made regarding e.g. flux, redux as too little goes on and the project's focus is elsewhere (see below)
...also no routing at this stage
Building is done using webpack development using a webpack-dev-server
The provided topics.json is served over a mock backend with HapiJS
- Running on localhost:3000 with routes /topics and /topic/{id}
CSS is build using postcss within a Grunt build chain
Code styling is enforced using eslint which also runs on TravisCI

Intensions & Ideals

Modular and unit tested JavaScript
- ...up to a function level (e.g. utils.js, sentiments.js and ranges.js)
- ...component based UI with dump/smart parts (e.g. ui/components/tag.js)
- ...smart components encapsulating data fetching from a source
Documented code using JSDoc
CI integration via TravisCI
- Running tests on multiple browsers see test/karma.conf.js
Componentized CSS using BEM
- ...no css-modules for now 😄
Split up Grunt build chain
- ...one task per file with global configuration (grunt/options)
Play around with semantic commit messages to maybe get to like 'em

Installation

npm i will install all needed dependencies.

Testing

Local tests can be run via grunt karma:local whenever in development mode run grunt karma:dev to keep karma running and watching.

To run tests against BrowserStack from your local machine ensure having the env-vars BS_USERNAME and BS_ACCESSKEY and then run grunt karma:bs_desktop_ci. TravisCI will run the same set of tests.

Development

Running grunt serve will launch two servers one Hapi.js server on localhost:3000 serving /topics and /topic/id. The second server will run on localhost:8080 and is a webpack-dev-server in hot-module mode.

Navigating your browser to localhost:8080 will show the tag cloud.

Watch tasks are on changing any part of the mock backend and stylesheets the webpack-dev-server takes care of the rest where possible.

tdeekens / topic-tag-cloud