A few days ago, while watching skateboarding videos, the idea of creating an app to manage a game of S.K.A.T.E. came to me. The principle is very simple: a short application to practice some web development skills and create something useful for a community - perfect!

If you are unfamiliar with this game, Wikipedia or images explain it best:

Therefore its time to layout the requirements. There is no need for a back-end and all the required functionality can be run in a browser, that makes it a perfect candidate for a Progressive Web App. PWA’s tick all the boxes:

  • Provide offline functionality.
  • Work cross platform (Safari for iOS added support).
  • No dependency on app stores.
  • Relatively easy to write.
  • Easier and faster to update.

Naturally, the app should also be lightweight and fast loading. To measure that, it should obtain a (near) perfect score on the Lighthouse audit and various web performance testing tools. To make this possible would require choosing lightweight frameworks, optimising builds and leveraging the latest technologies/methodologies.

Lastly, I wanted to practice some automation in testing and deployment. The test part would include unit tests, e2e tests and automated performance audits. On the deployment side, I want to use a branching strategy (such as Gitflow) and have a continuous deployment pipeline that would also run the tests beforehand.

Considering all the requirements, I have gathered my tools:

  • InfernoJS: React-like framework for the front-end. Lighter and faster.
  • Spectre.css: Lightweight CSS library for the app layout.
  • Webpack: A standard go-to for bundling front-ends, to glue everything together.
  • Jest & Enzyme: As unit test framework.
  • TestCafe: As e2e testing framework.
  • GitLab: As a git repo but also for CI/CD.

The development has already started and there is some fairly good progress. I will post another article for the release including some more technical details. As well as in the future, some dedicated articles for some parts of the application.