Description
BKKPNG Club is a Progressive Web App that works offline and also encrypts user data on the device by default. The user can register and utilises the automatic cloud synchronisation, which allows use on multiple platforms and devices seamlessly.
The app supports all major currencies including U.S. Dollar, Euro, Japanese Yen, British Pound. The available languages are English and German.
Tech
This Project was started as a side project in 2016. It was originally to explore the Angular 1.x framework and to learn how to build a complete project using it. I switched over to React mid 2017, for similar reasons. I stuck with React, because it gave me clean single purpose components and with the addition of hooks, I could also use it for state management.
State was originally using Redux and Immutable, but after the addition of hooks to the React library, I reconsidered the way state was kept and used in the application. I decided to go away from Redux and Immutable and implement my own flux implementation using React Context and hooks to store and distribute it.
By default the user data is encrypted and stored in the local storage. The data is encrypted using Web Cryptography API with the AES-GCM encryption algorithm. As a cloud syncing service I decided to use Firebase for the ease of use and generous free tier usage. The user can sign up using email and password, creating a user in the firebase database.
The first puplished version of this app was an electron packaged app. However, over the lifetime of the project PWA support (especially on Android phones) has become so good that there was no reason to keep developing a native app for each platform and maintain Electron specific code. A PWA could do everything the electron app could, plus it was much easier to distribute it using a simple url instead of requiring the user to download and install a binary package.
The addition of TypeScript was a painful one in the beginning, but the more I learned about TypeScript and the more experience I had with it, the more I enjoyed it and the shorter the development time became.
I tried to implement a responsive design due to the app being available on both a phone as well as larger desktop screen. The switch to a mobile first approach as proven to be a very good starting point, as it allowed me to think about the space with the least amount of real estate and then enhance it with each increase in available space.