Pinata
Published in

Pinata

How To Build a Token-Gated Music NFT App

With Pinata Submarine

Getting Started

For this tutorial, you’ll need the following:

Setting Up The Project

We’re going to be using Next.js to build our project. It leverages the power of React and extends it with serverless functions. The project itself will include the following:

  • Authentication using WalletConnect and WAGMI
  • Message signing to verify token ownership
  • An upload button
  • A share link
  • A token gated music player
npx create-next-app token-gated-music-player
cd token-gated-music-player
npm i pinata-submarine wagmi ethers siwe next-auth

Authenticating With Sign In With Ethereum

Next.js includes serverless functions out of the box, so there will be an api folder in the pages folder of the app. Open that up, and create a nested folder called auth. Within that folder, we’re going to create an odd looking file name, but it’s designed to handle multiple different authentication requests. That file name should be [...nextauth].js.

NEXTAUTH_SECRET=SOME SECRET PASSWORD
JWT_SECRET=ANOTHER SECRET PASSWORD
DOMAIN=localhost:3000 // In production this will be the URL of your web app
ALCHEMY_ENDPOINT=ALCHEMY ENDPOINT
SUBMARINE_KEY=YOUR PINATA SUBMARINE KEY
GATEWAY_URL=https://yourdedicatedgatewayurl.com
CONTRACT_ADDRESS=NFT CONTRACT ADDRESS

Setting Up The API

Our API is going to be pretty simple. It will be comprised of 2additional files now that we have taken care of the authentication API endpoint. The 2additional files will be:

  1. Access Token

Wiring Up The Front End

This is a simple example app designed to inspire you to go out an build something more complex. But the functionality you’ll need is all there:

  • Token Validation
  • Upload
  • Download
  • Rendering
  1. Fetch music
  2. Display audio player

Conclusion

Music NFTs are hot, but we’ve only just started to scratch the surface of what’s possible. With this guide, you can create an entire community around private music and public NFT music. But hopefully it will inspire you to do even more with IPFS and Pinata!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store