Step 1 — Select Area, Pod and Court

Retrieve the structure of areas, pods and courts so the user can choose where the event will take place.

Request Areas with Pods and Courts Expanded

curl -sS -X GET \
-H "x-api-key: <your_api_key>" \
"https://sandbox1.podplay.app/apis/v2/areas?expand=items._links.pods&expand=items._links.pods.items._links.tables"

Example Response (Trimmed)

Below is a simplified version showing:

• One Area
• One Pod
• One Table (Court)

{
  "items": [
    {
      "id": "19e71e9a-751e-4cfd-9f28-4de4704a3c50",
      "displayName": "Venue 1",
      "pods": {
        "items": [
          {
            "id": "b066d668-e64f-480a-ad31-110b3433c080",
            "displayName": "Pod 1",
            "timezone": "US/Eastern",
            "tables": {
              "items": [
                {
                  "id": "61e3f1c2-d23b-4eb3-bebb-77c4eeda6d03",
                  "displayName": "Court 1",
                  "displayNameShort": "C1",
                  "status": "AVAILABLE"
                }
              ]
            }
          }
        ]
      }
    }
  ]
}

How to Read This Structure

Hierarchy:

Area (Venue)
 └── Pod
      └── Table (Court)

From this response you extract:

Area

areaId = 19e71e9a-751e-4cfd-9f28-4de4704a3c50
displayName = Venue 1

Pod

podId = b066d668-e64f-480a-ad31-110b3433c080
displayName = Pod 1
timezone = US/Eastern

Court / Table

tableId = 61e3f1c2-d23b-4eb3-bebb-77c4eeda6d03
displayName = Court 1

UI Integration Patterns

Your integration must allow the user to select:

podId
tableId
startTime
endTime

How you collect these values depends on your product design.

There are two common approaches:

Option A — Step-by-Step Selection (Beginner Friendly)

This approach separates the selection process into clear steps:

1. Show list of Areas
2. After area selection → show Pods
3. After pod selection → show Courts
4. User selects time window

This approach:

• Reduces cognitive load
• Is ideal for low-code tools
• Works well for simple booking flows

Option B — Unified Schedule View (Advanced / Admin UI Style)

Your admin dashboard uses a unified schedule interface, where:

• Areas
• Pods
• Courts
• Time slots

Are visible simultaneously in a calendar/grid layout.

Example: Unified scheduling interface used in the Admin Dashboard.

In this model:

• The user directly clicks on a time slot on a specific court
• The system already knows: podId, tableId, startTime, endTime

This approach:

• Is faster for operational users
• Is ideal for internal admin tools
• Requires more frontend logic

Important

Regardless of the UI pattern you choose, by the end of this step you must have:

podId
tableId
startTime
endTime

The following section assumes you already have these values.