Home page

[JonoSommers]

Description:
The Home Page should display the users username at the top of the page. Below that will be the Search Container which has two buttons (Pokemon and MTG) that will redirect the user to the search for that card type. Below the search buttons will be a Binders Container which will hold the list of users binders (by default every user will have a default binder that is made upon account creation). Below the list of binders is the 'Create Binder' button which pulls up the binder creation form (contains Binder name input field and a 'Create' button to confirm creation). Lastly, at the bottom of the Home Page will be the Favorites Container which holds an array of the users favorited cards, displayed as 'mini posters'.

Details:

• Username is displayed at the top of the Home Page.
• Pokemon button exists in the Search Container and takes the user to the Pokemon Card search view (a.k.a Pokemon Collection).
• MTG button exists in the Search Container and takes the user to the MTG Card search view (a.k.a MTG Collection).
• Binders container contains the default binder that is given to a user when they successfully create an account, as well as the binder the user creates.
• Create Binder button exists in the Binders container below the users list of binders and pulls up the Binder Creation form (contains Binder Name input field).
• At the bottom is the favorites container that displays an Array of the users favorited cards as 'mini posters' (favoriting cards is done from the Card View within a Binder).

Examples:

• Request Body for Creating a New Binder:

{
  "binderName": "My New Binder"
}

• Response Body for Creating a New Binder:

{
  "message": "Your binder 'My New Binder' has been successfully created.",
  "binder": {
    "id": 1,
    "name": "My New Binder",
  }
}

• Response Body for Retrieving User's Binders (including default binder):

{
  "binders": [
    {
      "id": 0,
      "name": "Default Binder",
      "cards": []
    },
    {
      "id": 1,
      "name": "My New Binder",
      "cards": []
    }
  ]
}

• Response Body for Retrieving User's Favorites:

{
  "favorites": [
    {
      "cardId": 101,
      "name": "Pikachu",
      "type": "Pokemon",
      "image": "https://example.com/images/pikachu.png"
    },
    {
      "cardId": 202,
      "name": "Black Lotus",
      "type": "MTG",
      "image": "https://example.com/images/black-lotus.png"
    }
  ]
}

Acceptance Criteria:

• User's Username Displayed:

  • The Home Page shows the logged-in user's username at the top of the page.

• Search Container:

  • The Home Page contains a Search Container with two buttons:
    • A Pokemon button that redirects the user to the Pokemon Card search view (Pokemon Collection).
    • A MTG button that redirects the user to the MTG Card search view (MTG Collection).

• Binders Container:

  • The Home Page contains a Binders Container displaying:
    • The default binder automatically created for the user during account creation.
    • Any additional binders the user has created.
  • The Create Binder button is present below the list of binders and:
    • Opens a Binder Creation form with a Binder Name input field.
    • Clicking Create successfully creates the new binder and adds it to the list of binders.

• Favorites Container:

  • The Home Page displays a Favorites Container at the bottom:
    • It shows an array of the user’s favorited cards, represented as 'mini posters' with card names and images.
    • Favoriting cards is done from the Card View within a Binder.

• Functionality of Buttons and Forms:

  • The Pokemon and MTG buttons redirect the user to the appropriate card search view.
  • The Create Binder button opens the Binder Creation form and creates a binder upon submission.

• UI:

  • The Home Page UI is responsive and visually structured as described.
  • All elements (username, buttons, containers, etc.) are displayed in the correct order and properly aligned.

• Tests:

  • All user interactions, including button clicks, form submissions, and state updates (e.g., adding binders or favoriting cards), are tested and pass successfully.