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.
YouCut_20240610_205522012.mp4
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 --tagsThis project has been a grateful recipient of the Futurice Open Source sponsorship program.