Rebuild headless para firma de servicios contables y fiscales

Reto

Una firma de servicios contables y fiscales contaba con un sitio construido sobre WordPress que había acumulado páginas de servicios, artículos, documentos descargables, videos, formularios y diferentes recorridos de captación.

El proyecto requería reconstruir la web sobre una arquitectura headless, no limitarse a copiar visualmente el sitio anterior. Era necesario separar el contenido del frontend y trasladar los recursos que todavía tenían valor hacia una nueva base tecnológica.

La migración incluía una biblioteca editorial existente. Los artículos de WordPress contenían HTML generado por el CMS y, en algunos casos, estructuras heredadas de Elementor que no debían trasladarse directamente al nuevo frontend.

También existían documentos y archivos multimedia vinculados desde distintas páginas. Mantener la instalación anterior únicamente para servir estos recursos habría conservado una dependencia de la infraestructura que se buscaba reemplazar.

Los formularios representaban otro punto crítico. El nuevo frontend ya no tendría disponibles los plugins de WordPress, por lo que el procesamiento de solicitudes, las notificaciones por correo y determinados flujos de marketing debían reconstruirse mediante lógica propia.

El rediseño visual y el design system fueron realizados por una diseñadora en Figma. Mi responsabilidad fue trasladar ese sistema al nuevo frontend y construir toda la arquitectura e implementación técnica.

Solución

Mi contribución abarcó la arquitectura técnica, el desarrollo completo del nuevo frontend, la integración con el CMS headless y la migración del contenido existente.

El nuevo sitio se desarrolló con Nuxt 3, Vue 3, TypeScript y Tailwind CSS. Implementé en código los diseños de Figma y construí una biblioteca de componentes reutilizables para las distintas páginas y secciones.

En lugar de utilizar WordPress como frontend y CMS al mismo tiempo, el contenido se trasladó a Orbitype mediante una arquitectura desacoplada respaldada por PostgreSQL.

Las páginas se construyen mediante componentes Vue reutilizables. El CMS almacena la estructura de cada página como una colección de secciones y el frontend interpreta esos datos para seleccionar y renderizar el componente correspondiente.

Este modelo permite construir páginas de servicios, información corporativa, recursos, contacto, preguntas frecuentes y contenido editorial con una biblioteca compartida de componentes, en lugar de mantener layouts independientes dentro de un page builder.

Para el archivo editorial desarrollé un proceso específico de migración desde WordPress. Importa los artículos publicados, descarga sus imágenes destacadas, adapta los enlaces entre publicaciones y transforma el contenido antes de almacenarlo en el nuevo CMS.

Se migraron 22 artículos desde la instalación anterior. Durante el proceso se eliminaron elementos vacíos y markup innecesario de WordPress y Elementor para evitar trasladar deuda visual al nuevo sistema.

La biblioteca de recursos también se migró. Trece documentos descargables se trasladaron al nuevo proyecto y sus enlaces se actualizaron para servirlos directamente desde la aplicación.

Los videos heredados requirieron un flujo separado. Cuatro archivos procedentes de WordPress se procesaron para entrega web, reduciendo su tamaño conjunto de aproximadamente 402 MB a 55 MB antes de incorporarse al frontend.

También reconstruí los formularios como componentes propios del frontend. Las solicitudes se procesan mediante endpoints server-side y se conectan con SendGrid para entregar las notificaciones correspondientes.

Un formulario de captación se conecta además con MailerLite. Su integración se ejecuta de forma independiente después del proceso principal de SendGrid, de modo que un fallo de la plataforma de marketing no interrumpe la entrega del formulario. Las llamadas a la acción para reservar una consulta se integran con Calendly mediante los enlaces correspondientes en cada página.

El proyecto se despliega en Vercel y se valida con TypeScript, ESLint y pruebas de interfaz mediante Playwright.

Mi participación corresponde a la arquitectura, el desarrollo, la migración y las integraciones técnicas. El diseño visual fue realizado por la diseñadora del proyecto, mientras que el contenido especializado sobre contabilidad y fiscalidad fue proporcionado o validado por el equipo responsable de la empresa.

Resultado

El sitio quedó publicado como una aplicación headless y WordPress dejó de ser la capa responsable de presentar las páginas a los visitantes.

El contenido corporativo quedó desacoplado del frontend mediante Orbitype. Las páginas y publicaciones pueden actualizarse desde el CMS mientras los componentes, el comportamiento responsive y las integraciones permanecen controlados desde el código.

La biblioteca editorial existente se mantuvo dentro de la nueva arquitectura: se migraron 22 artículos con sus imágenes y el HTML heredado se transformó para adaptarlo al nuevo template editorial.

Los recursos descargables y los archivos multimedia ya no dependen del WordPress anterior. Los 13 documentos migrados se sirven desde el nuevo proyecto y los cuatro videos heredados se optimizaron de aproximadamente 402 MB a 55 MB antes de su publicación.

Los formularios dejaron de depender de plugins de WordPress. El nuevo flujo procesa las solicitudes desde el servidor y utiliza SendGrid para las notificaciones, mientras que una integración específica con MailerLite puede incorporar leads seleccionados a un flujo de marketing sin acoplar esas funciones.

La nueva arquitectura deja una base reutilizable para publicar artículos, agregar páginas y modificar secciones sin regresar a un page builder.

No se dispone de métricas verificables de conversiones, tráfico o Core Web Vitals antes y después del rebuild. Los resultados confirmados son la migración de arquitectura, contenido y recursos, así como las capacidades técnicas que ahora funcionan en producción.