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
- 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
- Quill.js for rich text editing
- Tool bar with various functions
- 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
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
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.
MY OWN TEXT EDITOR
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
style properties. When it displays, these objects are used as options hashes
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.