Plataforma Web Administrable para Agencia de Viajes
Stack: Next.js · Strapi · SASS · Resend · Vercel · Fly.io
Plataforma web para una agencia de viajes desarrollada con arquitectura moderna y CMS administrable. Permite gestionar destinos, itinerarios y contenido del sitio sin depender de desarrollo técnico.
Contexto
Proyecto desarrollado para transformar un sitio estático en una plataforma moderna, administrable y lista para producción.
La base visual partió de una plantilla HTML adquirida en Envato, utilizada únicamente como punto de partida de maquetación. El diseño estaba inicialmente resuelto, pero presentaba limitaciones estructurales: contenido hardcodeado, ausencia de CMS y falta de escalabilidad.
Además, el cliente tenía un requerimiento claro: quería poder modificar contenido, crear nuevos tours y actualizar información sin depender de un desarrollador ni enfrentar obstáculos técnicos.
Como parte del trabajo se crearon nuevos componentes —como las tarjetas de tours— y se adaptaron elementos de la plantilla a las necesidades requeridas.
El objetivo fue convertir esa maqueta en un sistema desacoplado, flexible y centrado en la autonomía del cliente.
Objetivo
Transformar un sitio estático en una plataforma:
- • Administrable por el cliente.
- • Escalable a múltiples destinos.
- • Desacoplada (frontend + CMS).
- • Desplegada en infraestructura cloud moderna.
Arquitectura
Se implementó una arquitectura headless con separación clara de responsabilidades.
Stack tecnológico
- • Frontend: Next.js (App Router)
- • CMS: Strapi
- • Estilos: SASS modular
- • Email: Resend API
- • Deploy Frontend: Vercel
- • Deploy CMS: Fly.io
Decisiones técnicas
Frontend en Vercel
- • Integración nativa con Next.js.
- • Manejo de variables de entorno.
- • Deploy continuo.
- • Optimización automática de performance.
CMS en Fly.io
- • Contenedor independiente para Strapi.
- • Separación total del frontend.
- • Escalabilidad independiente.
- • Arquitectura preparada para crecimiento.
Esta separación permitió que frontend y backend puedan evolucionar de forma independiente.
Implementación
Migración a componentes reutilizables
El HTML estático fue transformado en componentes modulares en Next.js, eliminando contenido hardcodeado y estructurando la aplicación con enfoque en reutilización.
Componentes nuevos y elementos adaptados
Se crearon nuevos componentes específicos para el proyecto, como las tarjetas de tours, que permiten mostrar de forma consistente la información de cada destino (imagen, título, descripción, duración, precio, etc.) y se reutilizan en listados y páginas internas. Además, se adaptaron elementos de la plantilla original (secciones, formularios, bloques de contenido) a las necesidades requeridas: estructura de datos del CMS, diseño responsive y flujos de navegación del sitio.
Modelado de datos
Se diseñó una colección estructurada de Tours/Destinos en Strapi, permitiendo:
- • Detalles configurables.
- • Estados dinámicos.
- • Secciones repetibles.
- • Itinerarios por día.
El enfoque estuvo en crear un modelo flexible que el cliente pudiera gestionar sin tocar código.
Renderizado dinámico
Las páginas se generan dinámicamente por slug consumiendo la API del CMS, preparando el sistema para futuras integraciones como filtros, búsquedas o reservas.
Modo mantenimiento
Si en alguna página no se obtienen datos desde Strapi (por ejemplo, el CMS está caído, no hay contenido publicado o hay un error de conexión), el sitio muestra automáticamente una vista de mantenimiento. Así el usuario ve un mensaje controlado en lugar de errores o pantallas en blanco.
Problema que resuelve
- • Autonomía total del cliente para actualizar contenido.
- • Escalabilidad sin duplicación de código.
- • Infraestructura desacoplada y moderna.
- • Base lista para crecimiento.
Resultado
- • Plataforma administrable en producción.
- • Frontend optimizado en entorno serverless.
- • Backend desplegado en infraestructura cloud independiente.
- • Arquitectura preparada para futuras integraciones.
Made with love ❤️ 2026