EasyNote

Live Demo
Design Doc

EasyNote, a single-page clone of Evernote, is an application to create and organize rich-text notes online. It allows user to create an account, create notes, and manage them via notebooks and tags easily.

Technologies

EasyNote is built with

• Ruby on Rails for data management on backend
• React and Redux for dynamic frontend
• PostgreSQL database

Feature

User Authentication

User can sign up or login securely.

Notes CRUD, with rich-text editor

User is able to create notes with rich-text editor.

Notebooks

Notes can be organized by Notebooks.

Notes belonging to individual notebook is displayed.

Tags

Notes can be tagged with multiple tags

Notes belongs to individual tag is displayed.

MISC

• Modal, when icons are clicked, open up notebooks and tags index table with modals.

openModal() {
  if (this.props.modal === "/notebooks" || this.props.modal === "/tags") {
    const modals = document.getElementsByClassName(`${this.props.modal.slice(1)}-modal-area`);
    for(let i = 0; i < modals.length; i++) {
      if(modals[i].classList.contains("is-open") === false) {
        modals[i].classList.add("is-open");
      }
    }
  }
}

• Configure and render the rich-text editor (React-Quill)

const toolbar = [
  [{ font: [] }],
  [{ size: ["small", false, "large", "huge"] }],
  [{ color: [] }, { background: [] }],
  ["bold", "italic", "underline", "strike"],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ align: [] }],
  [{ 'indent': '-1'}, { 'indent': '+1' }],
  ["blockquote", "code-block"],
  ["link", "image"],
  ['clean']
];

<ReactQuill
  value={this.state.body_with_style || ""}
  modules={{toolbar}}
  placeholder="Start Typing here..."
  onChange={this.handleBodyChange}
/>

Application Structure

1. NavSide Bar

• Create-note button
• Navigate through notes, notebooks, and tags
• logout button

2. Rich-text editor

• Create and edit notes, implemented with React-Quill

3. Notes

• Display all notes

4. Notebooks

• Display all notebooks
• Display notes in each notebook

5. Tags

• Display all tags
• Display notes with each tag

Challenges

• Handle many to many association for notes and tags, and properly display results on frontend.
• Reuse the same main page for notes/notebooks/tag, and properly show and hide modals.
• To properly use React-Quill, it required reading through API since some methods are defined slightly different.

Future Features and Improvement

Search

• Allow user to search notes by title
• Allow user to search by tags and notebooks

Separate Delete page

• Add separate deleting page to for user to confirm the deletion on each note

MISC

• Allow user to remove a specific tag for an individual note
  • deleting tagging only without affecting notes and tags
• Sort notes
  • sort notes with created/updated time