Senderos de Chiapas
Plataforma Web Administrable para Agencia de Viajes
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 resuelto visualmente, 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.
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.
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.
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