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.