No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Heroku Link

FroogleDocs is a GoogleDocs-inspired, full-stack web application. Its backend is created with Ruby on Rails and PostgreSQL, while its frontend utilizes the Redux framework and React.js for a seamless experience.

Features & Implementation

Doc Selection/Search

image of docs index Features:

  • Dynamic Search bar
  • Edit/Rename/Sort Docs

Docs are stored in the Rails backend. Each belongs to a user, and that user will see all of their docs displayed at the index upon logging in.

The store also holds these documents in its main state, as it is possible to rename/delete them from the index page, as well as search for them--which dynamically re-renders the page to display the search results.

Rendering, Editing, and Commenting on Docs

image of doc editing


  • Quill.js for rich text editing
  • Tool bar with various functions
  • Auto-Saving
  • Comments can be made on any selected text in the doc
    • Full CRUD functionality
    • Comment boxes will dynamically move to the location of their selected text

Documents are opened, saved, edited, and displayed on the page using dynamic HTML.

The Quill.js library was used for rendering/rich-text editing, and the innerHTML contents of its container were used to serialize the doc to save it in Rails, under the column name content.

The top of the page displays the document's title, which can by dynamically updated by simply typing into the form.

Documents will automatically save after a user stops' typing for 2 seconds.

Comments are displayed on the right side of the page, with relative timestamps.

When a user clicks on a selection of text that houses a comment, that comment will move to the text itself.

This is done via React, with a small touch-up jQuery animation. Whenever a user clicks the editor component, a selection range is recorded to its local state, which is then passed to the comments list. If that selection falls in range of any of the comments' selection ranges, the comment is toggled to selected and its css properties are changed accordingly. Because this even triggers on every click, the comment will be deselected if the user clicks anywhere else.

Bonus Features


NOTE: currently under production

My biggest plan is to completely remove quill.js from my project, and use my own rich-text-editor, made completely from scratch.

Currently, I have all in-line styles (both stackable and absolute styles) working, and have block-styling in a roughly working state.

This is done using a textarea as a (completely hidden) input. Instead, it will be mapped against a canvas component, which will contain a 1:1 arrangement of Javascript objects which will house all of the HTML/CSS style properties. When it displays, these objects are used as options hashes for a React character component.

Multi-User Docs

In addition to editing your own docs, users will be able to whitelist other users and share a doc, making it editable/commentable by multiple users at the same time.


Users will be notified when someone shares a document with them, or when another user leaves a comment on one of their documents.