# 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;