๐Ÿ”ฎ Snippi NFTs: The interactive NFT collection for frontend developers

๐Ÿ”ฎ Snippi NFTs: The interactive NFT collection for frontend developers

An NFT collection and frontend code playground to mint code snippets as NFTs

ยท

5 min read

What are Snippi NFTs

Snippi NTFs is an NFT collection and frontend code playground to mint code snippets as NFTs. It's a custom web app built with Next.js that integrates a frontend code playground where you can build interactive NFTs. The generated HTML file then gets minted to the blockchain of Polygon Network and is rendered in the web app using iframes.

๐Ÿ‘‰ You can try Snippi NFTs here

๐Ÿ‘‰ Get some free MATIC for your wallet from Polygon's Faucet

** NFTs are being mintent to Polygon's Testnet: Mumbai, connect your wallet to that network.

๐Ÿ–ผ Screenshoots

Homepage home_page.png

NFT details page nft_details_page.png

Code playground code_playground.png

NFT mint mint_popup.png

๐ŸฅŠ Problem

Most NFTs we see are made by artists, but to create an NFTs you not only need to know about the technical part, but you also need to have knowledge about illustration tools, photoshop, blender or whatever it requires to create your NFT asset.

In the other hand, frontends can also create impressive stuff with just code, there are many 3D rendering engines, animation libraries, and more to build complex or easy art elements for websites. With Snippi NFTs frontend artists can easily create an NFT out of their code snippet, it's an easy form to onboard them to NFTs.

๐Ÿ’Š The Solution

To create an NFT collection and code playground to let frontend developers easily create and mint code snippets as NFTs. While most NFTs are static or video assets, making code snippets as NFTs also allows to create NFTs users can interact with.

๐Ÿ›  Tech Stack

The tech stack used for this app was:

Thirdweb SDK

We've heard of Web3 these days right. It was a new world for me, to be honest I am not that expert in Web3. Hopefully, if you know JavaScript or Python, you can start building Web3 Apps thanks to Thirdweb SDK.

Thirdweb is a platform with all the tools needed to build Web3 apps, you can build NFTs, marketplaces, tokens, packs, drops, and splits from their dashboard without the need to write code, or using its powerful SDK to develop your own code as needed.

๐Ÿ— The Making Of

Once I had the idea, I usually create an unstyled version of the app before writing the whole codebase. While exploring options for the main feature which is the code playground, I found some React packages to integrate CodeMirror as the editor. I had built a code playground in the past, but never made it with React so I finally went with this package.

Once I validate that I can create the app and the requirements of it, I made some simple designs on a figma file

Captura web_1-2-2022_114156_www.figma.com.jpeg

The code is saved in the app state and in localStorage so code is kept safe in case the app crashes. When state changes, the code is passed to a function that generates a HTML document string and then it's injected into the rendering iframe.

// @utils/generateSnippet.ts
import type { Snippet } from '@stores/playground';

const generateSnippet = (title: string, code: Snippet) => {
  return `<!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>${title}</title>
        <style>
          ${code.css}
        </style>
      </head>
      <body style="min-width: 100vw; min-height: 100vh;">
        ${code.html}
        <script>
          ${code.js}
        </script>
      </body>`;
};

export { generateSnippet };

Thirdweb's code examples were a great resource to find specific examples on how to interact with the SDK. From there I copied and adapted the examples for mint, and getAllWithOwner.

For the minting function I created an api function that receives the NFT data such as the wallet address, the code snippet, the name, and description. The HTML file is generated using a Buffer from the code snippet and then it gets passed to the mint function which utilizes my own MetaMask private key to mint it to my collection.

Initially an image of the NFTs was being generated with a node package that utilizes puppeteer in the hood, but after deploying it to Vercel found that this package does not work so I removed that option for now.

// @pages/api/mint.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { nftCollection } from '@utils/thirdweb';
import { generateSnippet } from '@utils/generateSnippet';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== 'POST') {
    res.status(405).end(`Method ${req.method} Not Allowed`);
    return;
  }

  const { address, name, description, code } = req.body;
  if (!address) {
    res.status(400).end('Missing Address');
    return;
  }

  const snippet = generateSnippet(name, code);

  const file = Buffer.from(snippet);
  /**
   * ToDo: find a way to convert the html string to image
   * vercel and netlify don't support puppeter so librearies are useless
   */
  // import nodeHtmlToImage from 'node-html-to-image';
  // const image = await nodeHtmlToImage({
  //   html: snippet,
  // });

  return new Promise<void>((resolve) => {
    nftCollection
      .mintTo(address, {
        name,
        description,
        // image,
        file,
      })
      .then((data) => {
        res.status(200).json(data);
        console.log('New NFT data ->', data);
        resolve();
      });
  });
};

export default handler;

Finally, the code is deployed to Vercel on every git push so you know how the rest works.

๐Ÿค• Known Caveats

  • NFTs does not include an image resource: initially it was included, a preview image of your html was being rendered using node-html-to-image, but because of Vercel platform limitations I had trouble with puppeteer, so I temporary removed this option. Anyways if you clone the repository, you can still make it work in local by installing the library and uncommenting the respective lines in pages/api/mint.ts path.
  • Vercel functions cold start issues: when you try to mint your NFT, you may see the loader in the "MINT" button and then it will enable again, if you don't get the confirmation alert navigate back to your user page or the "explore" page to see if your NFT was minted (it was). Unless you get that confirmation message all your code is saved in localStorage, so don't worry for losing it. (Update: it is more of a code size issue, if your snippet does not have thousands of lines of code, it should be working fine)
  • Some performance issues: as it loads a lot of frames, it gets slow. (Update: I've added browser based lazy loading for iframes and dns preconnection to ipfs.io)

๐Ÿ˜ฝ GitHub repository and demo

You can find all the code in the GitHub repository and the live demo website here; also, the collection is available on OpenSea.

Cheers! โœจ

Did you find this article valuable?

Support Freddy Gonzรกlez by becoming a sponsor. Any amount is appreciated!