Revisión del proyecto Suplatzigram en producción

Conoce cómo está armado Suplatzigram en producción con Supabase, Next.js y Vercel. Revisamos la estructura, las consultas y el flujo de publicación de imágenes, y marcamos el camino hacia funciones avanzadas como autenticación, perfiles y likes en base de datos. Todo sobre el mismo proyecto que ya corre en Vercel.

¿Qué hace el proyecto y qué verás en Supabase avanzado?

Suplatzigram está desplegado en Vercel y muestra un feed público con contenido que viene de Supabase. Cada publicación tiene likes, nombre de usuario por default y caption. Los datos reales en la base de datos son el caption, la imagen y el número de likes. Además, existe una vista de rank que ordena por cantidad de likes usando la librería Supabase.js. Desde el front-end se puede publicar una imagen con vista previa y texto, y los likes hoy son un estado local del componente.

• Despliegue en Vercel con interfaz en producción.
• Feed de posts con likes, usuario por default y caption.
• Vista de rank ordenada por likes con Supabase.js.
• Publicación de imágenes desde el front-end con preview y caption.
• Likes iniciales en 0 y gestionados en estado local.

¿Cómo está organizada la app con Next.js, Supabase.js y Vercel?

La base es una app de Next.js con dependencias de Next, React, react-dom y Supabase.js. Hay un archivo de variables de entorno, una carpeta de aplicación con componentes (incluida la barra de navegación inferior), una carpeta de mock que quedó lista para refactor, páginas para crear post y para el rank, y una carpeta de utils con el cliente de Supabase y una función de tiempo que transforma la fecha de creación en mensajes como “creado hace minutos”. La página principal muestra el feed ordenado descendentemente por fecha de creación.

¿Dónde viven las consultas a Supabase?

En utils está el cliente oficial de Supabase que se conecta a la base de datos y al storage. Las vistas como feed y rank realizan consultas y ordenan por columnas específicas.

• Cliente con Supabase.js para llamadas a base y storage.
• Orden descendente por fecha de creación en el feed.
• Orden descendente por cantidad de likes en rank.

¿Cómo funciona la publicación de imágenes desde el front-end?

El flujo es directo: seleccionar un archivo local, ver el preview, escribir el caption y publicar. La app carga la imagen al storage, obtiene la URL y confirma “post creado exitosamente”. Al volver al home, se ve la nueva imagen con el caption y likes inicializados en 0.

• Selección de archivo y previsualización inmediata.
• Carga al storage y obtención de URL.
• Creación del post con confirmación exitosa.
• Aparición del nuevo post en el feed.
• Likes en 0 por default al crear.

¿Cómo se ordenan el feed y el rank?

El feed lista los posts más recientes ordenando descendentemente por la columna de fecha de creación. El rank ordena por cantidad de likes mediante una consulta directa con Supabase.js.

• Feed: orden por fecha de creación descendente.
• Rank: orden por cantidad de likes descendente.
• Consultas directas con la librería Supabase.js.

¿Qué mejoras avanzadas implementaremos y por qué importan?

El siguiente paso es ampliar capacidades clave: registro de usuarios, autenticación y autorización, perfiles con avatar, likes gestionados desde la base de datos, reglas de seguridad y refactor de utilidades. Todo esto fortalece la integridad de datos, la experiencia de usuario y la seguridad.

¿Qué refactor haremos para mejorar mantenibilidad?

Se plantea mejorar la función de tiempo que traduce la fecha en “creado hace…”, y reemplazar definitivamente la carpeta de mock por datos reales.

• Función de tiempo más clara y reusable.
• Sustitución de mocks por datos reales.

¿Cómo evolucionarán los likes y la autenticación?

Los likes pasarán de estado local a persistencia en Supabase. Se implementará registro y autenticación reales para asociar perfiles y avatares a quien publica, junto a reglas de seguridad.

• Persistencia de likes en la base de datos.
• Registro y perfiles con avatar por usuario.
• Reglas de seguridad para proteger operaciones.

¿Completaste el curso de fundamentos antes de llegar aquí o este es tu primer curso de Supabase? Cuéntalo en los comentarios y qué te gustaría ampliar a continuación.