Tip
The app is deployed to Github pages. You can access it here.
The back of my D&D character sheets usually look like a long list of random notes about everything. My inventory also is full of baubles, trinkets and assorted garbage, like a late-game graphic adventure. Nowadays I am playing a Wizard, and since I have to keep track of my known spells, I ran out of space quickly.
There are tons of apps out there to track your spells and slots, but why not invent another wheel and build my own?
This is a fun personal project to try different technologies and features, such as:
- Use D&D 5e API.
- Angular 19 resources and elements of the new control flow.
- Unit and Integration tests with Angular's default testing configuration, which involves Karma and Jasmine.
- E2E tests with Cypress.
- Try some BDD with Cucumber using @badeball/cypress-cucumber-preprocessor
- Clone this repository and
cdinto it. - Make sure you have Node v22 installed.
- Run:
npm install - Run:
npm start
For unit and integration tests, which run using the Angular CLI, run npm run test.
For E2E tests, run npm run cypress:run.
You can also run npm run e2e or npm run cypress:open to open Cypress and run specs manually, which is helpful for debugging the tests.
This app is deployed to Github pages. That can be done by manually uploading the build artifacts to a branch and have Github deploy from there, but I'm using angular-cli-ghpages, which is the preferred way to do so according to Angular's Deployment documentation.
Once everything is in place, you can deploy by running ng deploy --base-href=/spellbook/.
Note
The / surrounding the repository name are important!
- Spells are stored in the Local Storage simply because I didn't want to deal with a database for this project.
- I believe the API doesn't support pagination so the first list spells is quite large.
- It would be nice to filter by class, school and level. The list contains Druid spells for example. Ew.