Farcebook은 Rails 프레임워크를 기반으로 구축된 Facebook에서 영감을 받은 풀 스택 웹 애플리케이션입니다. Farcebook은 프론트엔드 구성 요소 렌더링을 위해 PostgreSQL 데이터베이스와 React를 사용하고 상태 관리에는 Redux를 사용합니다.
원거리 라이브
사용자가 계정에 가입하면 프로필 페이지가 생성됩니다. 각 프로필에는 프로필 사진과 커버 사진을 저장하는 헤더, 현재 사용자의 모든 정보를 표시하는 소개 섹션, 사용자의 처음 9명의 친구를 표시하는 친구 섹션, 게시한 모든 게시물을 표시하는 피드가 포함되어 있습니다. 사용자에게 게시되고 사용자 담벼락에 게시됩니다.
사진은 AWS S3 버킷을 사용하여 호스팅되고 paperclip gem을 사용하여 데이터베이스에 업로드 및 저장됩니다.
사용자는 Post 및 Comment 구성 요소를 통해 다른 사람과 정보를 공유합니다. 게시물은 다른 사용자의 담벼락에 직접 게시되거나 자신의 담벼락에 게시될 수 있습니다(게시물의 receiver_id 자신의 id 와 동일함). 사용자는 각 게시물과 함께 공유할 이미지를 업로드할 수도 있습니다.
작성된 게시물은 수정 및 삭제가 가능합니다. 작성자는 자신의 모든 게시물을 편집하고 삭제할 수 있지만, 게시물을 받은 사람은 게시물을 삭제만 할 수 있습니다.
승인을 표시하기 위해 사용자는 게시물에 Like 선택할 수 있습니다. 게시물에는 받은 좋아요 수뿐만 아니라 좋아요를 누른 사용자의 목록도 표시됩니다.
사용자는 게시물에 댓글을 남길 수도 있습니다. 댓글은 작성된 날짜를 기준으로 순서대로 표시됩니다. 댓글에는 다른 댓글로 응답할 수도 있으며, 각 댓글에는 중첩된 댓글이 모두 표시됩니다. 댓글은 선택적 parent_comment_id 통해 다른 댓글과 연결됩니다.
사용자는 게시물과 동일한 방식으로 댓글에 Like 를 선택할 수도 있습니다. 이는 likable_type 을 사용하여 어떤 종류의 항목이 마음에 드는지 저장하는 다형성 연관을 사용하여 하나의 테이블을 사용하여 수행됩니다. 
사용자가 자신의 담벼락에 게시물을 올리거나 해당 게시물/댓글에 좋아요/댓글이 달렸을 때 Notification 생성되어 다른 사용자에게 전송됩니다. 이는 어떤 항목이 알림을 받는지 추적하는 연관된 다형성을 사용하여 다시 한 번 달성됩니다.
사용자의 탐색 표시줄에는 보이지 않는 새로운 알림이 있을 때마다 표시되는 시각적 표시기와 최근 알림 목록을 모두 표시하는 드롭다운이 있습니다. 각 NotificationListItem 다른 사용자 이름과 발생한 작업뿐만 아니라 클릭 시 문제의 항목에 대한 링크도 표시합니다.
데이터베이스 쿼리를 최적화하고 성능을 높이기 위해 ActiveRecord를 사용하여 즉시 로딩을 활용했습니다. 사용자에 대한 피드를 가져올 때 나중에 사용할 수 있도록 각 게시물과 함께 모든 관련 정보도 쿼리됩니다.
#posts_controller.rb
...
def feed
...
author_ids = @current_user . friend_ids + [ @current_user . id ]
@posts = Post . includes ( comments : [ { likes : :liker } , :child_comments ] , likes : :liker )
. where ( 'author_id IN (?) OR receiver_id = ?' , author_ids , @current_user . id )
. limit ( 10 )
. order ( updated_at : :desc )
. distinct
...사용자를 보호하기 위해 댓글을 달고 담벼락에 게시하는 많은 기능은 사용자 간의 우정을 바탕으로 보호됩니다. 이는 React에서 조건부 렌더링을 사용하여 현재 사용자가 게시물 작성자의 친구인지 프로필 소유자인지 또는 현재 사용자가 자신의 게시물/프로필과 상호 작용하려고 하는지 확인하여 수행됩니다.
// post_show.jsx
// Showing comment form on Posts
...
{ ( areFriends || isCurrentUser ) &&
< CommentForm postId = { id } / >
}
...
// post_form.jsx
// Showing Post form on user profiles
...
render ( ) {
if ( ! currentProfileFriends . includes ( currentUserId ) ) {
return null
}
...
