Conecta Supabase con frontend real

Aprende a integrar Supabase con un frontend real en minutos. Aquí recorres el flujo completo: clonar el repo, instalar dependencias, ejecutar en localhost, explorar la estructura con datos moqueados y configurar el cliente de Supabase con variables de entorno. Sin partir de cero: conectas credenciales y empiezas a consumir tus datos.

¿Cómo clonar el repositorio y correr el frontend con datos moqueados?

Primero se abre el enlace de GitHub desde la sección de recursos y se clona el repo por SSH en la carpeta de trabajo. Luego se cambia a la rama adecuada para esta etapa y se instalan las dependencias para ejecutar el proyecto en el navegador.

• Copiar el enlace del repositorio y clonar por SSH.
• Cambiar a la rama con la base del proyecto: git checkout a “clase doce inicio”.
• Ejecutar npm install para instalar dependencias.
• Arrancar el servidor con npm run dev.
• Abrir en el navegador: localhost:3000.

¿Qué verás en el navegador al iniciar?

• Un frontend funcional con data moqueada de “Suplatigram”.
• Avatar, título, usuario y conteo de likes visibles.
• La utilidad de tiempo relativo que indica “fue publicado hace dos días”.
• Páginas: crear post, rank y homepage.

¿Qué contiene la estructura del proyecto y cómo navegarla?

El repositorio “Supavise Fundamentos” incluye carpetas y páginas listas para conectar con datos reales. La organización facilita el trabajo incremental: primero mocks, luego integración con Supabase.

• Carpeta de components para aislar UI reusable.
• Carpeta de mocks con un listado de posts.
• Páginas: crear post, rank y homepage.
• Utilidad para tiempo relativo: función que calcula “hace cuánto fue publicado”.

¿Qué hace la página de rank?

• Importa Image de Next.js y useState de React.
• Usa la función desde utils para mostrar tiempo de publicación.
• Consume posts moqueados desde la carpeta de mocks.
• Incluye componente de corazón que cambia de color al dar like.
• Tiene modal para ver el post en detalle y acción de cerrar.
• Muestra un header “ranking” y una grilla con los elementos ordenados por likes en descendente.

¿Qué hay en crear post y en la página principal?

• Crear post: estructura base sin funcionalidad aún.
• Homepage: usa postcard para renderizar cada post desde el mock.
• El componente de corazón se moverá a components para unificar uso.
• Bottom navigation para moverse entre páginas.

¿Cómo configurar el cliente de Supabase con variables de entorno?

Para conectar el frontend con la base de datos, se prepara el archivo de variables y se crea el cliente de Supabase. Se sigue la guía oficial: instalar la librería, inicializar el cliente con la URL y la clave anónima, y exportarlo para reutilizarlo en páginas y funciones.

• Renombrar el archivo de variables: de .env.example a .env.
• Agregar URL y clave anónima desde el panel de Supabase: Project overview > Connect > sección de App framework.
• Instalar la librería de Supabase para JavaScript (detén el servidor, instala y vuelve a correr el proyecto).
• Crear el cliente en utils/client.ts e importar la función de inicialización.

¿Cómo crear el archivo de cliente reutilizable?

• Importar la función de creación del cliente desde la librería.
• Leer variables de entorno: URL y clave anónima.
• Exportar una constante de supabase para consultas y escritura de datos.

// utils/client.ts
import { createClient } from '@supabase/supabase-js'

const url = process.env.SUPABASE_URL as string
const anonKey = process.env.SUPABASE_ANON_KEY as string

export const supabase = createClient(url, anonKey)

¿Qué lograrás al finalizar esta configuración?

• Entorno de frontend listo y corriendo en tu máquina.
• Variables de entorno conectadas a tu proyecto de Supabase.
• Cliente de Supabase exportado y listo para consumir datos reales: leer posts, mostrar imágenes desde storage y construir el feed de “Suplaxigram”.

¿Te quedó alguna duda del flujo de clonación, estructura o cliente de Supabase? Comparte tu pregunta o experiencia en los comentarios.