Introducing Zettel: A Markdown based note taking application for developers.
Published: 2023-09-14 13:23:51

![Introducing Zettel](https://camo.githubusercontent.com/8a3d34dfde18d9b128ff826ad4a97fa393d95c2a0e190bd250ed04ebe93ce7a5/68747470733a2f2f666972656261736573746f726167652e676f6f676c65617069732e636f6d2f76302f622f7a657474656c2d62323030342e61707073706f742e636f6d2f6f2f696d6167657325324661323765633934372d353033352d343531392d396665632d3233313661386363336562322e6a70673f616c743d6d6564696126746f6b656e3d62656336643465352d623537372d343266372d616433372d343030386636343965323531)

## 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](https://zettel-eight.vercel.app/demo-light.png)

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