2026Desarrollo completo — diseño, construcción y despliegue
psico-yerma — Sitio web y panel de administración
Sitio web y panel administrativo privado para una consulta de psicología infantil y adolescente
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS v4
- Supabase
- Resend
- Zod
- Vitest
Problema
La consulta necesitaba presencia online confiable y en español: servicios, orientación sobre precios, preguntas frecuentes y un canal de contacto que los padres pudieran usar — sin contratar una agencia ni mantener un CMS.
Cada consulta debía llegar protegida contra spam y quedar registrada en un lugar donde la dueña pudiera verla, darle seguimiento y convertirla en ficha de cliente.
Enfoque
Sitio público, español primero
Next.js App Router con prerender estático, copy localizado y SEO desde el día uno: metadata, sitemap, robots e imagen Open Graph.
Secciones pensadas para padres preocupados: servicios, preguntas frecuentes, formulario de contacto y una carta privada excluida de los buscadores.
Contacto con filtro anti-spam
El formulario publica en una ruta de servidor con validación Zod y verificación Cloudflare Turnstile; almacena la consulta en Supabase (Postgres) y envía una notificación por correo con Resend.
Turnstile rechaza bots antes de escribir en la base de datos o enviar correos, manteniendo limpia la bandeja de la consulta.
Panel administrativo privado
Supabase Auth (email/contraseña) protege todas las rutas /admin vía proxy: las peticiones sin sesión redirigen a /login.
Dashboard con estadísticas de consultas por estado y motivo, tabla de contactos con cambio de estado y CRUD de clientes con validación, tests y reportes con Recharts.
Rigor de ingeniería
TypeScript estricto, tests con Vitest alrededor de la validación y el CRUD, CI en GitHub Actions y Conventional Commits.
Resultados
- En producción en psico-yerma.vercel.app, mantenido por la dueña de la consulta sin depender de un desarrollador para el día a día.
- Opera sobre tiers gratuitos de Vercel, Supabase y Resend — la clienta no paga hosting.
- Panel administrativo privado con acceso autenticado, seguimiento de consultas y gestión de clientes — antes resuelto por WhatsApp y cuaderno.