it1011 / collaborative-text-editor

NodeBook

A collaborative text editor with easy to edit and share documents. Created July, 2017

Table of Contents

• About
• Installation Instructions
• Built With
• Features

Team

• Caroline Okun
• Teresa Liu
• Sophia Torrance
• Andrew Ong

About

NodeBook is a desktop app that allows for sharing documents and live collaboration. The text editor has numerous styles and fonts built in as well as search capabilities and access to revision history. 

Installation Instructions:

Prerequisites:

Requires Node.js

1. Download the repository
2. Run npm install to download the node modules
3. Run npm run webpack to bundle the code
4. Run npm run server to run the server
5. Run npm start to launch a new window
   • You can launch multiple windows to test the collaborative functionality

Built With

• Electron
• Frontend
  • React.js
  • Draft.js
  • LESS
  • HTML/CSS
• Backend
  • Socket.io
  • Express
  • MongoDB

Features

Login and Register Page

When you first open the app you will be prompted with a login screen. For first time users, navigate to the register page and input your creditials before logging in!

Documents List

Your account will open to a preview of all your existing documents which are stored in MongoDB between sessions.

To search through the documents by title or content, type into the search bar on the upper right hand corner.

To navigate to a specific document, simply click the document's preview.

Document View

We built our editor component on top of the Draft.js library. The document editor allows for typing and text decoration, including font size, color, and alignment, all of which are accessible from the top toolbar. There are keyboard shortcuts built in for common commands such as bolding (⌘B), italicizing (⌘I), and saving the document (⌘S). Some of the available effects are demoed in the picture below. The document will also autosave every 30 seconds so users don't lose their work!

There is a search bar on the top right of the screen that allows users to search through their documents, highlighting the matching words and phrases.

We also implemented live collaboration for shared documents using sockets. A preview of the collaborative features is shown below, to see more navigate to Installation Instructions and download the repo!

Revision History

To see all of your past versions of a given document, navigate to the revision history page. There will be list of every saved version, sorted by date, on the right side of the screen. Click on one of the dates to see the old state of your document as well as add and remove differences between your old and current document.