writing-app [WIP]

I created this project out of a personal need for good writing software. When I started sharing what I’ve learned in blog posts on Medium and Dev.to, I needed a place I could write and keep all of my blog posts organized.

I went through many design iterations and coded the base of the app from February to October 2020. I then took a break to pursue other interests and came back to work on the project around August 2021. It is still a work in progress though with new features being added all the time.

The frontend was built using TypeScript & React and styled using styled-components. The project is built within a monorepo, containing front-end & server-side code as well as a package for shared values and types, and another package for the electron desktop wrapper.

The project was designed to be cross-platform and although support for running it in the browser was dropped some time ago, I plan to bring it back along with a mobile version once the project is closer to release.

Building a rich text-editor from scratch is an enourmous undertaking due to many inconsistencies across devices, browsers, and input methods, which is why I went with using the highly customizable Slate library. Eventually I migrated to the Plate editor based on Slate which retains the customizability I needed, while providing many useful features out-of-the-box.

The final stack includes among others:

• TypeScript
• CouchDB & RxDB
• React
• AWS
• styled-components
• Monorepo

Both offline editing and cloud sync were key features for this project which made choosing the tech stack challenging.

Data-ownership was another important aspect for me, which made me take a hybrid approach. The editor supports two types of documents: cloud and local. The former being stored in CouchDB and synced with an external server as well as the user’s other devices. The cloud documents also support additional features, like tags. All cloud documents can also be easily exported to markdown files and imported back.

The other type of documents is local documents. Simply put: reading and editing local markdown files through the same editor interface. Reading and writing as well as watching the filesystem for changes is done through Node.js in Electron’s main process.

Currently the only organizational feature for local documents is a reflection of the filesystem’s directory structure. The user can manually add some of their local directories to be included in the app’s library, which is then accessible within the app’s interface.

Rich organizational features like nested groups, tags, and search allow users to easily find the document they need and stay focused on writing.

The app supports two document list types: a flat list, and a nested one with collapsible sections. Building the tree view for manging groups with drag-and-drop taught me a lot about storing user-reorderable data in a database and the complexities involved.

Every panel can be toggled and resized to allow every user to adjust it to their needs and reduce distractions when writing.