Integrating Pinata for Seamless Image Uploads in Nfticket

This is a submission for the The Pinata Challenge

What I Built

I built NFTicket, a decentralized application (dApp) that allows event organizers to mint, sell, and distribute event tickets as NFTs on the blockchain. Each NFTicket grants holders access to exclusive events, digital content, or experiences.

To enhance this dApp, I’ve integrated Pinata’s Files API for efficient, decentralized file storage and delivery. Using Pinata’s CDN and image optimization features, I’m able to ensure fast, secure, and reliable access to these files, greatly improving the overall performance and user experience of the dApp.

Demo

Check out the working version of the app here: Nfticket

Screenhots:

Image upload form

Events view

My Code

Feel free to take a look at the full project code over on GitHub:
Nfticket

More Details

How I Used Pinata

Setting Up Pinata API in the dApp

First, I had to set up access to Pinata’s API using my JWT and Gateway URL. I obtained these by signing up for a Pinata account and following the Getting Started Docs for React.

Image Upload for Event Organizers

In NFTicket, event organizers can easily upload images, like posters or banners, to visually boost their event listings. This makes the events more attractive to potential ticket buyers.

I built a simple image upload form that lets organizers select an image, preview it, and then upload it to Pinata. Using the Files API, these images are stored on IPFS, ensuring they’re decentralized and permanently linked to the event through the IPFS hash in the event metadata.

Here’s the code I used for image uploads via Pinata’s API:

  const [file, setFile] = useState<File>();
  const [fileUrl, setFileUrl] = useState("");
  const [uploading, setUploading] = useState(false);

  const uploadFile = async () => {
    if (!file) {
      alert("No file selected");
      return;
    }

    try {
      setUploading(true);
      const upload = await pinata.upload.file(file);

      const ipfsUrl = await pinata.gateways.convert(upload.IpfsHash);
      setFileUrl(ipfsUrl);
      setUploading(false);
    } catch (e) {
      console.log(e);
      setUploading(false);
      alert("Trouble uploading file");
    }
  };

Displaying Images with Pinata’s CDN

Once the image is uploaded and the IPFS hash is stored, I use Pinata’s CDN to serve the image efficiently. This ensures that images load quickly, providing an optimal user experience.

  <div className="flex flex-col gap-2">
      <img
        src="https://blush-impossible-raven-254.mypinata.cloud/ipfs/bafkreifndvxnxuk52tq2mx5fgnm2bzqdlfpogt67wwc3e3vephxsao4ooa"
        alt=""
        className="h-96 w-full object-cover object-center rounded-lg overflow-hidden"
      />
      <div className="flex gap-2">
        <p>Tickets Available for minting:</p>
      </div>
      <MintButton {...props} />
    </div>

Why I Chose Pinata

Pinata offered the perfect combination of decentralized storage, performance, and flexibility that I needed for NFTicket. By using Pinata’s Files API, I was able to build a smooth image upload experience for event organizers while keeping everything secure and decentralized.

Thanks to Pinata’s CDN and file optimization tools, the dApp runs efficiently and provides a great user experience for both organizers and NFT holders. And because files are stored on IPFS, they’re tamper-proof and accessible, even if traditional storage services fail. This aligns perfectly with Web3’s values, making Pinata an ideal choice for handling media in NFTicket.

Conclusion

Integrating Pinata’s Files API into NFTicket has significantly improved how images are uploaded and managed. Pinata not only delivered high performance, but its API was also really easy to work with, allowing me to focus on the core features of the dApp, knowing that Pinata had file storage and delivery handled.

Overall, Pinata has been an invaluable tool in building a reliable, decentralized image management solution for NFTicket.