marcel-fr / capstone-project

Delver's Guide is an app that let's you find and create any monster and spell from the Dungeons and Dragons universe! This is a capstone project for the @neuefische web development bootcamp.

🐉 Delver's Guide – Capstone project

Delver's Guide is a list of all monsters and spells from Dungeons & Dragons.

Description

This is a capstone project for the neuefische web development bootcamp.

Delver's Guide is an app that let's you find and create any monster and spell from the Dungeons & Dragons universe!

Demo

You can find the hosted version on Vercel: Delver's Guide Demo

IMPORTANT NOTE: currently optimized for IPhone SE!

Tech Stack

• React
• React Router
• React Custom Hooks
• Styled-Components
• React Testing Library / Jest
• localStorage
• PropTypes
• 5e-SRD-API
• Figma

Project Setup

• Clone this repository
• Inside root folder install all dependencies via $ npm install
• Run app in development mode via $ npm run dev
• Client: http://localhost:3000/
• Look at the App in the IPhone SE display with the DevTools
• Run tests via $ npm run test

capstone-project's Issues

Edit Page

Value Proposition

As a ... (User, Author, logged in User...)
I want to ... (describe the goal)
so that ... (describe the reason)
​

Description

... (Wireframe, scribble, design or text)
​

Acceptance Criteria

• Describe every scenarios in detail
• e.g. all inputs are required, show warning if empty.
• ...
  ​

Tasks

• list the tasks that need to be performend within the dev team
• e.g. Components, Storybook, testing
• ...
  ​

Complexity

... (T-Shirt Sizes XS to XL)

NavButtons - Homescreen

Value Proposition

• As a user,
• I want buttons on the homescreen,
• So that I can navigate through all sites of the app.
  ​

Description

​

Acceptance Criteria

• All buttons are displayed
• Clicking a button will take you to the respective destination.
  ​

Tasks

• Create a branch
• Create the three buttons.
• Route the sites in next.js.

Bestiary-Creation-Page

Value Proposition

As a User,
I want to add my own monsters in the list,
so that I can have my own "homebrew" content.
​

Description

Add an edit button to the Bestiary-List that routes me to a Monster-Creation-Page to create new monsters!
​

Acceptance Criteria

• There is a new button in the Header of the Bestiary-List.
• Clicking on the button brings you to a new page, that lets you create a new monster.
  ​

Tasks

• Import another SVG as an Icon for the button in the Header.
• Define the functionality of the button so that it redirects to the new monster creation page.
• Create a new page for the monster creation form, with all the necessary input fields and buttons.

Header

Value Proposition

• As a user,
• I want a Header on every page,
• So I can easily navigate through all the pages in the app.
  ​

Description

​

Acceptance Criteria

• The Header is a reusable component
• Clicking the back-arrow button will take you to the respective destination.
  ​

Tasks

• Create a branch
• Create a reusable Header component
• Create functional buttons for the Header (like the back-arrow button)

Bestiary - Form

Value Proposition

• As a user,
• I want to be able to view all the details of the game's creatures in forms in the Bestiary,
• So that I can easily reference them while playing the game.
  ​

Description

​

Acceptance Criteria

• Users can click on a creature from the list to view its details.
• Each creature has a detailed form with all its relevant information, such as its name, type, size, and abilities.
• The forms are well-designed, user-friendly, and consistent throughout the app.
• The forms are editable, allowing users to add their own customizations to each creature.
• The forms have a reset button, allowing the user to undo any customizations they have made.
  ​

Tasks

• Allow users to click on a monster to view its details.
• Retrieve the detailed information for each creature from the API.
• Design and implement the creature form component, including all the relevant fields and information.
• Implement the ability to edit and reset the forms.
• Map the creatures to the appropriate components in the list.
• Ensure that the forms are well-designed, user-friendly, and consistent throughout the app.

Bestiary - List

Value Proposition

• As a user,
• I want to be able to easily access a list of all the game's creatures in the bestiary,
• So that I can easily reference them while playing the game.
  ​

Description

​

Acceptance Criteria

• The app displays a list of all the game's creatures in the bestiary.
• The list is scrollable and easy to navigate.
• Users can click on a rule to view its details in a form.
  ​

Tasks

• Add a Header that reads "Bestiary".
• Retrieve the list of all the game's creatures from the API.
• Implement pagination to prevent long lists from slowing down the app.
• Ensure that the list is user-friendly and easy to navigate.
• Allow users to click on a rule to open a form with details. (next US)

Bestiary-Information-Page

Value Proposition

• As a user,
• I want to be able to see all the details of the game's creatures in the Bestiary,
• so that I can easily reference them while playing the game.

Description

Acceptance Criteria

• Each creature has a detailed form with all of its relevant information.
• The value fields shouldn't be displayed if the monster doesn't have any value in it.

Tasks

• Retrieve all the information for each creature from the .json files.
• Implement all the relevant fields and information.

Search Bar

Value Proposition

As a user,
I want to be able to search for specific information in all the list,
So that I can quickly find the details I need.
​

Description

​

Acceptance Criteria

• The search bar appears at the top in the Header of the lists.
• Partial matches are allowed (e.g. searching for "aartuk" in the Bestiary should return "Aartuk Elder", "Aartuk Priest", etc.).
• The search is not case sensitive. (does not distinguish between uppercase and lowercase letters)
• The list updates in real-time as the user types.
  ​

Tasks

• Create a new component for the search bar.
• Add the search bar component to all pages.
• Implement a search function that filters the list based on the user's input.
• Make the search function case-insensitive.
• Make the search function allow partial matches.

API Integration

Value Proposition

• As a developer,
• I want to integrate an API for the game's rules, creatures and spells,
• So that I can easily use all the available information.
  ​

Description

• Integration of an API that provides access to the game's rules, creatures and spells.
• Ensure that the API response is formatted correctly.
  ​

Acceptance Criteria

• The app can fetch the game rules, creatures and spells data from the API.​

Tasks

• Implement API requests in the app to fetch the data.
• Parse the API response and extract the necessary data.
• Map the data to the appropriate components in the app.

Bestiary-Information-Page-Styling

Value Proposition

As a user,
I want to be able to read the text on the page easily,
so that so that I can understand the content and find the information I need quickly.

Description

​
Left: The page should have this format.
Right: This is the DnD Beyond monster statblock. I will take a lot of inspiration from this and follow the design for my app.

Acceptance Criteria

• Clear and readable font.
• Consistent layout of the page.
• Design elements that help guide the user's attention to the most important information.
  ​

Tasks

• Use StyledComponents to design the page.
• Use the DnD Beyond page as an orientation.​