DEV Community

Cover image for Introducing Zettel: A Markdown based note taking application for developers.
Shaan Alam
Shaan Alam

Posted on

5

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

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/

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay