Live Site

Lifenovel is a social media website modeled after Facebook. The initial project and its key features were completed within the first 10 days since its conception as of Oct 19, 2018. For future plans of additional features, please see additional planned features.

• Technologies
• Key Features
• Technical Implementation
• Additional Planned Features
• Credits

Lifenovel is made with rails in the backend and react/redux for the frontend. The data is housed in a Postgresl Sql database.

• User Authentication
  • Signup for an account
  • Log in/Log out
  • Change profile picture
• Friends
  • Add friends
  • Request friends
  • Accept friend requests
  • View incoming friend requests
  • Remove friends
• Feed
  • View your friend's activities on the feed
• Posts
  • Post on your own wall
  • Edit your posts
  • Delete your posts
  • Post on your friends' walls
• Comments
  • Comment on posts
  • Reply to comments on posts
  • Edit your comments
  • Delete your comments
• Likes
  • Like/Unlike a post
  • Like/Unlike a comment
• Search
  • Search a user
  • 

Comments were implemented with a recursive React Component to allow for recursive commenting. Each comment has a parent_id which specifies the parent comment. Direct comments to posts have a parent_id that is null. The CommentIndexContainer is rendered within each comment to display child comments and filters for only child comments.

// comment_index_container.jsx filters
const mapStateToProps = ({ entities: { comments } }, ownProps) => {
  const { parentId, postId } = ownProps;
  return {
    comments: filterPostComments(comments, postId, parentId),
    total: countPostComments( comments, postId ),
    postId: postId,
    parentId: parentId,
  };
};

// comment_index_item.jsx

{ this.props.comment.child_comment_ids.length > 0 ?
  <div className="child-comments" >
    <CommentIndexContainer postId={ commentable_id } parentId={ id } />
  </div>
: null }

• Notifications for posts
• Notifications for comments
• Notifications for likes
• Chat/Instant messaging
• Image posts
• Uploading images/albums

A special thanks to the following technologies/resources that made this project possible:

• Node.js
• React Spinners
• Moment.js
• Pusheen Cats
• App Academy