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 JavaScript utility functions on DEV Community a while ago. And, people loved them and were making suggestions to improve them as well.
And, I thought what if these code snippets were stored in one organized, easy-to-access place, and what if it was driven by the community itself?
And, the idea for QuickSnip was born...
Design
Before jumping into the project, I wanted to make sure I had a clear vision. So, I sat down with ChatGPT to brainstorm ideas for the project name, logo, and architecture. After gathering all the details, I hopped onto Figma to sketch out the wireframe.
By the way, I took some inspirations from Stack Sorted. 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 React Syntax Highlighter powered by Prism.JS because it was super simple and easy to integrate.
Now, for storing the code snippets, I took inspiration from other open-source projects 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 awesome guide to help you get started with open-source projects.
After some research, I managed to create beginner-friendly guides in both README.md and CONTRIBUTING.md files.
QuickSnip is now live on Netlify! You can check it out at quicksnip.netlify.app. Why not .com? Because, well, I’m broke right now. But hey, if this video gets 50 likes, I’ll buy a custom domain!
I also launched QuickSnip on Product Hunt. It’s my first time launching a project there. So, now, you can leave a review there as well.
How to contribute
Speaking of contribution, you can either help by:
- Adding new snippets or
- Improving the code.
I have written easy-to-understand explanation in CONTRIBUTING.md 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.
Wait... there are still more.
Ok. Let's talk about future plans.
For now, the search functionality isn’t working yet. I’ve been looking into Algolia as a solution and I am planning to implement it soon. So, stay tuned!
I will keep adding more features based on your feedback and suggestions to hopefully make our coding journey easier and more enjoyable.
Final Thoughts
To wrap it up. here's a question: Do you have a favorite code snippet that you use all the time? One that you think every developer could benefit from? If so, now’s your chance to share it with the world.
As always, thanks for reading and I'll see you in the next one.
Top comments (0)