CodeCrate—A Snippet Manager Built with Next.js and MongoDB
Duraid MustafaWhy 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/.
Subscribe to my newsletter
Read articles from Duraid Mustafa directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Duraid Mustafa
Duraid Mustafa
I am a developer who believes in creating what matters. Every time I write a line of code, I ask myself one very simple question: “Is this going to help someone?” For me, it began with a curiosity and grew into a love for developing digital solutions to address real issues. I preach concentrated learning, clean code, and purposeful building. No matter if it is a small utility or a large application, I treat it the same with regard to quality and user experience. My philosophy is simple: ship fast, but ship clean. I’d rather build one thing really well than 10 things badly. That attitude informs every architectural decision I make and every interface I design and every feature I build.