🍻 Tavern Keeper

💻 Tech Stack

App

Testing

Planning, Design, Organization

🧠 Contributors

Erica Hagle

Arden Ranta

Xander Hendry

Sam Tran

Kevin Zolman

💭 Abstract

This application is a Dungeons and Dragons Encounter Builder, with the intended user being a Dungeon Master. It allows the user to fill out a form to add encounter details including encounter name, party size, party level, summary, description, treasure & rewards, and monsters. Monsters from the D&D 5e compendium can be filtered and added based on size, name, hit points, and armor class attributes. Users can also see previews of the encounters they've built and click on the preview to view the full details of the corresponding encounter.

📝 Context

This application was built as the group capstone project of Turing School of Software and Design's Front End Web Development program, Mod 4. We were given 2 weeks from kick-off to complete and submit the project for evaluation. This repo houses the FE contribution to the project; the BE repo and installation instructions can be found here: Tavern Keeper BE Repo. The deployed API can be found here: Tavern Keeper BE Deployment.

🎬 Preview

🖥️ Desktop Preview

MacBook

📱 Mobile and Tablet Views

iPad

iPhone

🔧 Installation Instructions

1. Clone this client repository to your local machine

2. Navigate (cd) to your local directory containing the repository

3. To install the dependencies

   npm install
   

4. To start the server

   npm start
   

5. On your web browser, navigate to http://localhost:3000/

🕵️ Testing Instructions

After completing installation of the app...

1. Navigate (cd) into your local directory containing the repository
2. To install Cypress dependencies

   npm install cypress
   

3. To launch Cypress

   npx cypress open
   

4. When Cypress opens, click the E2E Testing box and choose a browser (if you are currently using the Chrome browser, using Electron is recommended to avoid issues)
5. Click the Start E2E Testing in <chosen browser> button
6. Select a test and see the magic!
   • The errorhandling_spec.cy.js script will test API error handling, as well as the handling of navigating to a non-existent path
   • The functional_spec.cy.js script will test all functional elements of the application, across all pages

💡 Learning Goals

• Demonstrate knowledge you’ve gained throughout Turing
• Use an agile process to turn well defined requirements into deployed and production ready software
• Gain experience dividing applications into components and domains of responsibilities to facilitate multi-developer teams
• Explore and implement new concepts, patterns, or libraries that have not been explicitly taught while at Turing
  • For this project, both FE and BE have implemented GraphQL
• Practice an advanced, professional git workflow including a Pull Request Review
• Gain experience using continuous integration tools to build and automate the deployment of features
• Build applications that execute in development, test, CI, and production environments
• Focus on communication between front-end and back-end teams in order to complete and deploy features that have been outlined by the project spec

Challenges & Wins

🚧 Challenges

• Learning GraphQL while working on our first full-stack team project
• Work-life balance
• Minimizing scope creep

🌟 Wins

• Excellent team collaboration and communication
• Working with content that interests us
• Further practice with consulting documentation
• Successful implementation of GraphQL in both testing and deployment