Letternote is a clone of famous note taking web app Evernote. Letternote is a single page application developed using Ruby, Rails, and PostgreSQL for the backend and React and Redux for the frontend. Letternote incorporated Font Awesome, Google Font, React-Quill, and Animate.css libraries. The project was designed and built in 10 days.
Letternote let users to create notebooks that contains many notes that users can create, allowing users to manage their notes by organizing the notes with notebooks.
# Features
- Secure frontend to backend user authentication using BCrypt.
- Users can create and edit notes using a Quill-enabled rich text editor.
- Notes support images and animated GIFs.
- Users can see all the notes they created.
- Users can see notes from the notebook of interest.
Every notebooks that user create are only accessible by that particular user. When user is logged in, the logged in user will only see the notebooks that current user created.
Every user gets their own unique session id. When a user signs in, that user's session id is used to match all the notebooks that matches user's session id.
//Notebooks are filtered through session id in entities. Only filtered notebooks are returned.
export const selectNotebooks = state => {
return Object.values(state.entities.notebooks)
.filter((note) =>
note.author_id === state.session.currentUserId);
};There are many different ways to handle save the content of user's input. Letternote uses debounce from lodash to save users input. Debounced action gets triggered when user stopped inputting for specific amount of time. As how Letternote is currently set, user's input will be saved after 1 second of idle time.
// Action note will be invoked when user stopped typing for 1 second.
import { debounce } from 'lodash';
handleChangeBody(value) {
this.setState({ body: value },
debounce(this.actionNote, 1000)
);
}
handleChangeTitle(e) {
this.setState({ title: e.target.value },
debounce(this.actionNote, 1000)
);
}To keep code DRY, similar components were combined into a singular, more adaptable component to avoid rendering multiple copies of what was essentially the same html in different classes. This was done for Sign in and Sign up page as well as sign up form on the side of the main page.
// By passing different formType props, the sign up form will render differently.
//container
const msp = ({ errors }) => ({
errors: errors.session,
formType: "Create Account",
navLink: <Link to="/login">Sign in</Link>
});
//component
renderMessage() {
if (this.props.formType === "Sign in") {
return <h6>Do not have an account?</h6>;
}
return <h6>Already have an account?</h6>;
}
renderSubmitButtonMessage() {
if (this.props.formType === "Sign in") {
return <p>Continue</p>;
}
return <p>Create Account</p>;
}Considering 10-day working time period, Letternote was focused on simplicity with few of the crucial functionalities of Evernote. Keeping code manageable was prioritized over cloning every major feature of the target app.
As this project was a smaller-scale portfolio piece being built in a relatively short timeframe, convenience and speed was prioritized over scalability. Rails was chosen due to its relational database and RESTful architecture.
React and Redux was chosen to make the overall app a single page web application. Session, notebooks, notes, errors, and modals all have separate reducers and actions to normalize the state and optimize overall speed of the application.
- Tags and Taggings
- Note Search
- Sort by date updated.