Mindfulnote

An Evernote clone built on React/Redux, Ruby on Rails and hosted on Heroku

Live Site: https://mindfull-note.herokuapp.com/

Mindfulnote is a note taking website that allows users to take notes and create written documents. It was built in 2 weeks. User's can create notes, edit notes, create notebooks to organize notes and tag them to help with organization.

Key Features

• Notes
  • Create and Edit notes in real time.
  • Documents are already Saved
  • Rich Text
• Notebooks
  • Organize Notes By Notebooks.
  • Can Be deleted.
• Tags
  • Notes can be tagged with a label to better organize them
• User Authentication
  • Users can create a new account or login with an existing one.
  • Password are hashed using bcrypt and errors are rendered when a form is filled in incorrectly

Technologies

• Database: Postgresql

• Backend: Ruby on Rails

• Frontend Components: React

• Frontend State: Redux

Code Features

Auto Saving using an Async callback event handler

class NoteDetailForm extends React.Component {
  constructor(props) {
    super(props)
    ...
    this.timeout = 0;
    this.handleBodyChange = this.handleBodyChange.bind(this);
    this.changeNote = this.changeNote.bind(this);
  }
  ...
  handleSubmit() {
      const { updateNote } = this.props;
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        updateNote(this.state);
      }, 1000);
    }
 }