NodeBook is a desktop app that allows for sharing documents and live collaboration. We challenged ourselves by creating an app that mimics the functionality of Google Docs by providing revision history, live editing and highlighting across users, and document sharing.

screen shot 2017-07-28 at 10 06 39 am

Created July, 2017 during Horizons Summer Program 2017

Github: See the repository


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!

screen shot 2017-07-28 at 12 09 13 pm

Documents List

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

screen shot 2017-07-28 at 10 25 07 am

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

screen shot 2017-07-28 at 10 03 08 am

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!

screen shot 2017-07-28 at 10 06 39 am

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.

screen shot 2017-07-28 at 10 03 23 am

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!

ezgif com-video-to-gif

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.

screen shot 2017-07-28 at 10 25 27 am


Contributors

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