As I learned more about the Stellar platform over these past few days, I was amazed to see its vast potential for facilitating transfers of value. When I heard Tyler's idea of a "NFT Wizard" that combines IPFS and Stellar, I knew it would away to learn more about decentralized applications. As a musician myself, I am really excited by NFTs as a way of transferring and holding art, so this project was the perfect combination of my interests and a great opportunity to learn more about decentralized applications.

What it does

The NFT wizard is a web application that allows users to seamlessly create NFTs on the Stellar blockchain. From file to token, the wizard has you covered!

Here is the user flow:

  1. The wizard starts by asking for a file: it could be a piece of artwork, a music file, a document, or whatever else you can think of.
  2. From there, the user can enter what they would like their NFT to be called (and also the option to create more than 1, if they want to make it a fungible yet rare token).
  3. After prompting for this information about the NFT, the wizard asks for the user's public Stellar key. This is done for two reasons.
    1. to ensure that the user has sufficient balance (~2XLM) to fund the NFT
    2. to generate the transaction for the user to establish a trustline with their new token, and to create the "issuing" account, which will actually issue the asset on the blockchain
  4. From here, the user has two options:
    1. They can enter their private key: this will carry out all required transaction and deposit the NFT in their account. (this is the easiest method)
    2. They can scan the Transaction URI with their Stellar wallet to complete the transaction. Once the transaction is successful, the issuing account will create the token and send it to the user. (for people who don't want to enter their private key)
  5. At this point, the wizard has everything it needs to brew up an NFT! It uploads the the image to IPFS and saves the image to the issuing account (by adding a data entry to the ledger). With the user's trustline transaction and issuer account creation done, the wizard issues the asset using the issuing account, and then sends it over to the user!

How I built it

To build the frontend, I used Next.JS, React, and the Material UI UI framework.

To generate and submit transactions to the Stellar network, I used the Stellar SDK. In order to generate the QR code I used Stellar URI to create SEP-0007 style Stellar URIs. All of the Stellar transactions are done locally in the browser to avoid any need for a server, and so that there are no user data concerns.

For the file hosting, I used the IPFS Javascript Client. In order to make sure that the files remain online, I used Pinata's IPFS pinning service: since this requires authentication, I used a Serverless function in Next to upload the image and get the IPFS hash. The only data that is sent to this function is the file, which will be uploaded to IPFS anyway, so this averts any data concerns and also gets rid of the need for a full-fledged backend.

Challenges I ran into

This was my first time using Stellar or IPFS, so I ran into many small challenges along the way. What took me the greatest amount of time was figuring out the best flow for creating the NFT (ie. should the user be the one who issues it, or should it be an account that gets locked after issuing it). Deploying the demo to Vercel also took some time (to make sure that all the functionality still worked when not running locally). Finally, I spent a lot of time on IPFS in order to determine

Accomplishments that I'm proud of

This is my first time working with either IPFS or Stellar, and it was cool to learn more about both of them while working on a project that combines them both. Moreover, I am proud that I was able to create a fully-functional fullstack app and a live, working version on the Stellar Testnet that is accessible to all.

What I learned

This was my first project working on any decentralized application so I learned a lot! From experimenting with IPFS's decentralized file storage to Stellar's blockchain, I had a chance to gain exposure to blockchain technology. I had also never understood how exactly NFTs work and how they're made, and I learned a lot about that first hand during this project.

What's next for Stellar NFT Wizard

  • Filecoin integration: right now all the files are hosted on IPFS with Pinata's free tier: integrating with Filecoin could help with this.
  • Interface to search for NFTs and a simplified way to get the IPFS from a hash (by looking up the issuing account's data)
  • Add more options for file upload (like metadata, titles, etc.)
  • Create a streamlined API so people can add Stellar-IPFS NFT creating capabilities to their own platforms
  • UI Enhancements

Built With

  • ipfs
  • material-ui
  • next.js
  • pinata
  • react
  • stellar
Share this project: