Case Study: GraphCMS and Leviathan

Although we had zero GraphQL experience in the beginning, we still saved tons of time setting up this project in just one month.

Matt GreenbergCreative Developer at Leviathan

Based in Chicago, Leviathan is a digital design and innovation agency which is part of the Envoy Group. Leviathan uses its network of experts to create immersive, digital experiences that bring an essence of innovation to its customers’ content through a variety of channels. Working with companies like McDonalds, Universal and Nike, its projects range from interactive museum installations to digital promotional experiences in retail spaces.

Project Overview

Leviathan chose GraphCMS to bring their vision for a new client project to life. Large 18ft x 18ft (5.5m x 5.5m) Advertising Displays serve a mixture of generative content, advertisements, and video on residential and commercial buildings. GraphCMS manages and schedules content to be delivered to the screening walls positioned in Los Angeles, San Francisco, Chicago, and San Diego.

Leviathan used to work with legacy CMSs which could not be adapted to the multi-channel setting of the project. Moreover, the development team aimed to cut down on developer time by using a more up-to-date solution. The team was new to working with GraphQL and needed a system that is flexible and easy to master, which they found in GraphCMS. Because GraphCMS is a GraphQL-native system, it offers GraphQL mutations (write operations). These give developers more control, which opens the possibility to manage user-generated content. The Leviathan development team was able to go from having no experience with GraphQL to building the customized UI integration with GraphCMS in just one month’s time.

Leviathan’s tech stack for the project

A react front-end powers a UI client that interacts with GraphCMS. The media display is powered using TouchDesigner. The UI client and TouchDesigner project also communicate via a websocket server for various control purposes. The content is centralized and housed within GraphCMS.

2020 Technology Trends:

Matt Greenberg sees three major trends that will shape the technology landscape in 2020 and the years to come:

“GraphQL. It seems as though every day there is a new article explaining how Big Tech Company moved over their REST APIs to GraphQL, or at least put a GraphQL layer on top of their existing architecture. The whole Javascript ecosystem is moving over to more declarative technologies (i.e. TypeScript) and GraphQL is leading the charge.

WebGL. Major web browsers only started supporting WebGL, a JavaScript API for rendering very efficient interactive 3D and 2D graphics, in 2011. Since then, the use of WebGL in complex, professional projects has become popular and is rapidly gaining momentum. As powerful GPUs become cheaper, and companies start differentiating their application UIs from more basic aesthetics, we will see a boom in interest.

New design patterns on the web. We’re living through an era of homogenous web design. The influence from Google Material’s design can be felt on most sites today. As with all trends, this will not last. In the next couple years, we will see a rebirth of unique user experiences.”

Recommendations for Engineering Teams

Matt’s key recommendation for engineering teams is to use GraphQL. Even if your project is running on a stable REST API, it is worth investing the time and implement an extra layer. “As a mostly front-end developer, it has made my relationship with back-end technology so much better. For example, instead of relying on meticulous documentation of back-end endpoints, I can now go to a project’s GraphiQL URL and see its entire schema, and even interact with its db! Moreover, it saves your application from making extraneous requests, eases code readability, and gives the front-end a quicker feel with prefetching and optimistic UI updates.”

What Mattered most to Leviathan when choosing GraphCMS?

• GraphCMS was very easy for someone with limited backend experience to learn and start building right away with features such as the GraphCMS API Explorer.
• GraphQL Mutations are essential for importing content in the system or powering custom editorial interfaces.