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 ⭐

My Socials

Twitter - https://twitter.com/shaancodes

Instagram - https://www.instagram.com/shaancodes/

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