Sitio headless con reservas y suscripciones para clases de idiomas

Reto

Un negocio dedicado a la enseñanza personalizada de idiomas ya contaba con una página web, pero necesitaba reconstruirla y rediseñarla por completo para presentar mejor su oferta y facilitar la contratación de clases.

El proceso de reserva no podía resolverse con un formulario genérico o un único enlace de calendario. Los alumnos podían elegir entre distintos idiomas, niveles, modalidades, clases privadas, grupos pequeños y paquetes de varias sesiones.

Cada opción debía conducir al calendario adecuado para evitar que se reservara una sesión que no correspondiera con el servicio elegido. El recorrido también tenía que incorporar el pago y contemplar contrataciones recurrentes para quienes tomaban clases periódicas.

La gestión del contenido debía permanecer separada del código frontend. Textos, imágenes, precios y secciones tenían que poder actualizarse sin reconstruir manualmente la aplicación en cada cambio.

El diseño visual y el design system fueron preparados por una diseñadora en Figma. Mi responsabilidad fue convertir ese trabajo en una aplicación funcional, responsive y conectada con los sistemas de contenido y reservación.

Solución

Mi contribución abarcó el desarrollo completo del nuevo frontend, la integración con el CMS headless y la construcción del recorrido personalizado de selección y contratación.

La interfaz se desarrolló con Nuxt 3, Vue, TypeScript y Tailwind CSS. Orbitype se integró como CMS desacoplado, separando el contenido editorial y la configuración de las secciones de los componentes responsables de la presentación y la interacción.

Implementé mediante código el sistema definido por la diseñadora en Figma, incluyendo navegación, páginas de cursos, servicios para empresas, traducciones, ubicaciones, testimonios, precios y formularios personalizados. Figma MCP apoyó la inspección visual y la sincronización de recursos, mientras Orbitype MCP formó parte del flujo de contenido.

También desarrollé la lógica personalizada de selección y agenda. Las opciones de la interfaz se relacionan con el idioma, tipo de clase, nivel, modalidad o paquete elegido.

En lugar de dirigir a todos los visitantes a la misma página de reservación, la lógica conecta cada selección con el evento correspondiente en Calendly. De este modo, la disponibilidad mostrada coincide con el servicio elegido por el alumno.

El recorrido continúa mediante la selección de horario y el pago, y contempla además paquetes y contrataciones recurrentes para quienes reservan sesiones periódicas.

Mi trabajo incluyó desarrollo frontend, enrutamiento entre productos y calendarios, integración con el CMS y el flujo de contratación. Las definiciones pedagógicas, los horarios disponibles, los precios y las condiciones comerciales fueron proporcionados o validados por el equipo responsable del servicio.

La implementación también incorporó contenido bilingüe, componentes responsive, navegación móvil controlada, carruseles táctiles, ajustes de accesibilidad y correcciones de desbordamiento en pantallas pequeñas.

Resultado

El sitio reconstruido quedó publicado con una arquitectura headless, un nuevo sistema visual y una experiencia adaptada para escritorio, tablet y dispositivos móviles.

Los alumnos pueden revisar idiomas, niveles, modalidades, ubicaciones y paquetes antes de iniciar una reserva. Cada opción puede conectarse con el calendario adecuado según la clase seleccionada.

El flujo reúne disponibilidad, reserva y pago dentro del mismo recorrido. También permite ofrecer paquetes y contrataciones recurrentes sin depender exclusivamente de la coordinación manual por correo o teléfono.

Orbitype mantiene la gestión de contenido separada del frontend. Los textos, imágenes, precios y secciones pueden actualizarse desde el CMS, mientras la aplicación conserva la lógica de componentes y agenda.

La base técnica resultante incluye TypeScript, componentes reutilizables, pruebas de interfaz, validación de código y despliegues controlados. Esto facilita modificar la oferta, incorporar nuevos cursos y continuar mejorando la experiencia de contratación.

No existen cifras verificadas sobre reservas, ingresos, suscripciones activas o reducción de trabajo administrativo. Por ello, el caso presenta las capacidades operativas entregadas sin atribuir mejoras numéricas no documentadas.