Introducing Zettel: A Markdown based note taking application for developers.

What is Zettel? 😍

This is a good starting point to introduce Zettel. So, zettel is basically a german word for A brief note in english. It is a markdown based note-taking App which I created for myself where I could take notes easily and all the notes will be easily available to me. I hear you saying “But you could have used Notion or obsidian, Why reinvent the wheel?” I understand your question and it is a valid one. But, I wanted to create something of my own which I can use daily, and in the process I can also learn and elevate my development skills.

Features ✨

Markdown Notes: Take notes easily using markdown format.
Markdown Preview: Easily preview your markdown in HTML.
Images: Supports image uploading.
Collections: Categorize your notes in separate collections
Collections Color Coding: Visualize your collections with a color code for each.
Beautiful UI: Work in aesthetically pleasing environment
Dark Mode: We've got Dark mode too! 🌙
Syntax Highlighting: Get beautiful syntax highlighting for your code blocks!
Open source: The code is publically available on GitHub

As of now, Zettel is only a MVP now, and I am planning on developing some more features which will make it even more awesome.

Future features 🌟

Ability to share the notes link so that others can view it.
Ability to export the notes in .md format.
Ability to delete, rename collections.
Ability to move notes to the trash
Ability to star your favourite notes.
Ability to view all your notes at once.
Syntax Highlighting for mardown notes

Technologies Used 👩‍💻️

Next 13 - Frontend
Node + Express - Backend
MongoDB - Database
TailwindCSS - CSS Library
shadcn/ui - Tailwind Components
React Query - Data Fetching Library
Formik - Form handling Library
Yup - For schema validation
TypeScript - For Type Safety
prismjs - Syntax Highlighting
Firebase - Authentication & Storage
Vercel - Frontend Deployment
Render - Backend Deployment

What I learned during the process?

I’ve learned a lot of things like how to develop a full-fledge application that can be used by others as well as myself. I’ve also learned how to

Deploy a Node+Express+TS backend on render.
Develop fully functional APIs
Use of MongoDB aggregations
Use React Query

Conclusion

I had a great time developing this application. This is my first time developing an App which can be used by others. I hope people in the development community use it and give me feedback so that I can improve this application even more.

App's Live Link - https://zettel-eight.vercel.app/

GitHub - https://github.com/shaan-alam/zettel

If you like the project, feel free to give it a ⭐