farcebook ist eine von Facebook inspirierte Full-Stack-Webanwendung, die auf einem Rails-Framework basiert. farcebook nutzt eine PostgreSQL-Datenbank und React für das Rendern von Frontend-Komponenten, wobei Redux für die Zustandsverwaltung verwendet wird.
Farcebook LIVE
Sobald sich ein Benutzer für ein Konto anmeldet, wird eine Profilseite für ihn erstellt. Jedes Profil enthält eine Kopfzeile, in der ein Profilbild und ein Titelbild gespeichert sind, einen Einführungsbereich, in dem alle aktuellen Benutzerinformationen angezeigt werden, einen Freundesbereich, in dem die ersten neun Freunde des Benutzers angezeigt werden, und einen Feed, in dem alle von ihm geposteten Beiträge angezeigt werden dem Benutzer angezeigt und auf der Pinnwand des Benutzers gepostet.
Fotos werden mit einem AWS S3-Bucket gehostet und mit dem paperclip Gem hochgeladen und in der Datenbank gespeichert.
Benutzer teilen Informationen mit anderen über Post und Comment . Beiträge können direkt auf der Pinnwand eines anderen Benutzers oder auf der eigenen Pinnwand gepostet werden (wobei die receiver_id des Beitrags der eigenen id entspricht). Benutzer können auch ein Bild hochladen, um es zusammen mit jedem Beitrag zu teilen.
Einmal erstellte Beiträge können sowohl bearbeitet als auch gelöscht werden. Ein Autor kann alle seine Beiträge sowohl bearbeiten als auch löschen, während der Empfänger eines Beitrags diese nur löschen kann.
Um Zustimmung zu zeigen, können Benutzer einen Beitrag mit Like “ markieren. Beiträge zeigen nicht nur die Anzahl der erhaltenen Likes, sondern auch die Liste der Benutzer, denen sie gefallen haben.
Benutzer können auch Kommentare zu Beiträgen hinterlassen. Kommentare werden in der Reihenfolge angezeigt, in der sie erstellt wurden. Auf Kommentare kann auch mit anderen Kommentaren geantwortet werden, wobei für jeden Kommentar alle verschachtelten Kommentare angezeigt werden. Kommentare werden über eine optionale parent_comment_id mit anderen Kommentaren verknüpft.
Benutzer können Kommentare auch auf die gleiche Weise wie Beiträge mit „ Like “ markieren. Dies geschieht mithilfe einer Tabelle mithilfe einer polymorphen Assoziation, die einen likable_type verwendet, um zu speichern, welche Art von Artikel „Gefällt mir“ gefällt. 
Eine Notification wird erstellt und an einen anderen Benutzer gesendet, wenn ein Benutzerbeitrag auf seiner Pinnwand oder einer seiner Beiträge/Kommentare mit „Gefällt mir“ markiert/kommentiert wird. Dies wird wiederum durch eine polymorphe Verknüpfung erreicht, die verfolgt, über welches Element eine Benachrichtigung erfolgt.
Benutzer haben in ihrer Navigationsleiste einen visuellen Indikator, der anzeigt, wann immer sie neue, ungesehene Benachrichtigungen haben, und ein Dropdown-Menü, das eine Liste aller ihrer letzten Benachrichtigungen anzeigt. Jedes NotificationListItem zeigt den Namen des anderen Benutzers und die durchgeführte Aktion sowie Links zum betreffenden Element an, wenn darauf geklickt wird.
Ich habe Eager Loading mit ActiveRecord genutzt, um meine Datenbankabfragen zu optimieren und die Leistung zu steigern. Beim Abrufen des Feeds für einen Benutzer werden auch alle relevanten Informationen zusammen mit jedem Beitrag zur späteren Verwendung abgefragt.
#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
...Um die Benutzer zu schützen, sind viele Funktionen zum Kommentieren und Posten auf Pinnwänden durch eine Freundschaft zwischen den Benutzern geschützt. Dies geschieht durch die Verwendung von bedingtem Rendern in React. Dabei wird überprüft, ob der aktuelle Benutzer ein Freund des Beitragsautors oder Eigentümer des Profils ist oder ob der aktuelle Benutzer versucht, mit seinen eigenen Beiträgen/Profilen zu interagieren.
// 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
}
...
