fractalbonita / capstone-project Goto Github PK

Value statement

As a board game player I want a detailed overview of interesting games on the market so that I can better choose games and plan board game sessions.

Description (text, scribble, wireframe, design)

• An image of the board game cover introduces the game.
• Title and publishing date are the main headings.
• Players, age, and playing time displayed next to each other as on board game boxes.
• Each play comes with a description as well as key features such as type, categories, and mechanisms.
• The average BGG rating is displayed as a star next to the game cover.

Acceptance criteria

• Essential game information is displayed in the same manner as essential play information.
• The description is left-aligned and divided into paragraphs for a better user experience.
• The board game cover is shown in full size.
• A back button leads back to the Games page.
• When the details page is active the navigation buttons are inactive.
• Key features (type, category, and mechanism) are button-shaped (high emphasis button style) so that they can be transformed to tags in a future approach.

Tasks

• Create GameDetails component.
• Add GameDetails component to app.
• Create GameOverviewPage component.
• Add GameOverviewPage component to app.
• Add components to Storybook.

Size

Small

Value statement

As a board game player I want an overview / list of existing games from which I can choose games I have already played and I want to play in the future.

Description (text, scribble, wireframe, design)

• Games with information from the BGG website are placed as tiles in two columns.
• A photo of the board game cover is placed above the game title.
• Enough space around the games ensures readability.

Acceptance criteria

• The title of the game should not be too long. Maximum two lines are shown, the rest is hidden.
• Information about the number of players is placed above the title.
• The title of the page is "Games".
• Images are presented in neumorphism style.
• The text must be in a readable font.
• Filter categories "all games", "played", and "wishlist" are placed above the games list.
• Selected filter category is sufficiently highlighted.

Tasks

• Research "mock" games on BGG.
• Create gameData in json format.
• Create Game, GameCollection, and Games component.
• Add components to app.
• Add styling.

Size

Small

Value statement

As a board game player I want to see details of plays added to my timeline only as needed so that I can quickly scan all my plays.

Description (text, scribble, wireframe, design)

• Plays are displayed chronologically and reveal detailed information when clicked.
• Play details include game title, date, name of players, playing time, rating, fractions, scores, and ranking.

Play timeline

Play details

Acceptance criteria

• Play overview shows a photo of the play, game title, date, and rating.
• When a play is selected, only the detailed information of this play is displayed.
• Play details are closed via an arrow button, which redirects to the play timeline.
• Information about players, fractions, scores, and ranking are listed below the basic play summary.
• The text is good readable in size and font.

Tasks

• Choose appropriate arrow icons.
• Create navigation buttons.
• Add play details components to Storybook.
• Add play details components to app.
• Resize uploaded images.

Size

Medium

Value statement

Text

Description (text, scribble, wireframe, design)

• Text

Acceptance criteria

• Text

Tasks

• Text

Size

Large

Value statement

As a board game player I want the possibility to edit and add information to my plays.

Description (text, scribble, wireframe, design)

• Plays can be edited on the page about play details.
• The edit button is placed in an easily accessible position.
• The user can confirm the action via a "cancel" or "save" button.

Acceptance criteria

• The edit button is placed on the top of the page and shows a simple edit icon.
• The edit button disappears when clicked.
• Editable content transforms to an input field for inline editing.
• The input fields are of the same style as the fields of the AddPlayForm component.
• When editing is activated two buttons pop-up, a "cancel" and a "save" button.
• The cancel button aborts changes and the content is set to the original state.
• Content edited is saved to localStorage / the database when the "save" button is clicked.
• The same field Yup validation schema as for the AddPlayForm fields apply.

Tasks

• Create edit button.
• Add edit component.
• Create cancel button.
• Create save button.
• Update PlayRanking component.
• Update PlayOverviewPage component.
• Update PlayDetails component.
• Update playsLocalStorageClient.
• Update playsRestClient.
• Add validation schema.
• Add components to Storybook.

Size

Large

Value statement

As a board game lover
I want to easily track games played with friends
so that I can observe my progress over time.

Description (text, scribble, wireframe, design)

• It is a form with multiple fields for game name, date, players names, playing time, and simple rating.
• New game (play) entry can be added via a prominent button [Add play].

Structure of the form

The date picker in action

Detailed information about the play shown after the form

Acceptance criteria

• The form reacts on submit (Enter key or button press).
• The fields game name, date and players names are required.
• The first input has focus at start and after submit.
• The new play is appended to the form.
• The text is good readable in size and font.
• The label for the text input field is placed above and aligned with the field.
• The input field for the game name accepts several words separated by a space. The total amount of characters is limited to 100.
• The date can be selected via a mobile calendar date picker. It includes at least month pagination and the selected date.
• The name field for the players accepts multiple first and last names. Player names are comma-separated. Players can enter more than one first and last name.
• The playing time is given in minutes [Playing time (min)]. Only numerical input. The minimum and maximum values are 0 and 720.
• An input of type range (slider) enables a simple rating with a minimum and maximum value of 1 and 10 and a step value of 1. The selected value is displayed to the right of the slider.

Tasks

• Create feature branch.
• Create AddPlayForm component using Formik and Yup for validation.
• Create Button component.
• Create GameTitleField component.
• Create PlayDateField component.
• Create PlayingTimeField component.
• Create PlayersField component.
• Create PlayRatingField component.
• Write components in Storybook.
• Write component tests.
• Add styles.

Size

Large

Tasks

• Install express.
• mongoose.
• Install axios.
• Install cors.
• Server-side POST request for data upload.
• Client-side POST request for data upload.

Size

Small

Tasks

• Consult MDN for information about key assignments
• Search for packages that generate uuids
• Install uuid
• Update updatePlays function to include unique ID
• Assign uuid as key to plays

Value statement

As a board game player I want to organize and filter games, which I have already played and which I want to play in the future.

Description (text, scribble, wireframe, design)

• The filter categories are placed below the heading of the Games page.
• Games can be categorized in all games, games already played, and games on wish list.
• The active filter is highlighted.

Acceptance criteria

• Filter categories are "All Games", "Played", and "Wishlist".
• Easy integrated filter; categories are sublinks of the Games page.
• The Games navigation button is highlighted when any category is active.
• The filter is highlighted in a different color than the text color (primary color) and underlined.
• Games can be added to the "Played" category by clicking on a finish icon.
• Games can be added to the "Wishlist" category by clicking on a heart icon.
• Games can be removed from "Played" and "Wishlist" via a click on the respective icon.

Tasks

• Select icons.
• Write toggle function for "Played" and "Wishlist".
• Setup user client.
• Setup games client.
• Update GameDetails component.

Size

Small

Value statement

As a board game player I want a hearty welcome so that I can instantly trust an app about board games.

Description (text, scribble, wireframe, design)

• An animation makes the user excited about the app.
• The app title is predominant; a subtitle specifies the purpose of the app.
• The app logo above the title of the app helps the user to subtly memorize and identify the app.

Acceptance criteria

• The animation should be in decent colors and easy to understand.
• The title has an unique font.
• The text must be in a readable font.
• A welcome text "Begin your board game journey" navigates the user to the main content.

Tasks

• Choose title font.
• Create animation.
• Create app logo.
• Create welcome component.
• Add welcome component to Storybook.
• Add welcome component to app.
• Write unit tests.

Size

Medium

Value statement

As a board game player I want to easily rate my last play according to the BGG rating system so that I can compare different plays.

Description (text, scribble, wireframe, design)

• Plays are rated by clicking on the respective amount of rating icons.
• The rating system ranges from 1 to 10.

Acceptance criteria

• The new customized rating component substitutes the slider.
• Each rating value is represented by a rating icon.
• The rating icon can be of any suitable shape and theme.
• The rating is displayed as number in the play overview and details.

Tasks

• Add rating component to Storybook.
• Add rating component to app.
• Display rating in play overview and details.
• Update AddPlayForm component in Storybook.
• Update AddPlayForm component in app.
• Add styles

Size

Small

Value statement

As a board game player
I need a scannable and organized overview of my plays
so that I can fully enjoy the app.

Description (text, scribble, wireframe, design)

• The name of the game, date, number of players, and playing time is shown to the right of the game board photo.
• The number of players and playing time are supported with icons for easy and fast access.

Detailed information of plays nicely organized.

Acceptance criteria

• The icon for the number of players is a group icon.
• The icon for the playing time is a time icon.
• Icons are paired with text labels, which provide a short and meaningful description of the icons purpose.

Tasks

• Create feature branch.
• Choose icons.
• Add component to Storybook.
• Add component to app.
• Add styling.

Size

Small

Value statement

As a board game player
I want to save photos taken during or after plays
so that I can memorize them better.

Description (text, scribble, wireframe, design)

• The user has the possibility to upload one photo.
• The image upload button is displayed above the input field for the name of the game played.

The updated AddPlayForm component including the image upload button

Detailed information about the play shown after the form

Acceptance criteria

• The image upload is part of the AddPlayForm component.
• An image is uploaded by clicking on an action button with an image icon.
• Only JPEG files are allowed.
• Image file is stored.
• The uploaded photo is appended to the form.

Tasks

• Create feature branch.
• Create component UploadGameBoardImage in Storybook.
• Update the component AddPlayForm in Storybook.
• Write component tests.
• Add UploadGameBoardImage component to app.
• Update AddPlayForm component in app.
• Add new styles.
• Server-side POST request for image upload.
• Client-side POST request for image upload.
• Install a middleware to enable file uploads.

Size

Medium

Value statement

As a board game player I need to easily navigate around the app so that I can quickly access relevant information.

Description (text, scribble, wireframe, design)

• The navigation comprises two buttons, one for plays and one for games.
• Icons are supported by titles.
• Navigation buttons have space between.

Acceptance criteria

• A list icon guides to the Plays page.
• A app icon guides to the Games page.
• The active link is shown in a different color.
• In addition, the active link is visually highlighted in neumorphism style.
• The titles are easily recognizable.

Tasks

• Add navigation component to app.
• Add routes to App.js

Size

Small

Value statement

As a board game player I want to add each player individually so that I can delete or change the order of players as needed.

Description (text, scribble, wireframe, design)

• The form shows one input field for a player's name.
• The icon to add additional players is shown below the input field.

Acceptance criteria

• Entering at least one player is mandatory.
• The player has the option to add as many players as needed.
• The button to add players is an icon showing a person.
• Additional players can be deleted via a clear button next to the input.
• The name of the player should be at least 2 characters.
• The maximum number of characters is 20.
• Besides alphabetical characters any other characters are allowed.

Tasks

• Choose icon.
• Create button component.
• Update PlayersField component in Storybook.
• Update PlayersField component in app.
• Update Yup validation schema.
• Update mongoose model schema.
• Add styling.
• Write tests.

Size

Small

Tasks

Unit test

• Unit functionality

Component test

• Component is rendered
• Component children are rendered
• Component tags exist
• Component functionality
• Component hooks

Integration test

• Communication between DB, API, and components works

Value statement

As a board game player I want to press a nice plus button to add plays to my timeline so that the add play form is hidden when I do not need it.

Description (text, scribble, wireframe, design)

• The plus button is placed in the right lower corner of the play timeline, which shows an overview of played games.
• The plus button reveals the add play form when clicked.

Plus button on play timeline

Acceptance criteria

• The form is hidden by default.
• When the plus button is clicked, the form appears on the whole screen.
• The form disappears when successfully submitted.

Tasks

• Choose appropriate plus icon.
• Add button to play timeline (page).
• Add component to Storybook.
• Implement behavior to show the form only when plus button was pressed.
• Implement behavior to hide form when submitted.

Size

Small

Tasks

• Use useEffect hook
• Implement localStorage.getItem
• Implement localStorage.setItem