HenkeByte Website
This website itself is a project to learn and try out different tools and libraries. The code is available on GitHub.
Libraries & Frameworks
It is a Single Page Application build with NuxtJS (a library build on top of Vue.js) along with some modules for NuxtJS:
- nuxt/pwa
- Provides the website as Progressive Web App.
- nuxt/color-mode
- Color modes like Light-, Dark- and Sepia-Mode.
- nuxt/content
- Static content folder including querying the content.
- nuxt/device
- Client-Device recognition to provide suitable information for the user.
The User Interface is build upon Bootstrap as well as some custom made components. The used icons are from Bootstraps's icon pack.
Other less commonly used tools are:
- Dexie.js
- To save the minesweeper history in the IndexedDB of the browser.
- Chart.js
- To display the minesweeper history as pie chart.
- firework-js
- For the celebration of a win at minesweeper.
- Lodash
- Just providing some utility functions which JavaScript is missing.
Get a complete overview here
Dev-Toolchain
Coming soon...
Get a complete overview here
Hosting and Deployment
The website is statically hosted in Amazon S3. To achieve better latency and reduce direct traffic to S3, the website is cached in Amazon CloudFront and then distributed via a CDN. Deployment is automated using GitHub actions. A push to the main branch triggers a Continuous Integration (linting and testing) and a Code-Quality pipeline. If these pipelines are successful, the Continuous Deployment pipeline is triggered and creates the static build of the website. It is then deployed to S3 and finally the CloudFront cache is invalidated.
Content Management
The content on this page (and some meta information) is mainly stored in the Git Repository itself. However, it is quite manageable via a Git-based CMS. The tool used for this is forestry.io and it commits changes directly to the repository. Through automated deployment, these changes are then available on the website after a few minutes. Furthermore, the headless CMS contentful is used to store the content that is shown in the Resources Overview.
Backend
Currently there are no further backend services with custom business logic.