Devlog #3: Comentarios y notificaciones
En las últimas dos semanas seguí con la red social que estoy construyendo como proyecto final de The Odin Project. En el devlog anterior agregué editar y borrar posts, y los likes.
Esta vez son dos cosas que van juntas: comentarios, para que la gente pueda responder a un post, y notificaciones, para que sepas cuando alguien interactúa con lo que publicaste.
Note
El video está narrado en inglés. Si no se ve el reproductor, podés verlo en YouTube, o en su versión vertical como Short.
Lo nuevo
- Escribir un comentario: cada post tiene su caja de comentarios.
- Editar tus comentarios: en el mismo lugar, con el texto ya cargado.
- Borrar tus comentarios: con confirmación, igual que los posts.
- Notificaciones de likes: cuando alguien le da like a tu post.
- Notificaciones de comentarios: cuando alguien comenta tu post.
Comentarios
Cada post tiene ahora una caja de comentarios debajo. Escribís tu comentario, lo mandás, y aparece al instante con tu nombre y la hora.
Tus propios comentarios tienen una opción de editar. Abre la misma caja, ya completa con lo que escribiste: cambiás lo que haga falta, guardás, y se actualiza en el mismo lugar.
Borrar funciona igual que con los posts: primero pide confirmación, y después el comentario desaparece.
Notificaciones
La otra mitad. Recibís una notificación cuando alguien le da like a tu post y cuando alguien lo comenta. Cada una te dice quién fue y de qué post se trata, y al hacer clic te lleva a ese post.
Cómo funciona por dentro
Una notificación parece algo simple, pero apunta a tres cosas al mismo tiempo: la persona que la recibe, la persona que la causó, y el post del que se trata.
Por eso, en la base de datos, la tabla de notificaciones apunta dos veces a la tabla de usuarios: una vez para quien la recibe y otra para quien la causó. La misma tabla, con dos roles distintos. Esa fue la parte que me llevó un rato hacer bien.
Después está la columna type, que dice si fue un like o un comentario. Es lo que permite que una sola tabla cubra los dos casos, en lugar de necesitar una tabla para cada uno.
Tres reglas
Hay una decisión que me gusta: guardar la notificación nunca puede romper la acción. Si falla, tu like se guarda igual. La notificación es un efecto secundario, no parte del trato.
Y dos más pequeñas: nunca recibís una notificación por tus propios likes, y darle like dos veces al mismo post no manda una segunda notificación.
Stack
| Capa | Tecnologías |
|---|---|
| Frontend | React, React Router, React Query, CSS Modules |
| Backend | Express, Prisma, PostgreSQL (en Neon) |
Dónde seguir el proyecto
- 🎬 Este video en YouTube: How I Designed the Notifications Table — Full-Stack Devlog 3 · versión Short
- ▶️ Canal de YouTube: @pabloperezweb
- 🎵 TikTok: @pabloperezweb
- 📸 Instagram: @pabloperezweb