Roteiro de Viagem – Arquitectura Headless & Migración a React SPA

Este proyecto comenzó como un tema clásico, evolucionó hacia Full Site Editing y ahora ha pasado por una reescritura completa (rewrite) para convertirse en una vitrina técnica de Arquitectura Headless y Single Page Application (SPA). Roteiro de Viagem es una plataforma moderna construida para maximizar el rendimiento, el control de estado y la seguridad, preparada para integraciones de vanguardia con Inteligencia Artificial.

Visión General del Proyecto

Originalmente construido sobre el ecosistema de WordPress — el cual sigo prefiriendo y utilizando de forma nativa para casi todo —, decidí usar este proyecto como un laboratorio impulsado por la curiosidad técnica. El objetivo fue explorar el Vibe Coding para desarrollar un sitio complejo desde cero, separando completamente el frontend del backend. Esto me permitió aplicar las innovaciones más recientes de la plataforma Web, uniendo prácticas sólidas de SSR/SEO con tecnologías avanzadas de navegador, solo para probar los límites de este enfoque.

El Desafío: La Transición a la Arquitectura Headless

La migración requirió la sustitución de la tradicional base de datos SQL y del motor de renderizado PHP por un stack totalmente nuevo y moderno:

• Frontend en React: Construcción de una interfaz orientada a componentes utilizando React (con Vite), TypeScript para la seguridad de tipado, y Tailwind CSS para un estilo utilitario y ágil.
• Backend as a Service (BaaS): Migración a Firebase (Firestore NoSQL), permitiendo actualizaciones de interfaz en tiempo real (onSnapshot) y escalabilidad nativa.
• SEO Técnico Impecable: Superando el desafío clásico de las SPAs, implementé React Helmet para la inyección de Meta Tags dinámicas, Open Graph y Schema.org (JSON-LD) en tiempo real, logrando la puntuación máxima (100%) en Accesibilidad y SEO en Lighthouse.

Ejecución Técnica: Nuevo Stack y Funcionalidades

La nueva arquitectura habilitó funcionalidades complejas centradas en la Experiencia del Usuario (UX):

• Sistema de Login y Perfiles: Integración con Firebase Auth (Google Sign-in). Los usuarios ahora gestionan sus propios perfiles, guardan itinerarios favoritos e interactúan a través de un sistema completo de comentarios anidados en tiempo real.
• Navegación Mobile-First Avanzada: Implementación de una Bottom Navigation Bar diseñada para una navegación fluida con una sola mano, combinada con una interfaz exclusiva de Planificador de Viajes Interactivo.
• Panel de Administración Personalizado: Desarrollo de un área administrativa protegida para gestionar menús dinámicos, moderar interacciones y editar configuraciones globales del sitio, todo alimentado directamente por Firestore.

Innovación: Inteligencia Artificial y APIs Experimentales

El proyecto no solo se centra en el presente, sino que anticipa el futuro de la web a través de la participación en programas de Origin Trials de Google Chrome:

• Agentic Browsing (WebMCP): Implementación pionera del Web Model Context Protocol. Los formularios de contacto y las búsquedas ahora funcionan como «Herramientas» (Tools) accesibles de forma nativa por Agentes de IA alojados en el propio navegador (Chrome LLMs), ayudados por un manifiesto de instrucciones claras.
• Métricas Web Avanzadas: Uso de la API de Soft Navigation Heuristics para medir con precisión la carga durante el cambio de rutas en React.
• Prerenderización (Speculation Rules): Configuración de rutas de precarga basadas en las interacciones del usuario, creando una experiencia de navegación prácticamente instantánea, con un monitoreo estricto a través de Long Animation Frames para evitar bloqueos en el hilo principal.

Conclusión

«Roteiro de Viagem» es la prueba de cómo se puede explorar el Vibe Coding para construir sistemas complejos de manera ágil y estructurada. Aunque mi preferencia sigue siendo el ecosistema nativo de WordPress para proyectos de producción, este experimento consolida la unión de una sólida base de ingeniería de software con las innovaciones más recientes de la web, entregando una plataforma escalable, segura y orientada al futuro de las interacciones guiadas por Inteligencia Artificial.