farcebook est une application Web full-stack inspirée de Facebook et construite sur un framework Rails. farcebook utilise une base de données PostgreSQL et React pour le rendu des composants frontaux, Redux étant utilisé pour la gestion des états.
farcebook EN DIRECT
Une fois qu'un utilisateur ouvre un compte, une page de profil est créée pour lui. Chaque profil comprend un en-tête qui stocke une photo de profil et une photo de couverture, une section Intro, qui affiche toutes les informations sur les utilisateurs actuels, une section Amis, qui montre les 9 premiers amis de l'utilisateur et un flux qui affiche tous les messages publiés par l'utilisateur et publié sur le mur des utilisateurs.
Les photos sont hébergées à l'aide d'un compartiment AWS S3, puis téléchargées et stockées dans la base de données à l'aide de la gemme paperclip .
Les utilisateurs partagent des informations avec d'autres via les composants Post et Comment . Les publications peuvent être publiées directement sur le mur d'un autre utilisateur ou publiées sur leur propre mur (les publications receiver_id étant égales à leur propre id ). Les utilisateurs peuvent également télécharger une image à partager avec chaque publication.
Une fois créées, les publications peuvent être à la fois modifiées et supprimées. Un auteur peut à la fois modifier et supprimer toutes ses publications, tandis que le destinataire d'une publication peut uniquement les supprimer.
Pour montrer leur approbation, les utilisateurs peuvent choisir d’ Like une publication. Les publications affichent non seulement le nombre de likes reçus, mais également la liste des utilisateurs qui l'ont aimé.
Les utilisateurs peuvent également laisser des commentaires sur les publications. Les commentaires sont affichés dans l'ordre en fonction du moment où ils ont été créés. Il est également possible de répondre aux commentaires par d'autres commentaires, chaque commentaire affichant tous ses commentaires imbriqués. Les commentaires sont associés à d'autres commentaires via un parent_comment_id facultatif.
Les utilisateurs peuvent également choisir d’ Like les commentaires de la même manière que les publications. Cela se fait à l'aide d'une table grâce à l'utilisation d'une association polymorphe, qui utilise un likable_type pour stocker le type d'élément apprécié. 
Une Notification est créée et envoyée à un autre utilisateur lorsqu'un utilisateur publie sur son mur ou que l'un de ses messages/commentaires est aimé/commenté. Ceci est encore une fois réalisé en utilisant un associé polymorphe qui garde la trace de l'élément sur lequel la notification est effectuée.
Les utilisateurs disposent d'un indicateur visuel sur leur barre de navigation qui s'affiche chaque fois qu'ils reçoivent de nouvelles notifications invisibles et d'une liste déroulante affichant une liste de toutes leurs notifications récentes. Chaque NotificationListItem affiche le nom des autres utilisateurs et l'action qui a eu lieu, ainsi que des liens vers l'élément en question lorsqu'on clique dessus.
J'ai utilisé le chargement rapide à l'aide d'ActiveRecord pour optimiser mes requêtes de base de données et augmenter les performances. Lors de la récupération du flux pour un utilisateur, toutes les informations pertinentes sont également interrogées avec chaque publication pour une utilisation ultérieure.
#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
...Pour protéger les utilisateurs, de nombreuses fonctionnalités de commentaire et de publication sur les murs sont protégées par l'amitié entre les utilisateurs. Cela se fait grâce à l'utilisation du rendu conditionnel dans React, vérifiant si l'utilisateur actuel est un ami de l'auteur de la publication ou du propriétaire du profil ou si l'utilisateur actuel essaie d'interagir avec ses propres publications/profil.
// 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
}
...
