Roteiro de Viagem – Headless Architecture & React SPA Migration

This project started as a classic theme, evolved into Full Site Editing, and has now undergone a complete rewrite to become a technical showcase of Headless Architecture and Single Page Application (SPA). Roteiro de Viagem is a modern platform built to maximize performance, state management, and security, primed for cutting-edge Artificial Intelligence integrations.

Project Overview

Originally built on the WordPress ecosystem — which I still prefer and use natively for almost everything — I decided to use this project as a laboratory driven by technical curiosity. The goal was to explore Vibe Coding to develop a complex site from scratch, completely separating the frontend from the backend. This allowed me to apply the latest Web platform innovations, merging solid SSR/SEO practices with advanced browser technologies, just to test the limits of this approach.

The Challenge: Transitioning to Headless Architecture

The migration required replacing the traditional SQL database and PHP rendering engine with a completely new and modern stack:

• Frontend in React: Building a component-driven interface using React (with Vite), TypeScript for type safety, and Tailwind CSS for agile, utility-first styling.
• Backend as a Service (BaaS): Migration to Firebase (Firestore NoSQL), enabling real-time UI updates (onSnapshot) and native scalability.
• Flawless Technical SEO: Overcoming the classic challenge of SPAs, I implemented React Helmet for real-time injection of dynamic Meta Tags, Open Graph, and Schema.org (JSON-LD), achieving a perfect score (100%) in Accessibility and SEO on Lighthouse.

Technical Execution: New Stack and Features

The new architecture enabled complex features focused on User Experience (UX):

• Login and Profiles System: Integration with Firebase Auth (Google Sign-in). Users now manage their own profiles, save favorite itineraries, and interact through a complete real-time nested comments system.
• Advanced Mobile-First Navigation: Implementation of a Bottom Navigation Bar designed for fluid one-handed navigation, combined with an exclusive Interactive Trip Planner interface.
• Custom Admin Panel: Development of a protected administrative area to manage dynamic menus, moderate interactions, and edit global site settings, all powered directly by Firestore.

Innovation: AI and Experimental APIs

The project doesn’t just focus on the present, but anticipates the future of the web by participating in Google Chrome’s Origin Trials programs:

• Agentic Browsing (WebMCP): Pioneering implementation of the Web Model Context Protocol. Contact forms and searches now function as “Tools” accessible natively by AI Agents hosted in the browser itself (Chrome LLMs), aided by a clear instructions manifest.
• Advanced Web Metrics: Use of the Soft Navigation Heuristics API to accurately measure loading during route changes in React.
• Prerendering (Speculation Rules): Configuration of preloading routes based on user interactions, creating a practically instantaneous browsing experience, with strict monitoring via Long Animation Frames to prevent main thread blocking.

Conclusion

“Roteiro de Viagem” is proof of how Vibe Coding can be explored to build complex systems in an agile and structured manner. Although my preference remains the native WordPress ecosystem for production projects, this experiment consolidates the union of a solid software engineering foundation with the latest web innovations, delivering a scalable, secure, and future-proof platform for AI-guided interactions.