DEV Community: Duraid Mustafa

How I Made a VS Code Extension for My Dev Tool—CodeCrate

Duraid Mustafa — Sun, 03 Aug 2025 05:51:55 +0000

🧠 Why I Built the Extension

When I first launched CodeCrate and started getting feedback for it, there was mainly one thing I was asked for: it was a VS Code extension, because most people write code in VS Code, and continuously context switching between browser and editor can become a pain.

And honestly I was feeling the same, and that is the reason why I decided that I should build an extension for VS Code so everyone can easily use CodeCrate without context switching.

🎯 Goal

The goals for the extension were simple: users should be easily able to use their snippets through the command palette or snippet shortcuts like we usually use rafce for React, but in this case, users can set these, edit these, and use these.

Also, users can easily save any piece of code just by first selecting it and using the shortcut Alt+Shift+S, and they also have full access to use and delete their snippets through the command palette.

⚙️ How It Works

The first thing was to authenticate the user; for that, first I check if the user is authenticated or not.

If not, then I show a message to ask the user to sign in with a link. In that link, there will be a token generated for the user that the user can copy and then paste inside VS Code. You can see this in the demo:

Then it fetches and loads all of their current snippets that they have saved so the user can use these through the shortcuts.

Then it registers the command to save snippets through the shortcut Alt+Shift+S.

It registers the command with a shortcut of Alt+Shift+B to see and search through all the snippets, and also they can use and delete them if they want.

You can see the demo of all that too:

The token that the user pastes expires after 60 days, so I have added the condition that whenever the API responds with Unauthorized, it will again prompt the same message to sign in so there won’t be any kind of issues.

🧩 Challenges

There were many challenges when building this; the first was authentication flow.

First, the tokens that were generated to authenticate were created using a custom JWT template to extend their lifetime, and because the extension was obviously supposed to communicate with the server of CodeCrate, the APIs were directly getting the user ID from the request. auth because I am using Clerk.

But in the case of the extension, I was just sending the JWT token from the headers, and for that reason, I created separate APIs in CodeCrate to communicate with the extension, where first I was authenticating the token that was sent with every request.

The second challenge was loading the snippets because normally in VS Code extensions that provide premade snippets, they are loaded through a package. json.

But in this case, all the snippets were dynamic, so this was not an option, so I used the registerCompletionItemProvider function of VS Code to load all the snippets dynamically.

The last challenge I faced was packaging and publishing the extension.

This was my first time building and publishing the extension.

First, there were some errors while bundling the extension because I was using webpack (it was a mistake because of how many errors and issues I faced), and then publishing was also a bit tricky because of the long process, but still, at the end of the day, the extension was complete and published.

📚 What I Learned

I learned many things in the process of building this extension because it was the first time I created an extension.

So in the process I learned the whole process of building the extension.

Like how to authenticate, how you register commands, load snippets, and communicate with the server of the main CodeCrate, and also how to package and publish the extension.

It was a great learning process overall.

🚀 Final Thoughts

I built this extension because I felt the real need for developers to have this kind of tool to make themselves more efficient.

If you want to use the extension, you can go to https://marketplace.visualstudio.com/items?itemName=DuraidMustafa.codecrate or just search CodeCrate in the extension marketplace of VS Code and download it; it is completely free.

If you have any suggestions for improvement, you can let me know on my Twitter/X handle, https://x.com/DuraidMustafa_, or you can visit my own site, https://www.duraidmustafa.com/.

CodeCrate—A Snippet Manager Built with Next.js and MongoDB

Duraid Mustafa — Sun, 13 Jul 2025 10:04:13 +0000

Why I Built CodeCrate

CodeCrate is a snippet manager for developers who want an easy way to manage their snippets so they don’t constantly need to search their old workspace file, do digging through Notion, or find the code that is lost in gists.

I built CodeCrate because I felt the genuine need for a snippet manager myself, and there wasn’t any. I also asked other developers about this, and some said they never used one, or they just used Notion or gists, but I wanted a better, simple-to-use solution so a developer/programmer of any level, from beginner to advanced, can use it.

Tech Stack

I used Next.js, TypeScript, MongoDB, and Tailwind CSS for the stack.

For the tech stack, I used a full-stack framework, Next.js, because of its built-in features for routing, SSR, and faster load times. Then I decided to use TypeScript for better type safety, and let me say this: modern-day Next.js resources are more in TypeScript than in JavaScript, and that’s a good thing. We are moving towards a type-safe version of JavaScript.

Then for the database, I used MongoDB, because it is easy to set up and use, and for ORM, I used Mongoose. I know for many, my choice for database and ORM can be seen as old, and I agree. I just used it because it is easy and simple to use for me, and probably I will give a shot to an SQL database and Prisma in my next project.

For styling I used Tailwind CSS, and for UI I used Shadcn UI because it is easily integrated and is very customizable.

Features

CodeCrate can easily save your snippets; you can save your code in 100+ languages on CodeCrate, and no, you don’t need to find the language from a long list and select it yourself.

CodeCrate auto-detects the language of the snippet, which you can select. If you still want, you can select any language yourself.

You can use titles to easily know which snippet it is.

You can also use tags to categorize your snippets; there are already some tags that you can select while adding a snippet. If you want your own tag, you can simply create your own custom tag there and add it; there's no need to open a different window or go to a different page.

For better UX I have added a shortcut, Ctrl + A, so you can efficiently access the option of adding the snippet.

You can also easily export or import your snippets in JSON format. There is also the functionality to export or import your snippets in JSON if you want backups. or directly want to share all of your snippets with someone else.

Challenges

There were many challenges for me to build this project; first was the language detection feature because I needed to check many languages and suggest users according to them, and it was a pretty complex process for me.

Then there was the tags system because there are 2 types of tags, one is default and one is custom, and there were many edge cases in this, like a user can’t create 2 of the same tags or add a default tag and custom tags; these were some tricky problems to deal with.

What I Learned

In this project the main thing that I learned is how to use Next.js APIs correctly because before this project I was just using Next.js server actions for most of the things, but in this project I really learned how to use Next.js APIs the correct way, and they are way better than server actions in most cases.

Yeah, you can submit data from server actions, but still I prefer to use Next.js APIs now.

What’s Next

Now there are many features that I will add in CodeCrate. In future updates, it would include a text editor so you can add snippets more easily, and also a VS Code extension for it so you can easily add and use snippets for your editor.

Also maybe a Chrome extension for easily saving snippets from any website.

Final Thoughts

I built this project because I felt the real need that developers need this kind of tool to make themselves more efficient.

If you want to use CodeCrate, you can go to https://code-crate-theta.vercel.app/ and start using it for completely free.

If you have any suggestions for improvement, you can let me know on my Twitter/X handle, https://x.com/DuraidMustafa_, or you can visit my own site, https://www.duraidmustafa.com/.