farcebook es una aplicación web de pila completa inspirada en Facebook y construida sobre un marco Rails. farcebook utiliza una base de datos PostgreSQL y React para la representación de componentes frontend, y Redux se utiliza para la gestión del estado.
libro de farsa EN VIVO
Una vez que un usuario se registra para obtener una cuenta, se crea una página de perfil para él. Cada perfil incluye un encabezado que almacena una imagen de perfil y una foto de portada, una sección de Introducción, que muestra toda la información de los usuarios actuales, una sección de Amigos, que muestra a los primeros 9 amigos de los usuarios y un feed que muestra todas las publicaciones publicadas por el usuario y publicado en el muro de los usuarios.
Las fotos se alojan utilizando un depósito de AWS S3 y se cargan y almacenan en la base de datos utilizando la gema paperclip
.
Los usuarios comparten información con otros a través de componentes Post
y Comment
. Las publicaciones se pueden publicar directamente en el muro de otro usuario o en su propio muro (siendo el receiver_id
de las publicaciones igual a su propio id
). Los usuarios también pueden cargar una imagen para compartirla junto con cada publicación.
Una vez creadas, las publicaciones se pueden editar y eliminar. Un autor puede editar y eliminar todas sus publicaciones, mientras que el receptor de una publicación solo puede eliminarlas.
Para mostrar aprobación, los usuarios pueden elegir Like
a una publicación. Las publicaciones muestran no solo la cantidad de Me gusta recibidos, sino también la lista de los usuarios a los que les gustó.
Los usuarios también pueden dejar comentarios en las publicaciones. Los comentarios se muestran en orden según el momento en que se crearon. Los comentarios también se pueden responder con otros comentarios, y cada comentario muestra todos sus comentarios anidados. Los comentarios están asociados a otros comentarios a través de un parent_comment_id
opcional.
Los usuarios también pueden elegir que Like
los comentarios de la misma manera que las publicaciones. Esto se hace usando una tabla mediante el uso de una asociación polimórfica, que usa un likable_type
para almacenar qué tipo de elemento le gusta.
Se crea una Notification
y se envía a otro usuario cuando un usuario publica en su muro o cualquiera de sus publicaciones/comentarios recibe me gusta/comentado. Una vez más, esto se logra utilizando un asociado polimórfico que realiza un seguimiento de qué elemento se notifica.
Los usuarios tienen un indicador visual en su barra de navegación que muestra cada vez que tienen notificaciones nuevas no vistas y un menú desplegable que muestra una lista de todas sus notificaciones recientes. Cada NotificationListItem
muestra el nombre de los demás usuarios y la acción que tuvo lugar, así como enlaces al elemento en cuestión cuando se hace clic en él.
Utilicé la carga ansiosa usando ActiveRecord para optimizar las consultas de mi base de datos y aumentar el rendimiento. Al buscar el feed de un usuario, también se consulta toda la información relevante junto con cada publicación para su uso posterior.
#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
...
Para proteger a los usuarios, muchas funciones para comentar y publicar en los muros están protegidas detrás de la amistad entre los usuarios. Esto se hace mediante el uso de representación condicional en React, verificando si el usuario actual es amigo del autor de la publicación o propietario del perfil o si el usuario actual está intentando interactuar con sus propias publicaciones/perfil.
// 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
}
...