Creating an NFT Subscription site With Underdog
Among the many wonders of Underdog is its ability to empower you to be creative with cNFTs while it takes care of the creation process for you. In this blog, we will guide you through the steps of creating an NFT subscription site using the Underdog Link SDK
Key tools that would enable you to create a site like this include:
- Underdog API key
- Next.js, React or any framework of your choice
- Underdog Protocol JS SDK
If you are building on Underdog for the first time, here are some resources to consider:
Underdog Protocol documentation
Application Flow
The application flow consists of mainly three steps:
- A collection is created for the artist.
- Users or subscribers sign in with their wallet.
- If a user has not subscribed, a cNFT is minted to their wallet to subscribe to the artist's collection.
Returning to the workflow of our application:
First we obtain the necessary Underdog API key by clicking 'Get Started' here and connecting your wallet. Once you are inside the dashboard, navigate to 'API keys' and generate your API key to enable the use of the SDK
In the initial step, we begin by configuring our Underdog client. This involves supplying the necessary network information and API keys to the createUnderdogClient function, which is provided by the Underdog Protocol SDK
As we construct our application, which includes an authentication system, we implement authentication using JWT (JSON Web Tokens). This approach involves generating a unique signature that users' wallets sign, serving as a means to verify their exclusive access to the application
After confirming that the wallet has been signed, we proceed to check whether the wallet possesses an NFT in that specific collection. This can be achieved by utilising the underdogClient.getNFTs method and providing the necessary parameters. In the event that there is no NFT, we retrieve the collection's data using underdogClient.getProjectStats by specifying the project ID. Subsequently, we create NFTs using the underdogClient.createNft method, wherein we include the project ID and NFT metadata within the body description. Finally, we encapsulate this functionality as a function, which can be used for handling authentication requests in our Next.js application
With the successful authentication and subscription process implemented in our application endpoint, we open the door to a multitude of possibilities. Imagine the range of applications, from enabling users to subscribe and receive content in the form of cNFTs to their wallets, to whitelisting users for upcoming airdrops. Artists can also leverage this tool to gain insights into their audience. All of this is made possible through the capabilities of Underdog!