Try Everbrain via the live demo login.
Everbrain is a single-page note-taking app that features a rich-text editor, image uploading, autosaving, organization with notebooks, and user authentification. Everbrain is an Evernote clone.
Everbrain is built using a Rails backend, PostgreSQL for the database management and jQuery/AJAX for database requests, and React/Redux for the frontend and state management. It's structured as a normalized state and uses thunks for asynchronous CRUD actions.
Everbrain's rich-text editor is built with ReactQuill, a Quill component for React, to create a clean WYSIWYG editing experience. Modifications to the ReactQuill editor inlcude a custom toolbar with edit undo and redo features, CSS styling to the Snow theme, and note autosaving using debounce.
Users can create notebooks to better organize their notes. From within the Notebooks index, users can rename and delete notebooks via modals, as well as view all notes within each of their notebooks and navigate directly to a selected note.
Users can also view their notebooks on the side nav, and when selecting a notebook, the most recently updated note is automatically loaded in the editor.
Users can create a new note using the main "New Note" button and will be immediately loaded in the editor.
From within the Everbrain editor, users have the ability to edit notes using different headings, font styles, sizes, and coloring, as well as add imgaes, links, formulas, and code blocks.
Changes to notes are autosaved but can be undone (and redone) using custom buttons added to the editor toolbar.
The editor toolbar is also hidden until the user clicks into the editor, showing the human-friendly last updated date when the editor is hidden.
Users can search all notebooks via the left search bar. As users input their search query, matching results appear in real-time, with exact text bolded for immediate search feedback.
highlightSearchText(str, text) {
const regex = new RegExp(`(${text})`, "gi");
const strParts = str.split(regex);
return strParts.map((part, i) =>
regex.test(part) ? <b key={i}>{part}</b> : <span key={i}>{part}</span>
);
}Clicking a note or notebook from the search results dropdown links directly to that note or notebook. Users also have the option to search all notes to query note contents, and Everbrain will display all the matching notes in the sidebar.
Users can add add and remove tags from notes, allowing an additional level of organiztion. When viewing all notes or a notebook's notes, the notes list can also be filter by selected a tag.
Tags can be addeded to a note from within the note editor, where inputing a tag name will search for existing matching tags or create a new tag if no matches exist.
// return array of notes filtered by tag
export const getFilteredNotes = ({ entities: { notes }}, tagId) => {
return Object.keys(notes).map(id => notes[id]).filter(note => note.tag_ids.includes(tagId));
}
// return an array of notes that meet search query
export const getSearchNotes = ({ entities: { notes } } = {}, search) => {
const notesArr = Object.keys(notes).map(id => notes[id]);
return notesArr.filter(note => {
return note.body.toLowerCase().indexOf(search.toLowerCase()) !== -1;
})
}
// fetch notes depending on whether notes index is filtered by search or tag
export const getNotes = (state) => {
const tagFilters = state.ui.tagFilters;
const search = state.ui.search;
if (!tagFilters && !search) {
return getAllNotes(state);
} else if (tagFilters) {
return getFilteredNotes(state, tagFilters);
} else {
return getSearchNotes(state, search);
}
};Users can create new accounts and login, with their session token being stored in the browser's cookies. The current user is bootstrapped to the window so that login is not required again on app refresh.
<% if logged_in? %>
<script type="text/javascript">
window.currentUser = <%= render(
"api/users/user.json.jbuilder",
user: current_user
).html_safe %>
</script>
<% end %>
<main id="root"></main>As users are adding notes to their Everbrain second brain, they should have the ability to add reminders to notes to prompt them to review or continue working on the specified note.
Currently, users can only add images and links to their notes. More embed options, such as videos (Youtube) and audio files, with in-editor previews would be the ideal evolution of embeds and a more robust editor.