Trallo

A Single-page App inspired by Trello, where users can create and favorite boards, create and share cards and add description and comments

Technologies • Key Features • How To Use • Future Features

Check it out Live!

---

Technologies

• Ruby on Rails
• PostgreSQL
• React
• Redux
• JavaScript
• Webpack
• AWS S3

---

Key Features

Boards Dashboard

Boards & Cards

Engineered a seamless modal like transition between a board and a card by leveraging React Router props and React's "diffing" algorithm to only render the card component when the board component is present or render both if you are accessing the card url directly resulting in improved user experience & navigation and predictable behavior & integrity.

class CardShowEdit extends React.Component {
  componentDidMount() {
    this.props.requestCard(this.props.match.params.cardId);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.props.removeCard(this.props.card.id);
      this.props
        .requestCard(this.props.match.params.cardId)
        .then(() => this.forceUpdate());
    }
  }

  render() {
    if (this.props.card === undefined) {
      return null;
    }

    return (
      <div>
        <BoardShowContainer />
        <CardShow
          card={this.props.card}
          updateCard={this.props.updateCard}
          deleteCard={this.props.deleteCard}
          createComment={this.props.createComment}
        />
      </div>
    );
  }
}

image

AWS S3 Image Upload

Users can personalize their boards by attaching a background photo to a board. Leveraging Rails Active Storage and setting up a bucket in S3 it was possible to include the photo file in the form data sent to the server.

In the model:

  has_one_attached :photo

And in the component:

  handleFile(e) {
    this.setState({
        photoFile: e.currentTarget.files[0]
    })
  }

handleSubmit(e) {
  e.preventDefault();
  let formData = new FormData();
  formData.append('board[id]', this.state.id);
  formData.append('board[title]', this.state.title);
  formData.append('board[photo]', this.state.photoFile);
  formData.append('board[favorited]', this.state.favorited);
  formData.append('board[archived]', this.state.archived);
  this.props.updateBoard(formData);
}

New account creation, login, and guest/demo login

Users can sign up, sign in and log out. Users can use a demo login to try the site and must be logged in to use the app features.

Lists

Boards are made up of lists which contain cards.

Users can create, update or delete lists within a board and create, update or delete cards(tasks) within lists.

Comments

Members of a board can add comments to cards and comment's authors can edit or delete their comments.

Sharing Boards

Users can share their board with other users through a url.

---

How to use

Show Instructions

1. Install the ruby gems:

   $ bundle install

2. Install dependencies (you must have Node.js installed):

   $ npm install

3. Create, configure and seed the database running:

   $ rails db:setup

   $ rails db:seed

4. Start the rails server:

   $ rails s

5. And in another terminal window run:

   $ npm start

Go to http://localhost:3000 and you'll see the dashboard.

---

Future Features

• Adding Due Dates To Cards
• Moving Cards through Lists
• Adding New Members