DEV Community

Cover image for SnipShot: A Stylish Code Snippet Uploader Using Pinata IPFS
Mitchell Mutandah
Mitchell Mutandah

Posted on

SnipShot: A Stylish Code Snippet Uploader Using Pinata IPFS

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:
landing

Snippet Uploader and Image Generation Interface:
snippet

Generated snippet image:

generated snippet

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';
Enter fullscreen mode Exit fullscreen mode

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:

  1. 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);
Enter fullscreen mode Exit fullscreen mode
  1. 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,
   });
Enter fullscreen mode Exit fullscreen mode
  1. 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.

cheers

Top comments (3)

Collapse
 
programordie profile image
programORdie

Cool, I gonna use this when I need a code snipshot

Collapse
 
devnenyasha profile image
Melody Mbewe

Goodreads, Mitchell! Thank you for the fantastic article. I really enjoyed reading it and look forward to more of your work in the future.

Collapse
 
respect17 profile image
Kudzai Murimi

Great Job!