A web app playing back the goal information from the latest NHL games. I made this to have a more exciting way of checking the scores while I brush my teeth in the morning, as the games are usually played at night time in Finland.

The app is running at GitHub pages. Add it to your home screen on an Android or iOS device for a more app-like, chromeless experience.

Built with Cycle.js and npm scripts. Uses nhl-score-api as its backed.

To run the app and re-build on file changes:

npm start

The app is available at http://localhost:8008/nhl-recap/, and the command should open a browser automatically.

To create a production build and preview it locally:

npm run start:production

To run the app connecting to a local nhl-score-api server on port 8080:

npm run start:local

Instead of a real nhl-score-api server, you can also start a mock json-server API server that returns a static response from the server/db.json file:

npm run start:server

Then you can run the app connecting to the local server with npm run start:local as described above.

This project has its own poor person’s component gallery that currently just shows the game component in all its possible states, so that you don’t need to play back games in different states to see them.

The gallery is available at http://localhost:8008/nhl-recap/gallery/ when running the development server locally. (Note that the trailing slash is required.)

JavaScript is formatted using Prettier. Prettier is the most convenient to run via your IDE, but it is also run as part of the linting tasks:

npm run lint:format

One-time lint run:

npm run lint:js

Lint on file changes:

npm run watch:lint:js

I'm trying out the BEM (Block-Element-Modifier) naming convention in this project.

The lint scripts have a css suffix (instead of sass that you might expect) for uniformity with the other CSS related scripts.

One-time lint run:

npm run lint:css

Lint on file changes:

npm run watch:lint:css

Lint SASS, lint JavaScript, run Prettier and run unit tests:

npm test

Run only unit tests, including coverage:

npm run spec

Run only unit tests in watch mode:

npm run spec:watch

Build the app to the public directory:

npm run build

The deploy script will build the app, clone the gh-pages branch to the dist directory, copy the build there, create a commit, and push the commit to the gh-pages branch in origin.

Usual deployment process:

# Bump version
npm version <major|minor|patch>
# Deploy to GitHub Pages
npm run deploy
# Push to Git
git push origin master --tags

MIT

This project has been a grateful recipient of the Futurice Open Source sponsorship program.