Última actualización
Eugenia Bravo, abogada y mediadora familiar en Málaga, necesitaba una web y un blog profesionales para conseguir clientes online. Los creé en 2024 y los rehíce en 2025 para que sus artículos aparezcan en Google, con un panel de administración seguro desde el que ella misma los publica.
Introducción
Eugenia tiene 25 años de experiencia en derecho de familia y mediación, y su web combina información sobre sus servicios con un blog jurídico. A continuación están las dos versiones: la original de 2024 y la nueva de 2025.
También creé una página para su guía gratuita sobre el divorcio que envía la guía automáticamente a cada nuevo suscriptor: lee el caso de Tu Divorcio Inteligente.
Versión 1 (2024): React y AWS Amplify
La primera versión era una aplicación React de una sola página con backend en AWS Amplify: una web pública con blog y un panel privado donde el equipo publica los artículos.
Para desarrollar este sitio web, colaboré con una amiga que también es mi clienta, eligiendo tecnologías que potenciaran mis habilidades de ingeniería de software en lugar de depender de soluciones predefinidas como WordPress o Wix. Este enfoque dio como resultado un sitio web robusto y personalizado.
Frontend: React y TypeScript
Dado que se trataba de un proyecto profesional, usé React para aprovechar mi conocimiento avanzado del framework. Además, implementar TypeScript garantizó un manejo de datos más seguro en comparación con JavaScript puro.
Para arrancar el desarrollo, experimenté con una innovadora herramienta de IA llamada bolt.new, que puede generar un proyecto desde cero, ejecutarlo y mejorar el código de forma iterativa a partir de instrucciones. Luego descargué el código base generado para continuar con el desarrollo.
Backend: AWS Amplify
En un proyecto anterior, construí un backend en Spring Boot integrado con una base de datos AWS RDS. Sin embargo, este enfoque provocó problemas como caídas inesperadas, mayor tiempo de desarrollo y complejidad añadida. Como desarrollador en solitario con tiempo limitado, necesitaba una solución más sencilla pero robusta. Fue entonces cuando opté por AWS Amplify, una solución de "backend como servicio". Amplify es más fácil de desarrollar una vez que te familiarizas con él, y ofrece una infraestructura robusta y rentable para proyectos pequeños y medianos, ya que está totalmente gestionada.
Páginas públicas
El sitio web logra un equilibrio entre promocionar los servicios de Eugenia e invitar a los usuarios a ponerse en contacto, al tiempo que ofrece contenido valioso de blog sin anuncios.
Página de inicio
Páginas de administración
Protegida por la autenticación de usuarios de Amplify, hay una página de administración privada a través de la cual el equipo del sitio web gestiona el contenido. Este portal cuenta con un panel de control y un panel de administración para modificar, revisar publicaciones privadas o eliminar publicaciones.
Panel de administración
La nueva versión (2025): Next.js y Supabase
EugeniaBravo evolucionó de una sencilla aplicación de página única en React a un proyecto construido con Next.js para mejorar el SEO, la visibilidad y los flujos editoriales de un sitio orientado al contenido. La migración también reemplazó AWS Amplify por Supabase, que encaja mejor en proyectos más pequeños que aun así necesitan autenticación, almacenamiento y una base de datos relacional.
Objetivos de la migración
Los principales objetivos eran lograr que el contenido del blog se indexara de forma fiable, mejorar el rendimiento de las páginas y simplificar las operaciones de backend para que el proyecto pudiera mantenerse ligero sin renunciar a funciones como las herramientas de administración, la subida de archivos multimedia y la edición de contenido enriquecido.
La reconstrucción se centra en Next.js con TypeScript en el frontend y Supabase para el backend y el almacenamiento.
Frontend y SEO
Next.js permite el renderizado en el servidor y la generación estática del blog, lo que significa que los rastreadores reciben el HTML completo en lugar de una estructura prácticamente vacía. Esto supone una gran mejora frente a React puro para la indexación dinámica, porque cada publicación puede entregar metadatos completos, etiquetas canónicas y vistas previas enriquecidas en el momento en que se solicita.
El proyecto incluye sitemaps, reglas de robots y metadatos por página para que los nuevos artículos se vuelvan visibles rápidamente. También mejora el enrutamiento, la optimización de imágenes y el rendimiento general de carga del sitio público.
Backend con Supabase
Supabase reemplazó a Amplify para mantener el stack más ligero y accesible para un equipo más pequeño. Con Postgres, autenticación integrada y almacenamiento en un solo lugar, es más fácil de mantener que una configuración de AWS más grande, sin dejar de ofrecer una base sólida para el panel de administración y los flujos de trabajo multimedia.
La autenticación ahora admite MFA, las publicaciones y categorías viven en tablas relacionales, y las imágenes se almacenan en Supabase Storage con alternativas sensatas.
Flujo de trabajo de contenido
Los editores gestionan publicaciones, categorías y autores desde el panel de administración, con TinyMCE para la edición de contenido enriquecido y flujos de vista previa antes de publicar. El blog usa slugs amigables para el SEO, publicaciones relacionadas y tarjetas recomendadas para mantener el interés de los lectores.
Panel de administración
Experiencia pública
El sitio público combina un embudo de marketing con un blog fácil de explorar y de carga rápida. Las páginas de servicios, testimonios, preguntas frecuentes y contacto están construidas sobre la misma base amigable para el SEO.
Página de inicio
Salvaguardas de la versión de demostración
La rama de demostración se publica sin secretos, funciona con datos de prueba en memoria y desactiva las escrituras para que los revisores puedan explorar la interfaz de forma segura. La analítica y las herramientas de cookies están controladas mediante variables de entorno para mantener la demo aislada de producción.
La demo pública está disponible con las páginas de administración habilitadas en eugeniabravo-public.vercel.app.
Visita el sitio en producción en eugeniabravo.com, explora la demo en eugeniabravo-public.vercel.app, o revisa el repositorio en GitHub.
¿Necesitas asistencia legal en España? ¡Contacta con Eugenia!
Gracias por leer,
Julio Macías González
