I built a library of code snippets

This article is more like a coding journey/journal, where I explain the "behind the scenes" and explain my thought process. If you prefer visual version, I've also made a video of it:

Idea

I've been writing code for over three years now, and one thing that takes up most of my time is repetitive code. As programmers, we don't like repetitive work, especially, writing the same code over and over again. So, I thought why not store all these repetitive pieces of code in one place? Somewhere I could just copy and paste from whenever I needed.

This idea was brewing in my head for a while. I also remembered sharing So, shout-out to them.

After a few days, design was ready, and it was time to move on to the fun part: coding.

Coding

I decided to go with React, TypeScript, and Vite. Frontend took around a week to get everything in place.

Then came the backend. I wanted to use a routing system inspired by Stack Sorted.. Since it was a single-page application, I ran into several issues with routing. But after a lot of trial and error, I managed to get it working.

However, after a week-long break and revisiting the code, I knew that the code was impossible to understand, not to mention maintaining it in the future. So, just like a normal programmer, instead of refactoring, I decided to scrap it all and start over.

This time, I simplified the architecture and used Context API for state management. It’s not the cleanest code ever, but hey, if it works, it works!

For syntax highlighting, I chose and decided to use a local database, so others can add their own snippets easily. The snippets are stored in JSON files under the /public/data folder. Each programming language has its own file, and within each file, snippets are grouped into categories.

Here’s an example of how it’s structured:

{

  "title": "Name of the snippet",

  "description": "A short explanation of what the snippet does",

  "code": [

    "your code goes here",

    "  this is a newline with a space"

  ],

  "tags": ["tag1", "tag2", "tag3"],

  "author": "your_github_username"

}

For code part, initially, I used single-line string to store the snippet code. It was compact but at a cost of readability.

After some back-and-forth with ChatGPT, I realized I could use arrays instead. That made the code so much easier to inspect and understand.

// before

{

  "code": "def reverse_string(s):\n   return s[::-1]"

}



// after

{

  "code": [

    "def reverse_string(s):",

    "    return s[::-1]"

  ]

}

After many more UI adjustments and hours spent cleaning up the code, QuickSnip was finally coming together.

Documentation

But, there was something missing. For every open source project, there should be a clear documentation to help contributors understand what your project is about and how they can contribute.

I wasn’t very experienced with managing open-source project, but by some chance, if you type contributing.md into your browser, it will take you directly to an gets 50 likes, I’ll buy a custom domain!

I also launched QuickSnip on on how to contribute to this project, along with adding snippets, categories and languages.

Remember: whether you're fixing a tiny typo, found a bug or have a feature request, every bit means a lot. Thank you! :)

Future plans

After weeks of coding and debugging, I can now proudly check off this mark.

Ok. Let's talk about future plans.

For now, the search functionality isn’t working yet. I’ve been looking into with the world.

As always, thanks for reading and I'll see you in the next one.