Visual Movement Live Demo

Visual Movement is a full-stack single-page application inspired by VSCO's creative platform. Visual Movement uses Rails/PostgreSQL backend with React.js and Redux on the frontend

Features

User Authentication with secure frontend and backend

User photo upload using AWS + Paperclip

User ability to follow and unfollow other profiles

User ability to like and unlike photos

Feed page to display images

User search functionality

User Feed

Block feed showing 4 individual images on each line with the user profile links underneath each. Feed generated based on users followed

Upload Photo

Users can upload individual photos for their profile feed with and input for photo caption

User Profile

Users can view other profiles and see their images within a Masonry layout.

Current User can select to follow profile

Current User can view other user's liked photos

<Masonry className="profile-images-container">
  {
    this.props.images.reverse().map(image => (
    <li key={image.id} className="profile-images">
      <Link to={`/images/${image.id}`}>
        <img src={image.image_url} />
      </Link>
    </li>
    ))
  }
</Masonry>

Achieved Masonry blocks using Masonry for React while displaying as block.

let followButton;
if (this.props.currentUser.id === parseInt(this.props.match.params.userId)){
  followButton = null;
}
else if (this.props.follows === false){
  followButton = (
    <button
      className="follow-button"
      onClick={this.handleFollow}>
      Follow
    </button>
  );
} else if (this.props.follows === true){
  followButton = (
    <button
      onClick={this.handleFollow}
      className="unfollow-button">
      Unfollow
    </button>
  );
} else {
  followButton = null;
}

Set up Follow function by sending back a boolean from jbuilder whether the current user was following the user profile page. The functionality would depend on the case of the boolean.

Photo View

Users can click images to view larger version including its description and date of creation

Users can like photos from this view