Monto un proyecto React + Supabase en menos de una hora: paso a paso

React + Supabase es el equivalente moderno a “Rails en 15 minutos”. Pero la mayoría de tutoriales te dejan a medias: vale, ya tienes la home, ¿y la auth? ¿y las políticas de seguridad? ¿y el deploy?

Te enseño el flujo exacto que sigo cuando un cliente me dice “quiero validar una idea ya”.

Lo que tendrás en 60 minutos

• Proyecto Next.js 16 (App Router) o Astro 5 con React islands
• Supabase: auth con magic link, base de datos con RLS bien hecha, storage para imágenes
• shadcn/ui instalado y configurado con tu tema
• Despliegue en Vercel con preview por PR
• .env.example documentado para los siguientes

Minuto 0-5: scaffold

npx create-next-app@latest mi-mvp --typescript --tailwind --app (o npm create astro@latest si prefieres Astro). Inmediatamente: npx shadcn@latest init, eliges el preset y ya tienes Button, Input, Card listos para usar.

Minuto 5-20: Supabase

Crear proyecto en supabase.com (te toma 2 minutos). Copiar URL y anon key al .env.local. Instalar @supabase/ssr y @supabase/supabase-js.

Crear lib/supabase/client.ts y lib/supabase/server.ts siguiendo la doc oficial — son 30 líneas cada uno y los puedes copiar de cualquier tutorial reciente.

Crear las tablas necesarias en el SQL Editor. Importante: activar Row Level Security desde el primer minuto y escribir las políticas. No lo dejes “para después” porque te abre la API entera a internet.

Minuto 20-35: Auth

Magic link es el camino rápido y seguro. En Supabase Auth → Settings, defines tu site URL y los redirect URLs (Vercel preview + producción + localhost).

En el cliente: un formulario que llama a supabase.auth.signInWithOtp({ email }). En el callback /auth/callback/route.ts intercambias el código por una sesión. Listo.

Minuto 35-45: la primera feature

Aquí es donde el cliente ve magia. Una tabla con CRUD: form para crear, lista para leer, botón para borrar. Server Components para leer, Server Actions para mutar. Total: ~80 líneas si vas al grano.

Minuto 45-55: storage

¿El cliente quiere subir imágenes? Crea un bucket en Supabase Storage, política RLS de “el dueño puede leer y escribir”, y supabase.storage.from('bucket').upload() desde un client component con <input type="file">.

Minuto 55-60: deploy

Conectar el repo a Vercel, copiar las env vars de Supabase, click. Cada push a main despliega. Cada PR genera un preview con su propia URL.

Y ahora qué

Tienes un MVP funcionando con auth, datos, storage y despliegue. Lo que sigue es iterar con datos reales: enseñárselo al cliente, ver qué pasa, y ajustar. En esta fase mi consejo es: no añadas features especulativas. Espera a que el uso real te diga qué falta.

¿Quieres montar tu MVP así? Hablamos en 30 minutos.