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.
EasyNote is built with
- Ruby on Rails for data management on backend
- React and Redux for dynamic frontend
- PostgreSQL database
User can sign up or login securely.
User is able to create notes with rich-text editor.
Notes can be organized by Notebooks.
Notes belonging to individual notebook is displayed.
Notes can be tagged with multiple tags
Notes belongs to individual tag is displayed.
- 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}
/>
- NavSide Bar
- Create-note button
- Navigate through notes, notebooks, and tags
- logout button
- Rich-text editor
- Create and edit notes, implemented with React-Quill
- Notes
- Display all notes
- Notebooks
- Display all notebooks
- Display notes in each notebook
- Tags
- Display all tags
- Display notes with each tag
- 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.
- Allow user to search notes by title
- Allow user to search by tags and notebooks
- Add separate deleting page to for user to confirm the deletion on each note
- 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