Markd is an in-browser Markdown editor. I created this project as my first full stack application using a BaaS (Firebase). A lot was learned from making this project -- I will include details in a later section. The goals of this project were to:
- Create a full-stack application with Firebase
- Build something that I would find potentially useful, even if just for myself and not a wider audience
- Keep a clean uncluttered UI
Note: To use this app locally, you will need a .env file at the root of the project directory with the necessary API keys for Firebase.
Clone this repository to a local directory, move into the directory, and install the dependencies
git clone https://github.com/nronzel/markdown-editor.git
cd markdown-editor
npm installTo run the local dev server
npm run devNavigate to localhost:5173 in your browser to view the site.
To build and preview the production build of the app
npm run build
npm run previewNavigate to localhost:4173 in your browser to view the site.
You can try it out with the button on the home page. If you would like to save your documents for later retrieval or updating you can create an account, set your encryption key, and your documents will be encrypted and saved with AES 256-bit encryption.
I wrote a lot of this project with Chakra UI components, and then realized after a few hours that Chakra overrides the CSS that gets generated by the Markdown. I tried using the Chakra UI css reset component to prevent the CSS from being overwritten, but I couldn't get it to work properly.
I opted to re-write the app with CSS. I went with a very basic colorscheme and layout as I prefer a simple, more minimalist layout.
Once the authentication was implemented with Firebase, I noticed that the document contents got stored in the database in plaintext. Not good. I decided to implement encryption using the Web Crypto API. My implementation takes a given encryption password from the user, hashes it and stores the hash in the database, and uses the hash to encrypt/decrypt the markdown data with AES-256 bit encryption.
It took some time to get it implemented and I had to unfortunately recruit the help of ChatGPT for some of the implementation.
Getting the backend set up was actually really easy with Firebase, considering this was my first project with any kind of backend. The documentation does a good job explaining how to implement the various features.
One major lesson I learned from this project is to focus on getting the main functionality there first, THEN worry about details. I got lost in the encryption of the data before all of the functionality was even present, and it definitely cost me more time and headaches than it should have.
Another major lesson I learned is to create tests while, or even before, writing a component. There are a few components in this project that are too large and should be broken down and code-split. I didn't start writing tests for this project until everything was in place, and that came back to bite me. If I had tested while making the components, I would have been forced to make the components smaller and more modular which would allow for much easier testing.
To me this was one of the biggest lessons learned from this project, and going forward I will keep this in mind and try to implement proper TDD.
- download documents locally
- share documents
- templates (Github readme templates, etc.)
- alternate sign-in methods (Github, Facebook, etc.)
- styled alert boxes
final note: the security of my encryption implementation has not been verified or tested. The data does get encrypted before being stored, however I cannot verify the security of the encryption as I am not a security professional. All encryption should be fully vetted and tested before being trusted with your sensitive documents!