Publicaciones autenticadas en Suplaxigram

Crear publicaciones autenticadas en Suplaxigram ya es una realidad: desde subir una imagen en el front-end hasta verla en el feed con el username y avatar del autor. El flujo integra autenticación, perfiles y storage en Supavise sin datos hardcodeados, habilitando contenido genuino creado por usuarios.

¿Cómo crear publicaciones autenticadas en Suplaxigram?

Para que cada foto tenga dueño y aparezca en el feed como contenido auténtico, se arma un proceso claro y validado por sesión. Así se evitan usuarios por defecto y se garantiza que solo quienes estén logueados publiquen.

¿Qué flujo sigue la subida de imagen y almacenamiento?

• El usuario sube una imagen desde el front-end.
• La imagen se guarda en el storage.
• Se obtiene su URL pública.
• Se crea un post con: user ID autenticado, caption y URL de imagen.

¿Cómo se guarda el post con user ID y caption?

• Antes: el user ID estaba hardcodeado y siempre creaba con el mismo usuario.
• Ahora: el user ID se obtiene desde la sesión que provee Supavise.
• Validación: si no hay user ID, se lanza un error y no se crea el post.
• Regla: solo usuarios logueados pueden crear un post.

¿Qué refactor conecta sesión, perfil y feed?

El cambio clave elimina el default user visible en tarjetas y listados. La información real de perfil se extrae de la tabla de profiles y se pasa a los componentes como props, para mostrar el avatar y el username correctos en cada card y en el feed.

¿Cómo obtener el user ID desde la sesión de Supavise?

• Se consulta la sesión activa para validar autenticación.
• Se obtiene el user y, a partir de allí, el user ID.
• Con ese user ID se completa el post y se asocia al perfil.

¿Cómo mostrar avatar y username reales en las cards?

• Se deja de usar texto e imagen hardcodeados como default user.
• Cada card recibe por prop el avatar URL y el username del dueño del post.
• Si no hay usuario logueado, se muestra el caso por defecto solo para contenidos sin autor autenticado.
• En el componente principal, el nombre puede renderizarse en uppercase con su primer caracter cuando aplique.

¿Cómo combinar posts y profiles por IDs únicos?

• Se extraen los IDs únicos de usuarios presentes en los posts.
• Se consultan los profiles reales en la base de datos, no desde un mock.
• Se crean mapas por ID para acceso rápido a perfiles.
• Se hace un merge de posts con profiles y se construye la lista final: posts with profiles.
• Resultado: el feed muestra contenido con datos de usuario exactos, listo para interacciones sociales.

¿Qué habilidades y conceptos clave se aplican?

Este módulo consolida prácticas esenciales para productos sociales con datos consistentes y trazables al autor.

• Autenticación de usuarios: validar sesión antes de crear un post.
• Manejo de storage y URL pública: subir, guardar y exponer imágenes.
• Relación entre tablas: posts con user ID y tabla de profiles.
• Extracción desde sesión: obtener user y completar el post sin hardcode.
• Renderizado condicional: mostrar avatar y username reales en cards y feed.
• Uso de props: pasar avatar URL y username a componentes.
• Normalización de datos: IDs únicos, mapas por ID y merge de entidades.
• Tipado de datos: recibir user como string y un profile con username y avatar URL según la interface profile.
• Prueba end to end: publicar imagen nueva, ver caption, avatar y username del autor (por ejemplo, “Suplaxigram uno”) en el listado.
• Escalabilidad del producto: base para likes, comentarios, galerías por perfil y feed filtrado por usuario.

¿Te surgieron dudas al implementar el flujo o al mapear posts con profiles? Deja un comentario con tu caso y lo revisamos juntos.