Spellbook

The Spellbook is a small reference site for Dungeons and Dragons spell descriptions and mechanics (the ones freely available via the SRD license). You can create characters in order to organise spells and track slots. Creating custom spells is also supported.

I wanted something that was extremely fast to load and search for while I was in the middle of game combat. Trawling through full rulesets or slow sites was a hassle, and I didn’t want a full character manager.

I solved this by building a progressive web app (PWA) using VueJS. Using Vue means the app requires javascript, but I needed to learn it for work anyway. I’ve considered rewriting it to have pre-generated HTML files, view transitions, and javascript to just handle the optional features.

Since it’s a PWA, it has a service worker which caches all the data and files locally. This makes it incredibly fast. Once the initial load is complete, you can use the app offline and there are no more network requests. PWAs can also be installed as web apps on mobile devices.

One last decision I made to keep the app lightweight is to use the system font and emojis instead of an icon set. Since I am (was? not sure how far my friends have spread this!) the only user, I was fine with this design decision and lack of affordances on the UI. Plus, the help section details what everything means!

Spellbook app screenshot
Spellbook app screenshot