DnD Companion

Click here to visit the deployed page: (https://mydndcompanion.vercel.app/)

Names of the team members

• Max Pollock
• Stephen Sage
• Manny Gonzalez Garcia de Blas
• Nellie Allsop

n.b. Throughout the project we both pair programmed and mob programmed, so the commits made to this project may not necessarily represent what code we have worked on i.e. sometimes we may have been a driver, sometimes a navigator and sometimes a solo programmer.

A description of the project

A Dungeons and Dragons (D and D) companion app, suitable for users with no knowledge of D and D right through to experienced players. Users can access the main app without logging on, however, upon logging in they can create characters and save their attributes.

Our web request response cycle and wireframe

Please contact one of the project contributors if you would like copies of these

The overall problem domain and how the project solves those problems

Individuals who are new to D and D and advanced players (plus everyone in-between) need an easy to use, approachable app where they can:

• Create and save a character
• Roll dice virtually
• (For beginner players) Learn about the game

We solved these problems by:

• Having a ‘Create a character’ page where users can create, update, save and delete their characters
• A virtual dice roll page which features different types of die
• An intro page with a quick intro video and some guidance on how to use the app

A list of any libraries, frameworks, or packages that your application requires in order to properly function

• Accordion (from material UI): (https://mui.com/material-ui/react-accordion/)
• Auth0: (https://auth0.com/)
• Axios: (https://axios-http.com/)
• Cors: (https://www.npmjs.com/package/cors)
• D&D 5e API: (https://www.dnd5eapi.co/)
• Express: (https://expressjs.com/)
• Moment: (https://momentjs.com/)
• MongoDB: (https://www.mongodb.com/)
• Mongoose: (https://mongoosejs.com/)
• Nodemon: (https://www.npmjs.com/package/nodemon)
• React Router: (https://reactrouter.com/en/main)
• React: (https://react.dev/)
• Vite: (https://vitejs.dev/)
• PWA Vite Plugin: (https://vite-pwa-org.netlify.app/)
• Workbox: (https://github.com/GoogleChrome/workbox)

Instructions that the user may need to follow in order to get your application up and running on their own computer

We would recommend that you open this app on your phone, as it has been turned into a progressive web app using Manifest. You can also access the app via a PC, however, please be prepared that this app will not fill the entire screen.

Accessibility

Please contact one of the project contributors if you would like a screenshot of our lighthouse report

Clearly defined API endpoints with sample responses

These can be found in server.js

Clearly defined database schemas

These can be found in the folder ‘models’

References

• Google icons (https://fonts.google.com/icons)
• Google fonts (we recognise that there is a GDPR issue surrounding google fonts and in the future we could revisit this area to improve the app from a data perspective) (https://fonts.google.com/)
• Favicon generator: (https://realfavicongenerator.net/)

We’d like to thank:

• The team at Tech Educators (https://techeducators.co.uk/) for their unwavering support
• Google and ChatGPT for the plethora of information that helped guide our project
• Anthony for his fab illustrations on our home page
• https://dnd.wizards.com/ for creating Dungeons and Dragons - give a one-shot campaign a go if you haven’t already!