Skip to content

A pixel perfect Facebook clone built with React/Redux and Ruby on Rails.

Notifications You must be signed in to change notification settings

jli57/lifenovel

Repository files navigation

PRODUCTION README

Lifenovel

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.

Sign up page

Homepage

Profile page

Table of Contents

Technologies

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

Key Features

  • 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

Technical Implementation

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 }

Additional Planned Features

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

Credits

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

About

A pixel perfect Facebook clone built with React/Redux and Ruby on Rails.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published