Zettel: Markdown based Notes Application
Link to open source: https://github.com/shaan-alam/zettel
Link to Live Project: https://zettel-eight.vercel.app/
Introducing Zettel: Your Markdown Note-Taking Companion
Elevate your note-taking experience with Zettel – a harmonious blend of simplicity and sophistication. Seamlessly capture thoughts and ideas in the elegance of Markdown, while effortlessly organizing them into vibrant collections, each adorned with its unique color code for easy categorization. Unveil the beauty of your code with syntax highlighting, and embrace the comfort of Dark Mode for extended productivity. Welcome to Zettel, where note-taking becomes a refined art, and your ideas find a canvas to flourish.
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
Technologies used:
- Next 13 - Frontend
- TailwindCSS - CSS Library
- shadcn/ui - Tailwind Components
- React Query - Data Fetching Library
- Formik - Form handling Library
- Yup - For schema validation
- TypeScript - To add types to the application
- prismjs - Syntax Highlighting
- Firebase - Authentication & Storage
- React Markdown - Render markdown in HTML
- next-themes - To handle light/dark mode switching
