At the end of January 2021, Contentful sponsored the first global MACH Alliance MACHathon. MACH stands for microservices, API-first, cloud-native and headless — that describes Contentful and other industry-leading tools that teams can integrate to create a tailored tech stack.

The MACHathon was an opportunity for teams to dive into MACH technology and composable architectures to bring groundbreaking, unthinkable or extravagant ideas to life — all within the span of the eight-day event. The theme for this year’s MACHathon was helping people get unstuck. This has become more important than ever during the pandemic.

MACHathon teams chose Contentful for their content platform because our App Framework makes it easy to connect tools and transform digital experiences. Here’s a few of the most compelling projects that demonstrate just how much Contentful can do.

What is MACH technology? 

MACH technologies use leading tools to build a modular architecture, which enables teams to build more, more quickly. 

• Microservices replace monolithic systems. This allows teams to use the best tools available for each function required. 

• API-first connects each microservice via APIs, making it possible for applications and services to seamlessly interact.

• Cloud-native tools store, host, scale and automatically update. 

• A headless approach decouples the front-end presentation and backend logic, which gives front-end and backend teams flexibility and the power to build across channels. 

This flexibility and customization not only empowers teams to develop products, but scale them to meet growing demand.  

MACHathon projects, and what you can learn from them

GraphCatalog

The GraphCatalog combines commerce and content with GraphQL. Apps that use multiple headless API platforms tend to be disorganized because the cross-platform relationships lack a formal structure. The GraphCatalog is a GraphQL gateway API that defines these relationships and was developed using Contentful, Apollo, Node.js, Ordercloud and React.

By combining the GraphQL gateway API with a basic web client, Four51’s Team Python easily produced an ecommerce product catalog that can have multiple services on the backend and deliver content to multiple clients on the front end. With this tool, the images for the catalog are sourced from Contentful, because it provides flexibility — you can add PDFs with marketing text, build categories and similar information. Product and pricing data is sourced from Ordercloud.

TeacherNator

The TeacherNator transforms teaching by connecting Contentful and Miro to create, present and consume interactive curriculum content in a fun, dynamic and compelling way. By creating a tool that seamlessly connects content and collaboration, Valtech’s Team Giraffe empowers teachers to create an online learning experience that keeps their students engaged and motivated while remote.

The TeacherNator combines Contentful, GitHub, GitLab, Miro, Netlify, Node.js, Nuxt.js, Uniform.dev and Vue.js to create a tool that provides a unique digital learning experience. Teachers can create personalized lesson plans that incorporate reading, videos and photos in a manner that allows students to focus on the information they find the most compelling. Once the students review the materials, they can directly enter their lessons and collaborate with their classmates in real time to complete the various assignments. Eventually, a video conferencing tool will be integrated into the tool so teachers can directly interact with students through the TeacheNator page, making it a one-stop digital learning tool.

Ultimate MACH DXP proof of concept

The Ultimate MACH DXP proof of concept shows how businesses can get unstuck from legacy DXPs with a fully functional combination of content, commerce, search and edge-based personalization with lightning-fast performance and a perfect lighthouse score. Not only does this create digital business value faster, but it also provides an architecture that can adapt to the rapid shift in customer behavior that we’ve seen with the pandemic.

Team Alligator built an example conference site to showcase their proof of concept using Next.js, Algolia, BigCommerce, Contentful, Uniform, Google Analytics and Netlify. As the customer reviews the conference details, the site continuously updates to display personalized content based on their activity. When they start the registration process, the site will also update to display information specific to where they are in the process, creating a streamlined experience for the customer. They don’t have to navigate and dig through the site for the information they are looking for. It is seamlessly provided to them.

A real time team mood board

The MACHathon Moodboard highlights how MACH technology can be paired with Home Assistant and a remote so that users can simply use a button to input information directly to an app. With the Machathon Moodboard, team members can use an IKEA remote to share their current mood with their team members in real time through the Moodboard app.

The project uses Contentful for several types of data, including basic data on the user, their mood, any custom outcomes they want and finally all the content for the Alexa skill. The IKEA remote is then programmed so that the various buttons relate to the content in Contentful. In this case, the top and bottom buttons on the remote relate to moods and when clicked, the options available in Contentful can be cycled through until the appropriate mood has been reached. The left and right buttons are connected to the user data in Contentful. All you need to do is click the right or left button until you’ve reached your name and then click the top or bottom button until you find the mood you are in and — voilà, you’ve shared your mood with your team!

LAB Group wins MACHnificent award using Contentful: Food Bank Connector

The UK is facing a hunger crisis. The number of people relying on food bank supplies is at an all-time high. The Trussell Trust’s food bank network distributed 1.9 million emergency food supplies to people in crisis from April 2019 to March 2020. The Food Bank Connector enables food banks to highlight their demand and send alerts to volunteers and local services when they need assistance. And since all food banks are listed in the directory, it helps them support each other by making it easy to find which food banks have a surplus.

Rebecca Kidston, design lead on the project says, “Having empathy is a fundamental skill to being a designer. We were able to collaborate on the project with the focus of creating positive social impact. This project was so important to me because it allowed us to design a purposeful solution based on our empathy for others. It is easy to innovate and design when you’re working from the heart to help other people."

Technical Solution

The Food Bank Connector uses technology to improve the way food banks operate by connecting existing services. This creates a streamlined process for food banks to request help. This easy-to-use tool was developed using Contentful, Algolia, Nuxt.js, Amazon Web Services, Auth0, Netlify and the GiveFood API.

Creating the Food Bank Connector was the first time LAB Group’s Team Camel built with MACH tech, and they were surprised with how quickly they were able to build their tool. The scalable nature of MACH tech also means that they can continue to expand the tool’s features and roll the solution out to other areas.

When we started planning our technical solution for the MACHathon, we looked at Contentful to handle all of our content needs. It's lightning fast to get a Contentful space up and running. It hooked into our front end, which is essential when working on something time sensitive (or when you may not know the end goal) like a hackathon project. With easy integrations with other MACH solutions, our selected hosting provider and the ability to roll out our content to different platforms — from screens to wearables — based on the project's future, it was the obvious choice.

Deon Smith, technical lead on the project says, “This was an opportunity for us to showcase what we can do with MACH technology. It was just great fun to crunch on such a worthwhile project. Being able to share knowledge was a beneficial experience. The teams were exposed to some new and challenging experiences during the MACHathon, which has sparked internal innovation and creative thinking.

Award-winning work 

The MACHathon judges awarded our project the MACHnificent award, which is the prize for the overall winners. 

Jonny Tooze, LAB Group CEO says, "LAB's culture is to put people first — and that means all people — so to be involved in a project like this means a lot to our team. Seeing agencies within the group coming together and successfully demonstrating how they can create something for the greater good using MACH technology, and in such a rapid time frame, was simply amazing. MACH architecture is a huge part of LAB's future, so being able to participate in the MACHathon has been awesome.” 

Discover more exciting projects developed by teams using Contentful.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.