Headless language-course website with booking and subscriptions

Challenge

A personalised language-training business already had a website, but needed a complete rebuild and redesign to present its offering more clearly and make it easier for students to contract lessons.

The booking journey could not be solved with a generic contact form or a single calendar link. Students could choose between different languages, levels, learning formats, private lessons, small groups, and multi-session packages.

Each option needed to lead to the appropriate calendar so students would not reserve a session that did not match the selected service. The journey also had to include payment and support recurring arrangements for students taking regular lessons.

Content management needed to remain separate from the frontend code. Text, images, prices, and sections had to be editable without manually rebuilding the application for every update.

The visual design and design system were prepared by a designer in Figma. My responsibility was to turn that work into a functional, responsive application connected to the content and booking systems.

Solution

My contribution covered the complete development of the new frontend, the headless CMS integration, and the custom course-selection and contracting journey.

The interface was developed with Nuxt 3, Vue, TypeScript, and Tailwind CSS. Orbitype was integrated as a headless CMS, separating editorial content and section configuration from the components responsible for presentation and interaction.

I implemented the designer’s Figma system in code, including navigation, course pages, business-training services, translation services, locations, testimonials, pricing, and custom forms. Figma MCP supported visual inspection and asset synchronisation, while Orbitype MCP supported the content workflow.

I also built the custom course-selection and scheduling logic. Options in the interface are associated with the selected language, lesson type, level, learning format, or package.

Instead of sending every visitor to the same booking page, the logic directs each selection to the corresponding Calendly event. This keeps the availability presented to the student aligned with the service they chose.

The journey continues through scheduling and payment, and also accounts for packages and recurring arrangements for students who contract regular sessions.

My work included frontend development, product-to-calendar routing, CMS integration, and the contracting flow. Pedagogical definitions, available schedules, pricing, and commercial terms were provided or validated by the team responsible for the service.

The implementation also included bilingual content, responsive components, controlled mobile navigation, touch-friendly carousels, accessibility adjustments, and fixes for small-screen overflow.

Outcome

The rebuilt website was published with a headless architecture, a new visual system, and an experience adapted for desktop, tablet, and mobile devices.

Students can review languages, levels, formats, locations, and packages before starting a reservation. Each option can connect to the appropriate calendar according to the selected class.

The flow brings availability, booking, and payment into the same journey. It also supports packages and recurring arrangements without relying exclusively on manual coordination by email or phone.

Orbitype keeps content management separate from the frontend. Text, images, prices, and sections can be updated through the CMS, while the application retains the component and scheduling logic.

The resulting technical foundation includes TypeScript, reusable components, interface tests, code validation, and controlled deployments. This makes it easier to modify the offering, add courses, and continue improving the booking experience.

No verified figures are available for bookings, revenue, active subscriptions, or administrative time saved. The case therefore presents the operational capabilities delivered without claiming undocumented numerical improvements.