Underdog Protocol
  • API Documentation
  • Quickstart
  • Guides
    • Postman
    • Endpoints
    • Authentication
    • Pagination
    • Errors
    • Webhooks
    • Architecture
  • Resources
    • Projects
      • Transferable Projects
      • Non-Transferable Projects
      • NFTs
        • List all NFTs
        • Search NFTs
        • Create an NFT
        • Retrieve an NFT
        • Update an NFT
        • Generate Claim Link
        • Revoke an NFT
        • Burn an NFT
      • Methods
        • List all Projects
        • Create a Project
        • Retrieve a Project
        • Update a Project
        • Retrieve Project Stats
    • NFTs
      • Retrieve an NFT
      • Generate Claim Transaction
    • Orgs
      • List all Orgs
    • Transactions
      • List all Transactions
      • Retrieve a Transaction
    • Webhooks
      • List all Webhooks
      • Create a Webhook
      • Delete a Webhook
    • V1
      • Collections
        • List all Collections
        • Create a Collection
        • Retrieve a Collection
      • NFTs
        • List all NFTs
        • Create an NFT
        • Retrieve an NFT
        • Update an NFT
      • Managed NFTs
        • Claim
        • Revoke
  • Examples
    • Zapier Integrations
      • Zapier + Viral Loops
      • Zapier + Github + OpenAI
      • Zapier + Github
      • Zapier + Mailchimp
      • Zapier + Shopify
      • Zapier + Calendly
      • Zapier + Hubspot
      • Zapier + Typeform
    • Underdog with Airtable
      • Create a Project
      • Create NFT on Form Submission
      • Send a Claim Link
      • Updating NFTs
    • Web3 Blog
    • Mint NFTs on iPhone
  • Use Cases
    • Solana Mobile
    • Parcl
Powered by GitBook
On this page
  • Next.js API Endpoint
  • Collect Button
  • Markdown Blog Posts
  1. Examples

Web3 Blog

Create a web3 blog where your readers can collect blog posts as NFTs

PreviousUpdating NFTsNextMint NFTs on iPhone

Last updated 2 years ago

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.

In the guide, I'll walk through the three pieces of the repo that use the Underdog API to create NFTs for 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

pages/api/nfts.ts
import { UNDERDOG_API_KEY, UNDERDOG_API_URL } from "@/lib/constants"
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}&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 })
  }
}

Collect Button

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

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.

components/CollectButton/index.tsx
...
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()
  }
}
...

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.

pages/your-blog-post/index.mdx
export const entry = {
  title: "Your Blog Post",
  description: "Add a description for your blog post",
  collectionAddress: "E6H1MYDiFhUkmAWPnxTMS9iEPpJtvMU6za5pvqUt6Hm3"
}

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

Next.js API Endpoint
Collect Button
Markdown Blog Posts
GitHub - UnderdogProtocol/underdog-nextjs-blog-starterGitHub
Logo