pinata-whiteBoard

This is a submission for the The Pinata Challenge

What I Built

I built a collaborative whiteboard application called "Pinata Whiteboard" using React and Pinata IPFS services. This application allows users to draw, upload images, save their whiteboards to IPFS, and even mint their creations as NFTs

Demo

My Code

https://github.com/KUNDAN1334/pinata-whiteboard

More Details

Here are clear examples of how I used Pinata in my project:

1.Image Upload: When a user uploads an image to the whiteboard, it's stored on IPFS using Pinata's pinning service.

const handleImageUpload = async (file) => {
  const cid = await uploadFile(file);
  const url = getFileUrl(cid);
  canvasRef.current.addImage(url, 0, 0, width, height);
};

2.Saving Whiteboards: Users can save their whiteboards to IPFS, storing the entire whiteboard state.

const handleSave = async () => {
  const whiteboardData = canvasRef.current.getWhiteboardData();
  const cid = await saveWhiteboard(whiteboardData);
  alert(`Whiteboard saved! CID: ${cid}`);
};

3.Loading Whiteboards: Users can load previously saved whiteboards from IPFS.

const handleLoad = async (cid) => {
  const whiteboardData = await loadWhiteboard(cid);
  canvasRef.current.loadWhiteboardData(whiteboardData);
};

4.Listing Saved Whiteboards: The application fetches and displays a list of saved whiteboards using Pinata's Pin List API.

const listWhiteboards = async () => {
  const response = await axios.get(
    'https://api.pinata.cloud/data/pinList?status=pinned',
    {
      headers: {
        pinata_api_key: PINATA_API_KEY,
        pinata_secret_api_key: PINATA_SECRET_API_KEY,
      },
    }
  );
  return response.data.rows.filter(pin => pin.metadata.name === 'Whiteboard');
};

5.NFT Minting: Users can mint their whiteboards as NFTs, storing both the image and metadata on IPFS using Pinata.

const handleMint = async (e) => {
  e.preventDefault();
  const imageBlob = await getWhiteboardImage();
  const imageCID = await uploadFile(new File([imageBlob], 'whiteboard.png'));
  const metadata = {
    name,
    description,
    image: `ipfs://${imageCID}`,
  };
  const metadataCID = await mintNFTMetadata(metadata);
  alert(`NFT minted successfully! Metadata CID: ${metadataCID}`);
};

Blog

KUNDAN SOLANKI

What I Built

Demo

My Code

More Details

Join Our Newsletter. No Spam, Only the good stuff.

Related