Roteiro de Viagem – Arquitetura Headless & React SPA Migration

Este projeto começou como um tema clássico, evoluiu para o Full Site Editing e agora passou por uma reescrita completa (rewrite) para se tornar uma vitrine técnica de Arquitetura Headless e Single Page Application (SPA). O Roteiro de Viagem é uma plataforma moderna construída para maximizar a performance, o controle de estado e a segurança, preparada para integrações de ponta com Inteligência Artificial.

Visão Geral do Projeto

Originalmente construído sobre o ecossistema de CMS visual do WordPress, tomei a decisão estratégica de abandonar o modelo “engessado” para focar em engenharia de software real. O objetivo foi separar completamente o frontend do backend, permitindo uma liberdade arquitetônica para aplicar as inovações mais recentes da plataforma Web, unindo práticas sólidas de SSR/SEO com tecnologias avançadas de navegador.

O Desafio: A Transição para a Arquitetura Headless

A migração exigiu a substituição do tradicional banco de dados SQL e do motor de renderização PHP por uma stack totalmente nova e moderna:

• Frontend em React: Construção de uma interface orientada a componentes usando React (com Vite), TypeScript para segurança de tipagem, e Tailwind CSS para estilização utilitária e ágil.
• Backend as a Service (BaaS): Migração para o Firebase (Firestore NoSQL), permitindo atualizações de interface em tempo real (onSnapshot) e escalabilidade nativa.
• SEO Técnico Impecável: Superando o desafio clássico das SPAs, implementei o React Helmet para injeção de Meta Tags dinâmicas, Open Graph e Schema.org (JSON-LD) em tempo real, atingindo nota máxima (100%) em Acessibilidade e SEO no Lighthouse.

Execução Técnica: Nova Stack e Funcionalidades

A nova arquitetura habilitou funcionalidades complexas focadas na Experiência do Usuário (UX):

• Sistema de Login e Perfis: Integração com Firebase Auth (Google Sign-in). Os usuários agora gerenciam seus próprios perfis, salvam roteiros favoritos e interagem através de um sistema completo de comentários aninhados em tempo real.
• Navegação Mobile-First Avançada: Implementação de uma Bottom Navigation Bar desenhada para navegação fluida com uma mão, combinada com uma interface exclusiva de Planejador de Viagens Interativo.
• Painel de Administração Customizado: Desenvolvimento de uma área administrativa protegida para gerenciar menus dinâmicos, moderar interações e editar configurações globais do site, tudo alimentado diretamente pelo Firestore.

Inovação: Inteligência Artificial e APIs Experimentais

O projeto não foca apenas no presente, mas antecipa o futuro da web através da participação em programas de Origin Trials do Google Chrome:

• Agentic Browsing (WebMCP): Implementação pioneira do Web Model Context Protocol. Formulários de contato e buscas agora funcionam como “Ferramentas” (Tools) acessíveis nativamente por Agentes de IA hospedados no próprio navegador (Chrome LLMs), auxiliados por um manifesto de instruções claras.
• Métricas Web Avançadas: Utilização da API de Soft Navigation Heuristics para medir com precisão o carregamento durante a troca de rotas no React.
• Prerenderização (Speculation Rules): Configuração de rotas de pré-carregamento baseadas nas interações do usuário, criando uma experiência de navegação praticamente instantânea, com monitoramento rígido via Long Animation Frames para evitar bloqueios na thread principal.

Conclusão

“Roteiro de Viagem” é a prova viva da capacidade de construir software real fora dos limites tradicionais de um CMS. O projeto consolida a união de uma base sólida de engenharia de software com as inovações mais recentes da web, entregando uma plataforma escalável, segura e orientada ao futuro das interações guiadas por Inteligência Artificial.