The Monsterizer

Much of my spare time is spent running RPGBOT. While much of this is written content, I also develop web-based tools for use in tabletop RPGs like Dungeons and Dragons. The Monsterizer was an especially ambitious effort, adapting 20 pages of rules text into a tool which allows users to create and customize monsters for 5th edition Dungeons and Dragons, and scores them using the “Challenge Rating” rules which the game uses to balance challenges.

The source code is available on GitHub.

Screenshot of the Monsterizer in Dark Mode

Technologies Used

  • CI/CD with Github Actions: Automated linting, testing, and build verification.
  • CSS: While I used an open-source component library, I heavily styled the components to my liking.
  • Cypress: Browser automation functional testing.
  • Formik: Used for client-side form validation with complex rules using Yup.
  • Git: Version control.
  • Jest / Vitest: Unit testing. I take test coverage and testability very seriously.
  • Node: I use a few utility scripts which I wrote in Node to handle a few repetetive tasks in my repository.
  • React: UI framework.
  • Storybook: Useful for verifying functionality of specific components in isolation, plus it provides useful tools for testing accessibility and has 1st-party integration with Vitest.
  • Typescript: Strict typing is great. There is not one “any” in my code.
  • Vite and Webpack: Bundling for distribution. The original version use Webpack, but I have recently moved to Vite.