Dotemd: Appwrite & Hashnode Hackathon Project
Overview
Dotemd is a text-to-markdown code converter tool, you can create stunning markdown files within seconds by using our powerful editor.
dotemd is a cutting-edge project that brings together the power of Next.js, Appwrite, and Tiptap to provide an unparalleled markdown file creation experience. With its user-friendly interface, extensive formatting options, and time-saving features, dotemd takes your markdown creation to new heights.
Team Details
About Project
The project I have to build it, it's a unique project, it solves a particular problem a problem to write markdown code I know for a lot of people it's frustrating, for me also, that's why I'm planning to build something which helps me to write markdown code without frustration
This project is 100% open-source anyone can review it and contribute to it.
Design Thinking
The design of our editor is more likely similar to the Hashnode neptune, the reason behind this is neptune is soo much user-friendly, and that's why I took inspiration from hashnode to design our editor.
Usage Of Appwrite
I used appwrite to power up my application, I used appwrite before but now for their cloud service everything is changed before we have to do a lot of things manually like we have to use a third party to confirm emails and also we have to use docker to set up the project but now everything is changed because of the appwrite-cloud.
I have used the appwrite Authentication service to authenticate our users and also used the database to store user-generated information.
Top Features
From the editor some of the features I have listed here:
| Features | Descriptions |
| Text to markdown | You write normal text and you get a markdown code as an output |
| Copy markdown code | After finishing writing when copy you get the markdown code |
| Download markdown file | After finishing writing when downloading the file you get the markdown code. |
| You can save three templates | You can save up to 3 files for further usage |
| Saved current data automatically | Never lose your progress! dotemd automatically saves your work |
| 17 formats | We have 17 different types of formats to write different things |
| Text Alignment | You can align your text according to your need |
| Keyboard shortcuts | keyboard shortcuts help you to write faster. |
| Selectors | 2 different types of Selectors going to help you to select formats |
| Documentation | Documentation to learn about the tool |
Tech Stack
| Stuck | Usage |
| Typescript | I used TS as the main language to prevent errors in development. |
| Next.js | Used Next.js to build the whole application interface. |
| TailwindCSS | Tailwind is used for styling the application. |
| Appwrite: Auth & Database | Used appwrite to authenticate users and save users created files. |
| Tiptap | Tiptap is a Rich-text-editor it's used to build the editor. |
| Turndown | Used turndown to convert HTML to markdown. |
| MDX JS | Used MDX to show the documentation content. |
| Vercel | To host my application I choose Vercel |
Challenges We Faced
During the development 3 challenges I faced the most:
Designing the editor: I wanted to make the editor as much as simple. that's why I experimented with a lot of different designs to make it user-friendly.
While building the editor: I wanted to build a Hashnode neptune type editor for my project. While building the editor I faced a lot of new challenges, because, I don't use any type of Rich-text editor before, that's why I don't have any idea how to create neptune type editor.
Converting HTML to Markdown code: This is also new for me, converting HTML to Markdown isn't easy, I have to override a lot of things to get the desired output.
It's Open-source
Its Open-source means every single thing is open-source, I treated this project like an open-source project, and that's why I created issues and created different branches to add features and fix bugs.
I used the Github project to track the project, then I used the actions to automate some actions, then I created issue and PR templates to add new features.
All these things you can check on my repository which is added below.
Public Code Repo
Demo Link
User login demo credentials
Website