DEV Community

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

Posted on

13 8 9 7 7

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

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

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!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay