SnipShot: A Stylish Code Snippet Uploader Using Pinata IPFS

#devchallenge #pinatachallenge #webdev #api

This is a submission for the The Pinata Challenge

What I Built

I developed SnipShot, a web application that allows developers to easily create, format, and share beautiful images of their code snippets. The app uses React for the frontend, with Material-UI for a sleek user interface. The core functionality leverages Pinata's IPFS service to store the original code snippets, while also generating stylized images of the formatted code.

Key features include:

Support for multiple programming languages
Automatic code formatting with customizable indentation
Syntax highlighting for improved readability
Easy sharing via downloadable images
Secure storage of original snippets on IPFS through Pinata

Demo

Check out the live app here and generate awesome images for free: https://snipshot-eta.vercel.app/

Screenshots showcasing the app features:

Landing:

Snippet Uploader and Image Generation Interface:

Generated snippet image:

My Code

The project is available on GitHub: https://github.com/mitchiemt11/codesnap

Here's a key component of the project, the SnippetRenderer:

import React, { forwardRef } from 'react';
import { Box } from '@mui/material';
import hljs from 'highlight.js';
import 'highlight.js/styles/vs2015.css';
import { Language } from '../types';

interface SnippetRendererProps {
  codeContent: string;
  language: Language;
  spacesPerIndent?: number;
}

const formatCode = (code: string, spacesPerIndent: number): string => {
  // ... [formatCode function implementation]
};

export const SnippetRenderer = forwardRef<HTMLDivElement, SnippetRendererProps>(
  ({ codeContent, language, spacesPerIndent = 2 }, ref) => {
    const formattedCode = formatCode(codeContent, spacesPerIndent);

    return (
      <Box
        ref={ref}
        sx={{
          p: 3,
          backgroundColor: "#1e1e1e",
          color: "#dcdcdc",
          borderRadius: 2,
          display: "none",
          fontFamily: "monospace",
        }}
      >
        <pre>
          <code
            dangerouslySetInnerHTML={{
              __html: hljs.highlight(formattedCode, { language }).value,
            }}
          />
        </pre>
      </Box>
    );
  }
);

SnippetRenderer.displayName = 'SnippetRenderer';

This component is responsible for rendering the formatted and syntax-highlighted code snippet, which is then captured as an image.

More Details

Pinata's IPFS service plays a crucial role in SnipShot. Here's how I utilized Pinata in the project:

Uploading Snippets: When a user submits a code snippet, it's first uploaded to Pinata's IPFS network. This ensures that the original code is securely stored and can be retrieved later if needed.

   const blob = new Blob([codeContent], { type: 'text/plain' });
   const file = new File([blob], `snippet.${language}`, { type: 'text/plain' });
   const upload = await pinata.upload.file(file);

Creating Shareable Links: After uploading, I use Pinata's gateway to create a signed URL for the snippet. This URL can be used to access the original code directly from IPFS.

   await pinata.gateways.createSignedURL({
     cid: upload.cid,
     expires: 30,
   });

Image Generation: While the original snippet is stored on IPFS, I generate a stylized image of the code using HTML5 Canvas. This image is what users can easily share on social media or in documentation.

By using Pinata, SnipShot ensures that code snippets are not only beautifully presented but also securely stored and easily retrievable. This combination of visual appeal and robust storage makes SnipShot a powerful tool for developers looking to share their code in a more engaging way.