D&D: The Rookie's Roadmap

Enter Site Here

Abstract:

This app is a wiki for complete newbies to Dungeons & Dragons and similar role-playing games. The content is broken into a few main categories:

• Gameplay Basics (Spellcasting, Adventuring, Combat, and Ability Scores)
• Abilities & Skills
• Races & Classes

There is also a Glossary page with a comprehensive list of links to all sub-pages, which can be filtered, and a Resources page with external links to more information folks might find useful.

The app has been fully E2E UI tested and is responsive across large, medium, and small screen sizes.

Happy Adventuring!

Installation Instructions:

1. Fork this repository
2. Clone it down to your machine
3. cd into the directory
4. Run npm install to install required dependencies
5. run npm start to launch the application in your default browser

To Run Test Suite:

1. Run npm cypress open
2. Select E2E Testing
3. Select the test spec you wish to run

Context:

• Created by Rachel Soae Prather
• Thanks to Ben Holden & Laura Garcia Guerra for help with code reviews
• Total time to complete initial publication: 35 hours over 6 days

Tech:

Learning Goals:

This project has been a fantastic exercise in working with RESTful APIs. The API I used was rich with information, but every subpage in the application - every ability, skill, race, class, and rule - is stored at an individual endpoint. This presented the challenge of accomplishing 58 fetch calls on page load and create states of arrays for each category without having timing issues. Needless to say, I learned a lot about useEffect (hint: don't forget your cleanup functions).

I pushed myself in many ways on this project. In addition to navigating the huge API, I set up a robust Cypress testing suite, utilizing custom commands to dynamically test every single link in the application, and implemented styling with Sass for the first time.

EDIT: Since first publishing this application, I have enormously refactored it to fetch only the desired information on the load of each content page. This has had great effects on performance of the application; while a greater number of loading states are needed and utilized throughout, only information that is pertinent to the user is fetched. The hardest part of doing it this way is choosing a cute loading state 🌻

Plans For Future:

I am super proud of how the app has turned out so far, but the more I work on it the more features I think of to add. One of the features I tried to implement, but ultimately had to roll back for the sake of time, was the addition of a "Related Links" bar. On each content page, if any abilities, skills, or rules are referenced on that page, I wanted to provide a section of "related links" so the user can seamlessly navigate from one subject to another. That is at the top of the list of features I would like to add. Here are a few others:

• Create a single, dynamically rendered, Directory component
• Update styling, including subject matter images, background images, and active tab styling
• Add anchor links for pages with large amounts of content