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

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

 5
 0
 2 minutes

Introducing Zettel

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 ✨

Zettel Image

  • 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/