Atsume October 2024

Manga collectors of physical volumes have a special problem in that a manga series consists of 10 or even up to a 100 Volumes and they often collect 10 series or more simultaneously that come out in anything between 1 or 6 month cycles.

A good friend of mine realized that there are plenty of solutions where you can buy and read digital manga but no good ways to track physical volumes. Frequently people would share Spreadsheets online about their collections which was obviously not an ideal solution.

So we decided to fill that need by developing an app that makes it easy to scan your entire collection via barcode reader and then get a good overview and notifications on when the next volumes for the series you are collecting come out.

Tech Stack

I started out with React Native and Expo but later switched to Capacitor and Vue. This allows me to use my web expertise to the fullest while still providing a good mobile experience.

For the backend I deployed my favorite CMS Keystone.js to define all data as typescript code and also make it extremely easy to sync the type definitions to the frontend application.

For deployment I use Dockerfiles that I build with the Github Action Pipeline with my own custom Github Action which I wrote in an attempt to standardize me setting up Ci/CD for new projects. I have an infrastructure folder in my repository that automatically gets updated when I commit and build via Github Actions. All I need to do then is manually release a new production version from my command line.

Why I moved away from React Native with Expo

The promise of an app with native performance for Android and iOS while also building a website from the same code-base was convincing to me at the time. Getting into React Native was very painful coming from regular HTML/CSS. It feels a lot like CSS but there are a lot of things about layouting that don't quite behave like normal CSS.

Libraries that I wanted to work with frequently did not have an up-to-date native module and would just crash the app. UI libraries were lacking and full of obvious bugs. Frequently the answer to questions about those bugs were "we do not support that version".

After long hard fought battles I managed to get the first version up and running but the performance was really bad. It regularly dropped below 60 fps on my 120hz Google Pixel 8 Pro screen, even in an optimized production build. I am ready to accept that I just don't know how to leverage the two-threaded nature of React Native but the fact I can build the application for web with expo and let it run in chrome on the exact same device and have no performance issues whatsoever made me seriously doubt the promise of native performance. While in theory the performance in WebView should be worse, switching to Capacitor and Vue made the performance issues basically vanish and I was able to port the app entirely in 2 weeks.

Development has been far less stressful thanks to a more robust ecosystem. It seems like the android WebView is no longer as much of a performance bottleneck as it was years ago.