# Web3 Blog

The Underdog API makes it easy to build your own web3 blog. Using the API, you can:

* Create Collections for each of your blog posts
* Allow your readers to collect blog posts as NFTs

You can fork an open-source example of a web3 blog to quickly get started. You'll find details on how to set up the repo in the README. 

{% embed url="<https://github.com/UnderdogProtocol/underdog-nextjs-blog-starter>" %}

In the guide, I'll walk through the three pieces of the repo that use the Underdog API to create NFTs for blog posts.&#x20;

1. [Next.js API Endpoint](#next.js-api-endpoint)
2. [Collect Button](#collect-button)
3. [Markdown Blog Posts](#markdown-blog-posts)

## Next.js API Endpoint

In `pages/api/nfts.ts`, we use two API endpoints

1. `GET /v1/nfts` to get information if the currently connected wallet has an NFT in the blog post's Collection
2. `POST /v1/nfts` to create an NFT in the Collection when a reader collects the blog post

<pre class="language-typescript" data-title="pages/api/nfts.ts" data-line-numbers><code class="lang-typescript"><strong>import { UNDERDOG_API_KEY, UNDERDOG_API_URL } from "@/lib/constants"
</strong>import { metadataImageUrl } from "@/lib/underdog"
import axios from "axios"
import { NextApiRequest, NextApiResponse } from "next"

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    if (req.method === "GET") {
      const response = await axios.get(
        `${UNDERDOG_API_URL}/v1/nfts?ownerAddress=${req.query.ownerAddress}&#x26;collectionAddress=${req.query.collectionAddress}`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${UNDERDOG_API_KEY}`,
          },
        }
      )

      res.status(200).json(response.data)
    }

    if (req.method === "POST") {
      const response = await axios.post(
        `${UNDERDOG_API_URL}/v1/nfts`,
        {
          name: req.body.name,
          description: req.body.description,
          image: metadataImageUrl(req.body.collectionAddress),
          collectionAddress: req.body.collectionAddress,
          ownerAddress: req.body.ownerAddress,
        },
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${UNDERDOG_API_KEY}`,
          },
        }
      )

      res.status(200).json(response.data)
    }
  } catch (e: any) {
    console.log(e)
    res.status(400).json({ error: e.message })
  }
}
</code></pre>

## Collect Button

Within each blog post, we have a `CollectButton` component that mints the NFT directly to the reader's wallet.&#x20;

The key part of the component is the `handleCollect` function where we take the blog post metadata (title, description, and Collection address) and send that data to our Next.js API endpoint we just created.

{% code title="components/CollectButton/index.tsx" lineNumbers="true" %}

```typescript
...
const handleCollect = async () => {
  if (publicKey) {
    toggleCollecting()
    await axios.post("/api/nfts", {
      name: entry.title,
      description: entry.description,
      collectionAddress: entry.collectionAddress,
      ownerAddress: publicKey?.toString(),
    })
    await refreshNfts()
    toggleCollecting()
  }
}
...
```

{% endcode %}

## Markdown Blog Posts

Within each blog post, we need to include information about our blog post as well as the Collection we want the blog post NFTs to be a part of.&#x20;

{% code title="pages/your-blog-post/index.mdx" %}

```typescript
export const entry = {
  title: "Your Blog Post",
  description: "Add a description for your blog post",
  collectionAddress: "E6H1MYDiFhUkmAWPnxTMS9iEPpJtvMU6za5pvqUt6Hm3"
}
```

{% endcode %}

Within the Underdog dashboard, you can create a new Collection for each blog post and upload unique artwork for each NFT.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.underdogprotocol.com/examples/web3-blog.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.