Skip to content

Latest commit

 

History

History
209 lines (140 loc) · 3.69 KB

hints.md

File metadata and controls

209 lines (140 loc) · 3.69 KB
Raw

Hints

Hint #1: Database and Table Hints

The example implementation uses these tables:

Database name: inspiration_board_development

Table name: board

Columns:

  • board_id, int, primary key
  • title, string
  • owner, string

Table name: card

Columns:

  • card_id, int, primary key
  • message, string
  • likes_count, int
  • board_id, int, foreign key to board_id in board

This implies that there are two models:

  1. Board
  2. Card

Hint #2: Components

The example implementation uses these components.

Feel free to inspect the example implementation using React Dev Tools for more inspiration.

Components:

  1. App
  2. Board
  3. NewBoardForm
  4. CardList
  5. NewCardForm
  6. Card

Note: Why isn't there a BoardList component? There's not really a good reason, besides a weird decision. Not every design turns out perfectly! Many designs evolve over time.

Hint #3: Props and State in "Board"-related Component

Don't forget that these are here to inspire your solution. They are not requirements!

The example implementation uses these props and state in the board-related components.

Feel free to inspect the example implementation using React Dev Tools for more inspiration.

In the container component that holds data about boards

State:

  • boardsData
  • selectedBoard
  • isBoardFormVisible

Board

Props:

  • board
  • onBoardSelect

NewBoardForm

Props:

  • createNewBoard

State:

  • title
  • owner

Hint #4: Endpoints in the API

The example implementation defines these endpoints.
  • GET /boards
  • POST /boards
  • GET /boards/<board_id>/cards
  • POST /boards/<board_id>/cards
  • DELETE /cards/<card_id>
  • PUT /cards/<card_id>/like

Hint #5: Requests to the API

Don't forget that these are here to inspire your solution. They are not requirements!

In the example implementation, the front-end layer sends these request bodies to the back-end API.

Every time the front-end sends a request to the back-end, and the request needs to send data about a board, the HTTP request includes these key-value pairs:

{
    "title": ...,
    "owner": ...
}

Every time the front-end sends a request to the back-end, and the request needs to send data about a card, the HTTP request includes these key-value pairs:

{
    "message": ...,
    "likes_count": ...,
    "board_id": ...
}

Hint #6: Responses from the API

Don't forget that these are here to inspire your solution. They are not requirements!

In the example implementation, the back-end API sends back these responses to the front-end layer.

Every time the API sends back data about a board, the HTTP response includes these key-value pairs:

{
    "board_id": ...,
    "title": ...,
    "owner": ...
}

When the API sends back a list of boards, the HTTP response looks like:

[
    {
        "board_id": ...,
        "title": ...,
        "owner": ...
    },
    {
        "board_id": ...,
        "title": ...,
        "owner": ...
    }
]

When the API sends back a card, the HTTP response looks like:

{
    "card_id": ...,
    "message": ...,
    "likes_count": ...,
    "board_id": ...
}

Lists of cards are in an array:

[
    {
        "card_id": ...,
        "message": ...,
        "likes_count": ...,
        "board_id": ...
    },
    {
        "card_id": ...,
        "message": ...,
        "likes_count": ...,
        "board_id": ...
    }
]