Basic-Fit
Kiosk
The kiosks contain a small PC running windows 10, this allows us to run Google Chrome in Kiosk mode as the interface for the application.
This app was built using React.js and Typescript. We used Tailwind to style our components and Storybook to document these components for our team members.
Design
The design aims to give energy and get you going.
The Kiosk is capable of some important things:
- New customers can sign up to become a member
- Members can log in and change their memberships
- Members can buy a day pass
- New customers can start there membership using the voucher kit that was bought online.
Offline
Signing up is the main feature of the kiosk, it needs to happen flawlessly and it should always work. To make this a reality we utilize the power of service workers using WorkBox, this allows the app to run even when there is no internet connection. During this offline period only signup is possible. All payments are postponed, and members will receive an email to complete the payment as soon the internet is back.
Hardware Communication
The kiosk uses a local .NET server to communicate with the hardware. We can interact with this server using a WebSocket running through SignalR. This allows us to send requests like making a payment, reading a barcode, or issuing a member card.
It also allows us to listen to events, that way we can respond to errors and give feedback to the users.
Automated testing
To prevent changes from breaking the codebase we have to write tests. Since this is not a regular website, we have decided to focus on the different flows the app holds. Every flow has a test that runs in Cypress before being built. These tests make sure that the flow can be interacted with from start till end without issues.
On top of this, we have written Unit tests using Jest. These tests make sure our logic is working as it's supposed to and prevent unwanted bugs.
Monitoring, logging and errors
Basic-Fit has over 2000 active kiosks running, so we want to make sure our application is running as it should everywhere. I created a Fastify app on top of NodeJS that allows us to push logs to a MongoDB instance. This allows us to see if all kiosks are for example running the latest version, or if they are offline.
Running into errors is not something we want to happen, but running on over 2000 systems you run into some problems eventually. To handle these errors we have implemented Sentry into our App. Sentry shows us a trace from where in the code the error occurred and how often it occurs. This allows us to set priorities accordingly and find out the cause of bugs faster.