SpringBoard
SpringBoard collects all of your project's todo lists, notebook, and schedule into one easy to navigate dashboard.
Table of Contents
How It Works
Frontend
- React/Redux
- JavaScript
- HTML5/CSS3
Backend
- Ruby on Rails
- PostgreSQL
- JBuilder
Features of Note
Modular React Components
Headers, footers, and the wrappers for the Todo Lists, Todos, and Messages are among some of the reusable and flexible components that were engineered for SpringBoard.
Todo List and Todo In line Additions
Forms to create new lists and todo items are hidden and revealed inline by changing div classNames
:
// Reveal button and div containing the hidden form
<input
className="new-todo"
type="submit"
onClick={this.revealForm}
value="Add a to-do"
/>
<div className={`expanding-form ${this.state.newTodoForm}`} > /* ... */ </div>
// Reveal function
revealForm() {
this.setState({ newTodoForm: "revealed" })
}
NoteBook
Integrating the React-Quill library gives these notes their rich-text styling and the ability to safely re-render user-inputted text, regardless of the content.
// Using React-Quill's read-only prop to display a user's message safely
<div className="message-body-wrapper" >
<ReactQuill
value={message.body}
readOnly={true}
theme={"bubble"}
/>
</div>
In Development:
- Schedule calendar events
- View your dated to-dos on the calendar