🎨🖌️Digital Collaborative Sketchbook: A Web App for Creating and Storing Art ✎

Shefali — Mon, 14 Oct 2024 06:14:25 +0000

This is a submission for the The Pinata Challenge

What I Built

I created a web application that allows users to draw digital sketches and upload them to Pinata for storage on the IPFS network. The application features a user-friendly drawing interface with various tools, including colors and brush sizes. Once a sketch is complete, users can download it as an image file and upload it to Pinata, ensuring that their artwork is securely stored and easily accessible.

Demo

You can try out my application (demo) [https://sketchbook-pinata-client.vercel.app/]

My Code

You can view the source code for my project on GitHub: GitHub Repository

More Details

I utilized Pinata to manage the upload of images generated by the sketching tool. Here are some key features:

IPFS Uploads: Once a sketch is saved, the image is converted into a Blob and uploaded to Pinata, which provides a secure and decentralized storage solution.
Efficient File Management: Each upload is linked to a specific user (if authentication is implemented), allowing for organized management of their artworks.

Key Implementation Steps:

How to Obtain a Pinata API Key
To integrate Pinata with your project, follow these steps to obtain an API key:

Sign Up or Log In to Pinata:
Go to https://pinata.cloud/ and create an account or log in if you already have one.
Create an API Key:
After logging in, go to the "API Keys" section in your dashboard.
Click "New Key" to create a new API key.
Provide a name for the key and configure the permissions you need (e.g., pinFileToIPFS for uploading files).
Click "Create", and you will receive an API key, secret, and JWT (JSON Web Token). Copy these as they are needed for your project.
Store the API Key Securely:
In your Next.js project, create a .env.local file to store the API key securely:

NEXT_PUBLIC_PINATA_JWT=your_jwt_token_here

Replace your_jwt_token_here with the JWT you obtained from Pinata. Ensure that you do not expose this key in your codebase or publicly.

How I Built the Sketch App

Image Conversion: I used the canvas.toDataURL() method to convert the drawn sketch into a Base64 string, which is then transformed into a Blob for uploading.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);

Pinata Integration: Using the Pinata API, I sent the Blob as a file in a multipart/form-data format. This ensures that the file is properly handled by Pinata, and upon successful upload, users receive a unique IPFS hash for their sketch.

const downloadSketch = () => {
    const URL = canvas.toDataURL('image/jpeg');
    const anchor = document.createElement('a');
    anchor.href = URL;
    anchor.download = 'sketch.jpg';
    anchor.click();
};

 const uploadToPinata = async (anchor) => {
        const token = process.env.NEXT_PUBLIC_PINATA_JWT;

        const form = new FormData();
        const blob = await fetch(anchor.href).then(anchor => anchor.blob()); 
        const file = new File([blob], 'sketch.jpg', { type: 'image/jpeg' });
        form.append("file", file);

        const options = {
            method: 'POST',
            headers: {
                Authorization: `Bearer ${token}`, 
            },
            body: form            
        };


        try {
            const response = await fetch('https://uploads.pinata.cloud/v3/files', options);
            const data = await response.json();
            if (response.ok) {
                console.log("Upload successful:", data);
                return data; 
            } else {
                console.error("Error uploading to Pinata:", data);
            }
        } catch (error) {
            console.error("Error uploading to Pinata:", error);
        }
    };

User Feedback: After each upload, users are notified of the success or failure of the operation, enhancing the user experience.