Creating a Profile UI

Here’s how to create a simple profile page. We’ll use GET profile, GET followers, and GET following to display information about a user and their social connections.

To get their username, we can pass their id or username to GET profile

await fetch(
  'https://api.usetapestry.dev/v1/profile/__ID_OR_USERNAME__?apiKey=YOUR_API_KEY',
)

And let’s imagine our UI has a field for users to update their bio and profile picture. We can add these to their profile on the protocol using PUT profile/update

await fetch('https://api.usetapestry.dev/v1/profile/update?apiKey=YOUR_API_KEY', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    properties: [
      {
        key: '',
        value: '',
      },
    ],
    blockchain: 'Solana',
    namespace: 'Primitives',
  }),
})

Now, we will get all of this information back when we call GET profile again:

• username
• bio
• profile image
• following count
• followers count

To enable users to click inside the following & followers counts and get information on each user, we can GET following and GET followers.

await fetch(
  'https://api.usetapestry.dev/v1/profile/followers/__STARTID__?apiKey=YOUR_API_KEY',
)

await fetch(
  'https://api.usetapestry.dev/v1/profile/following/__STARTID__?apiKey=YOUR_API_KEY',
)

These calls will return data in the following structure:

[
  {
    "properties": {
      "ownerWallet": "2qrWc9p5vatLH3kp4CiVXrdQ4V293d8qzmg4ziez6T4k",
      "id": "magiceden",
      "username": "magiceden"
    }
  },
  {
    "properties": {
      "ownerWallet": "DPpSMtNnvwNeYhECNv125pfXqYbB2BKbFXaBnpwUc8Js",
      "id": "idetssx",
      "username": "idetssx"
    }
  },
  {
    "properties": {
      "ownerWallet": "H2rVxNEiis9zkhxmjAsHrur3apwABxgKMAtj42P4YDDF",
      "id": "pumptothemoon",
      "username": "pumptothemoon"
    }
  }
]

From here, we can use the id or username to hyperlink to each additional user profile, enhancing discoverability inside our app.