Menu Close


Code Climate
Test Coverage
Build Status
Dependency Status
devDependency Status

AngularJS Material Design ECMA6 Dashboard

This is a starting point to create an Angular 1.4 Material Design application that is structured using ES6 modules in a component based way. It comes with karma/protractor testing, Traceur transpilation and live reload out of the box.

Financial Dashboard


  • node.js

Application Dependencies

All the dependencies required for the build system, testing and so on are managed with npm and defined in package.json. They can be installed with:

npm install
bower install

Running the Application

You can run script/start to fire up the application on http://localhost:3010.

(You may need to make each file in script folder and add execution permission to script/lib/css.js file.)


You can use npm test to run JSHint, Karma Unit tests and our E2E tests.

To run just the Karma tests use:

karma start ./config/karma.config.js

Karma will automatically watch the files and rerun tests when files change.

Live Reloading

Install the fb-flo chrome extension.

To enable live-reloading have the developer tools open and activate fb-flo.

Build & Deployment

Create a production optimized build using AssetGraph Builder:
currently waiting for a fix assetgraph/assetgraph-builder#162

Debugging Protractor (E2E) tests


Running individual files

Serve client/ on port 3010

npm start

Run protractor with --specs option

HTTP_PORT=3010 ./node_modules/.bin/protractor --specs client/app/routes/mandates/show/mandates-show.e2e.js

Pausing the browser

Add browser.pause(); to your spec.`


  • ECMA6 Angular Project by GoCardless
  • D3 Financial Components by Scott Logic
View Source Code
Posted in Development