Peaceful transition to a headless CMS and decoupled Gatsby JS frontend

Migrating to a headless CMS and decoupled GatsbyJS front-end

As demand for its services continued to grow, Yoga had reached the limits of its performance abilities within its previous CMS system. As a result, we wanted to be able to improve the performance delivery of Yoga’s tremendous volume of online content to its 500,000+ users in a fast and reliable way.

As their user base grew during the pandemic, as more people were staying at home, Yoga International also needed to find a way to modernize its tech stack and create a more unified brand experience across multiple frontends, including its website, mobile apps, and streaming TV apps. On the backend, Yoga was experiencing large new traffic spikes, so we needed to upgrade its previous CMS version to easily accommodate the load when this occurs.

Additionally, Happy Cog was tasked with seamlessly migrating Yoga’s extensive user database and content to a custom headless CMS with zero downtime along the way. Yoga needed more flexibility and power with the technology they were already using, so we set out to rewrite the way its APIs interacted between frontend and backend properties in a much more modern way.

Improving the customer experience with zero downtime

To prepare for a seamless transition, we had to work to maintain Yoga’s entire database of users, subscriptions, and billing data, and switch it over to a new system without it interfering with the frontend’s functionality. This presented an opportunity for Yoga to streamline their database, as it has gotten very large over time.

Our three main reasons for making the transition to a decoupled, headless architecture were:

• Performance, speed, and a more unified platform.
• All content platforms were previously separate, which had become a large barrier to maintenance and platform improvement that needed to be addressed.
• Modernization of Yoga’s code base to be able to improve its features and services in a seamless, more rapid pace than before.

Seamlessly transition to a modern architecture

To ensure a seamless transition to a new content management system, we documented in detail all aspects of the site’s functionality, recreating them in the new platform without any effect on user experience.

Our thorough review of the existing site architecture allowed us to recreate it with a more efficient architecture. This helped shed years of technical debt (inefficiencies introduced over time, as features changed and the site grew past its initial vision).

How we did it:

• Migrated all existing content to a new, decoupled content management system focused only on content.
• Migrated user data from the previous CMS to a custom user database.
  Re-wrote the backend GraphQL server to work with the new headless CMS and user database.
• Utilized Cloudflare Workers to quickly route traffic to the new backend, allowing existing frontends (website, mobile app, and TV app) to operate as-is.
  

Unified brand experience and amplified site performance

Since the transition, Yoga International was able to reduce their monthly AWS infrastructure costs by 40%, as well as successfully speed up many of its processes on both the development side and the content side. Because of our migration to a new decoupled CMS and backend, Yoga can now enjoy a considerable increase in development efficiency as well as platform enhancements as the new system makes it a lot easier to build, test, and launch new multi platform features — especially on web and mobile.

All told, Yoga now has the tools and platform to work more efficiently while providing an accessible and unified brand experience for its customers — not to mention the faster time it takes to develop new features, lower infrastructure costs, and better site performance altogether.