Hikaie

An unofficial attempt at creating an open-source Storytel client, with no direct real-world use. It is MIT licensed, so you can copy and share it however you want. See source code.

Tech Stack

Language: TypeScript
Bundler: Vite
Wrapper: Capacitor.js
Platform: Android
UI: Vanilla HTML/CSS
Routing: Custom SPA router

Background & Lessons Learned

This project started as an experiment to see how far I could go without frameworks or guides, using only minimal LLM help. It began as a Flask app, but I switched to Capacitor.js for mobile, expecting it to be easier. While Capacitor.js is great for porting web apps to native, it lacks native features and its plugins are often basic wrappers. For example, I could play audiobooks but not change speed, or download large files quicly but couldn’t abort them.

Avoiding frameworks meant managing everything with HTML/CSS/TS and Vite. My first attempt was a multi-page app (MPA), which failed due to state management issues, which led me to build a single-page app (SPA) with simple show/hide logic for routing. This made state handling much easier. Handling component state without React was extreme; using JS events quickly became a nightmare. I eventually used objects to represent elements, similar to the DAO pattern, which made the code more maintainable and React-like.

At the end, the experiment was successful enough, but if I ever build another mobile app, I would use Kotlin for full native access, even if it’s harder. After all, Capacitor.js is essentially just a WebView in an app!

Credits

This app was inspired by this Storytel Desktop project, from which I borrowed the login and download logic. I discovered the search endpoint myself with trial and error. Actually, I first tried using mitmproxy and finding API endpoints myself, but decided against it after finding the project. If you are interested, there are many guides for using mitmproxy on Android emulators.