Welcome to the Dungeons and Dragons Character Creator (DnDCC)! This web-app is a one stop shop for quickly and efficiently creating a Dungeons and Dragons (DnD) character. Dungeons And Dragons is a fantasy tabletop role-playing game (RPG) originally released in 1974, designed by Dave Arnerson and Gary Gygax. Over the course of almost half a century, DnD has evolved through 5 editions, each incorporating unique elements and gameplay integrated into DnD's timeless RPG theme. DnDCC was developed by Keenan Ward, Fahim Ali, and Joachim Cañete.
DnDCC was written in React and incorporates the usage of JavaScript and CSS with dependencies managed via npm . While React operates on the front-end, MongoDB operates in the back-end alongside Express and Mongoose.
You can view the (DnDCC) HERE!
(DnDCC) Was deployed through Heroku, a publishing platform for interactive web-apps.
Upon visting DnDCC, the user will be presented with the Character Create page which features the character creation event. The user can enter their desired character information in the various input fields, then click the "Submit" button at the bottom of the page. However, the only field required for character submission is the Character Name. The Player Name and Campaign Name can remain empty while all other fields will generate random attributes. All information can be edited later in the Character Edit page.
When the initial character information has been submitted, the use will be routed to the Character Information page, which will feature the information provided by the user or randomly generated upon submission.
At the bottom of the page, the user will be presented with options to either edit or delete their character. Should the user decided to delete their character, the may do so by clicking the "Delete" button. A modal will pop up and provide the user with a final warning to confirmation character deletion, as doing so will permanently delete the character. Successful character deletion will route the character to the Character Selection page.
At any point in time, the user may enter the Character Create and Character Selection pages by accessing them through the navigation bar. Selecting "Home" will route the user back to the character creation event, while selecting "Characters" will route the user to the selection screen. The Character Selection page will present all the characters created by global users. Form this page, any character may be viewed, edited, or deleted via their aptly named buttons. Clicking on these buttons will route the user to the Character Information page, the Character Edit page, or the Deletion Warning modal, respectively.
DnDCC's functionality was built to accomodate full CRUD services, allowing it's users to create, read, update, and delete information available in the web-app. using React to host the front-end components, a component hierarchy was mapped out to focus on allowing for the user's ease of use and navigation. Routing the user from Character Create to Character View with an ever-present navigation bar that provided a route to Character Selection made for an intuitive design.
Back-end scaffolding was built to provide the front-end with RESTful API functionality. Utilizing MongoDB to create and store this information, API calls were made in the Character Select, Character View, and Character Edit components to render consistent information across all characters created.
The initial conceptualization of the DnDCC was inspired by the original first edition DnD character sheet. Taking into consideration that many of the elements present on the character sheet were intended for in-game use, the Character Create page prioritized basic player and character information to be submitted. Later renditions of the character creation event would incorporate responsive designs.
A first-draft wireframe for the Character View page incorporated many of the elements of character information referenced in the first-edition character sheet, but the amount of information was unconducive to a mobile-first approach, so elements intended for in-game use were not included.
- As a player, I want to model a character quickly and easily.
- As a player, I want to input my name.
- As a player, I want to input the campaign name.
- As a player, I want to input the character’s name.
- As a player, I want to choose the character’s sex.
- As a player, I want to choose from the basic races.
- As a player, I want to choose from the basic classes.
- As a player, I would like to choose my ability point loadout (APL).
- As a player, I want to choose from the basic backgrounds.
- As a player, I want to choose from the nine alignments.
- As a player, I want to peruse custom character loadouts that other people have created.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
