Revisión de estructura de Suplatzigram con Supabase

Antes de avanzar con funcionalidades complejas, se consolida la base de Suplatzigram: una app construida con Supabase y Next.js, desplegada en Vercel, con feed público, publicación de imágenes usando storage y vistas ordenadas por likes. Aquí se aclara cómo está organizado el proyecto, dónde se conectan los datos y qué mejoras llegarán: autenticación, perfiles y likes persistentes.

¿Qué hace hoy Suplatzigram en producción con Supabase y Vercel?

Suplatzigram está online usando la URL de Vercel y muestra un feed de posts que vienen desde Supabase. El foco actual está en visualizar contenido real y probar el flujo de publicación desde el front-end.

• Feed con posts que incluyen imagen, caption y nombre de usuario por defecto.
• Datos reales en la base: caption, imagen y campo de likes inicializado en cero.
• Interacción de likes en estado local: suma o resta visualmente pero aún no se persiste en Supabase.
• Vista de rank: ordena posts por cantidad de likes con consulta directa usando Supabase.js.
• Publicación desde el front-end: seleccionar imagen, ver preview, añadir caption y publicar.
• Flujo de subida: cargar al storage, obtener la URL y crear el post; se confirma con “post creado exitosamente”.
• Home ordenado por fecha de creación en orden descendente para mostrar lo más reciente.

Conceptos clave en práctica: storage para archivos, estado local para interacciones inmediatas, orden descendente por fecha y consultas con Supabase.js al cliente oficial.

¿Cómo está organizada la estructura del proyecto en Next.js y dónde viven los datos?

La organización facilita encontrar componentes, páginas y utilidades, y clarifica dónde se hacen las consultas a Supabase.

• Dependencias base: Next, React, react-dom y supabase-js como cliente oficial.
• Variables de entorno: configuración segura para credenciales y conexión.
• Carpeta de aplicación y componentes: incluye la barra de navegación inferior con íconos.
• Carpeta de mocks: quedó del curso previo para refactor en este avanzado.
• Página post: interfaz para seleccionar imagen, previsualizar, añadir caption y publicar.
• Página rank: grilla ordenada por likes en orden descendente.
• Utils: cliente de Supabase para base de datos y storage; función de tiempo para mostrar “creado hace…” en segundos, minutos, horas, días, semanas o meses.
• Página principal (feed): lista posts recientes ordenados por la columna de fecha de creación en forma descendente.

Habilidades reforzadas: conectar el front-end a la base con Supabase.js, manejar storage, controlar estado local para feedback inmediato, y estructurar un proyecto Next.js siguiendo estándares recomendados.

¿Qué se ampliará en el curso avanzado: autenticación, perfiles y reglas de seguridad?

El siguiente paso es pasar de un prototipo funcional a una aplicación con identidad de usuarios y acciones persistentes controladas por la base de datos.

• Registro de usuarios con autenticación y autorización para asociar avatar y autor de cada post.
• Likes gestionados en la base de datos: persistencia real en lugar de estado local.
• Reglas de seguridad: políticas para controlar lectura y escritura según el usuario.
• Refactor de mocks y mejora de utilidades, incluida la función de tiempo.
• Evaluación continua de qué ampliar o mejorar para robustecer el proyecto.

¿Llegaste después del curso de fundamentos o este es tu primer curso de Supabase? Comparte en los comentarios cómo llegaste y qué te gustaría profundizar en la siguiente clase.