
2026 · Diseño y desarrollo full-stack
Alejandro Albornoz — Coach
Web de marca y área privada de clientes para un coach de fitness, con Astro y Supabase
- Astro 6
- Preact
- Tailwind CSS 4
- Supabase
- Astro Actions
- Zod
- Accesibilidad
- WCAG 2.2 AA · 0 fallos
- SEO
- Lighthouse 100
- Área privada
- Auth + RLS estricta
Contexto
Un coach personal online de entrenamiento de fuerza, nutrición y hábitos necesitaba dar el salto de “perfil de Instagram” a marca digital profesional: una web que captara clientes potenciales y, sobre todo, un área privada donde sus clientes de mentoría accedieran a su seguimiento. Un sector sensible —salud— que obliga a tratar el consentimiento y los datos con cuidado desde el primer día.
Decisiones de arquitectura
- Astro 6 estático + islas Preact para la parte pública (hero, pilares, servicios, FAQ, contacto): HTML prerenderizado, rápido y barato de servir.
- Supabase como backend del área privada: autenticación por magic link (sin contraseñas), base de datos PostgreSQL con Row Level Security estricta y un trigger que crea automáticamente la ficha de cliente al registrarse.
- Dos áreas protegidas con un solo sistema de auth: enrutado automático tras el login —si el usuario es administrador va al panel de gestión; si es cliente, a su dashboard— con un límite de administradores forzado a nivel de base de datos.
- Formularios con Astro Actions + Zod, con consentimiento explícito por tratarse de datos de categoría especial.
- Sistema de diseño propio: paleta negro + verde lima (contraste 16.6:1, nivel AAA), tipografía Oswald/Inter self-hosted, animaciones scroll-reveal que honran
prefers-reduced-motion, y View Transitions para navegar sin recargas.
Trabajo realizado
- Web pública completa: home con propuesta de valor, página de filosofía en MDX, servicios con packs por duración, resultados y contacto con consentimiento RGPD.
- Área privada de cliente: dashboard con estado de la suscripción, métricas y próximas sesiones.
- Panel de administración: listado y ficha de clientes, suscripciones, métricas corporales y sesiones, protegido por RLS.
- SEO técnico (JSON-LD
Person+ProfessionalService, sitemap que excluye las rutas privadas, robots) y páginas legales.
Retos técnicos
El más interesante: dos áreas protegidas compartiendo un mismo flujo de autenticación. La solución pasó por enrutar según el rol leído en base de datos y por blindar la frontera con políticas RLS en Postgres, de modo que la seguridad no dependa solo del frontend.
El sector salud añadió una capa de responsabilidad: consentimiento explícito en el formulario, disclaimer visible y exclusión de las rutas privadas del sitemap y de la indexación.
Resultado
En producción: Lighthouse 100 en SEO, accesibilidad WCAG 2.2 AA sin violaciones en las páginas auditadas y Core Web Vitals en verde. Una base sólida sobre la que el cliente puede crecer (pagos, contenido) sin rehacer la arquitectura.
Proyecto de cliente. Algunos detalles internos se omiten por confidencialidad.