Saltar al contenido
Caso · 07 / 09← Todos los trabajos

El Rey Jesús

El sitio de una iglesia que lee su contenido en vivo, y un panel para editarlo sin tocar código.

Rol
Diseño y desarrollo
Stack
Vanilla JavaScript (ES modules), Supabase (Postgres, Auth, RLS), Cloudinary, Vercel Functions
Inicio
InicioSin backend: el navegador lee Supabase y RLS lo protege
(01) El problema

Iglesia El Rey Jesús Zona Norte, en Mar del Plata, cambia seguido horarios, eventos y noticias. Cada cambio necesitaba a alguien que supiera editar HTML. La iglesia quería que su propio equipo actualizara el sitio.

Mi rolDiseñé y construí el sitio, el panel de administración y la base con sus reglas de acceso.
(02) ResultadosContados en el código
8tablas con Row Level Security
16políticas de acceso
6tipos de contenido editables desde el panel
(03) Arquitectura

Tres decisiones que lo definieron.

  1. 01

    Sin backend: el navegador lee Supabase y RLS lo protege

    Por qué. El sitio es HTML estático, sin build. Carga siete tablas en paralelo con la anon key pública. RLS deja que el visitante lea solo filas activas y que los editores escriban.

    El costo. El contenido se dibuja en el cliente: aparece después de cargar y los buscadores ven primero un esqueleto vacío.

  2. 02

    Subidas firmadas por una sola función serverless

    Por qué. El secreto de Cloudinary no puede vivir en el navegador. Una función de Vercel valida el token de Supabase y el rol del usuario, y recién ahí firma la subida.

    El costo. Cada subida suma dos llamadas a Supabase. La función firma los parámetros que le lleguen, sin filtrarlos.

  3. 03

    Un solo motor de formularios para todo el contenido

    Por qué. Cada tipo de contenido es una declaración: campos, tipos, orden y visibilidad. El panel arma la lista y el formulario a partir de eso. Una sección nueva es una entrada, no una pantalla.

    El costo. Lo que no entra en el formulario genérico necesita un caso especial dentro del motor.

(04) GaleríaSeguí scrolleando →
Inicio
Inicio · El inicio del sitio, con sus sedes cargadas desde Supabase.
Horarios
Horarios · Los cultos de la semana y la cuenta regresiva al próximo.
Ingreso al panel
Ingreso al panel · Ingreso con magic link. Los usuarios nuevos quedan pendientes hasta que un admin los habilita.
Editor de contenido
Editor de contenido · El mismo formulario generado edita horarios, eventos, noticias y el equipo.
(05) Qué haría después
01Prerenderizar el contenido en el deploy o en una edge function, para que el primer pintado y los buscadores reciban texto real.
02Acotar lo que acepta la función de firma: solo una carpeta fija y un timestamp reciente.
03Sacar las imágenes en base64 de index.html, que pesa 150 KB, y servirlas desde Cloudinary en el tamaño de cada pantalla.
Próximo proyecto · 08 / 09
Copiados Norte →Landing, back office y app de pedidos
Caso · 07 / 09

El Rey Jesús

El sitio de una iglesia que lee su contenido en vivo, y un panel para editarlo sin tocar código.

Rol
Diseño y desarrollo
Stack
Vanilla JavaScript (ES modules), Supabase (Postgres, Auth, RLS), Cloudinary, Vercel Functions
El Rey Jesús
(01) El problema

Iglesia El Rey Jesús Zona Norte, en Mar del Plata, cambia seguido horarios, eventos y noticias. Cada cambio necesitaba a alguien que supiera editar HTML. La iglesia quería que su propio equipo actualizara el sitio.

Mi rolDiseñé y construí el sitio, el panel de administración y la base con sus reglas de acceso.
(02) Resultados
8tablas con Row Level Security
16políticas de acceso
6tipos de contenido editables desde el panel
(03) Arquitectura

Tres decisiones que lo definieron.

01

Sin backend: el navegador lee Supabase y RLS lo protege

Por qué. El sitio es HTML estático, sin build. Carga siete tablas en paralelo con la anon key pública. RLS deja que el visitante lea solo filas activas y que los editores escriban.

El costo. El contenido se dibuja en el cliente: aparece después de cargar y los buscadores ven primero un esqueleto vacío.

02

Subidas firmadas por una sola función serverless

Por qué. El secreto de Cloudinary no puede vivir en el navegador. Una función de Vercel valida el token de Supabase y el rol del usuario, y recién ahí firma la subida.

El costo. Cada subida suma dos llamadas a Supabase. La función firma los parámetros que le lleguen, sin filtrarlos.

03

Un solo motor de formularios para todo el contenido

Por qué. Cada tipo de contenido es una declaración: campos, tipos, orden y visibilidad. El panel arma la lista y el formulario a partir de eso. Una sección nueva es una entrada, no una pantalla.

El costo. Lo que no entra en el formulario genérico necesita un caso especial dentro del motor.

(04) Galería
Inicio
Inicio · El inicio del sitio, con sus sedes cargadas desde Supabase.
Horarios
Horarios · Los cultos de la semana y la cuenta regresiva al próximo.
Ingreso al panel
Ingreso al panel · Ingreso con magic link. Los usuarios nuevos quedan pendientes hasta que un admin los habilita.
Editor de contenido
Editor de contenido · El mismo formulario generado edita horarios, eventos, noticias y el equipo.
(05) Qué haría después
01Prerenderizar el contenido en el deploy o en una edge function, para que el primer pintado y los buscadores reciban texto real.
02Acotar lo que acepta la función de firma: solo una carpeta fija y un timestamp reciente.
03Sacar las imágenes en base64 de index.html, que pesa 150 KB, y servirlas desde Cloudinary en el tamaño de cada pantalla.
Próximo proyectoCopiados Norte →
Nahuel SantillánES