How Mailchimp built an entertainment platform in six months with Contentful and Gatsby
Last summer, Mailchimp, a platform that supports nearly 20 million businesses with email, marketing and technology tools, took a big leap into custom content. The Atlanta-based company launched Mailchimp Presents, a media portal dedicated to original content geared towards its customer base of entrepreneurs and small-business owners.
Mailchimp partnered with production studios including Pineapple Street Media, Vice Media and Scout Productions to create documentaries, podcasts, animated shorts and scripted series depicting the triumphs, struggles and quirks of building a business. More recently, it has pitched in to help filmmakers. When SXSW 2020 had to be canceled, Mailchimp launched Support the Shorts, a streaming event to view select short films from the fest for free on the Mailchimp Presents platform.
When Mailchimp first embarked on the creation of its entertainment platform, it turned to its existing digital partner, Work & Co. Mailchimp and Work & Co had collaborated on various projects in the past, but this marked the first time working together to create a digital product from the ground up.
Work & Co used Contentful and Gatsby to get Mailchimp Presents up and running in just six months. We caught up with Sarah Mogin, associate technology director at Work & Co, about using modern tools to achieve a flexible workflow and reduce developer overhead — with a few creative hacks along the way.
What were the goals for the new entertainment platform?
Sarah Mogin:
Mailchimp invested in some really amazing original content that would resonate with entrepreneurs and business owners, so our goal was to let that content take center stage. We wanted to make it easy for users to browse, watch, listen and share, and generally get straight into the content without a lot of clicking around.
We also knew that our target user would be busy and on the go, so we prioritized a performant mobile experience and showcased the portal’s many pieces of short, “snackable” content.
How did you use Contentful and Gatsby to build Mailchimp Presents?
Sarah Mogin:
Gatsby and Contentful are a dream team, especially for content-driven projects like Mailchimp Presents.
We chose Contentful because we needed a CMS that could support a diverse media roster and scale as new content types were added. Gatsby is a React framework that can generate both static and dynamic pages; it was the natural choice to build a performant web app with an intricate UI.
Using Gatsby’s Contentful plugin, we queried data via GraphQL, generated static pages for each piece of content, and harnessed GraphQL inline fragments to query fields specific to the various content types.
We capped off the JAMStack trifecta by using Netlify for our development and testing environments. Automatic branches and pull requests made for a pleasant development workflow.
How did you structure your models in Contentful?
Sarah Mogin:
Our core content models — Series, Film, Podcast and Teaser — had many data properties in common, along with medium-specific fields, such as Series seasons and Podcast subscription links.
As we came up with our content model, we had to balance two sets of needs. Content editors want a flat structure so they don’t have to juggle a lot of nested content. For developers, it’s the opposite: we want nested models to avoid repeating ourselves.
To get the best of both worlds, we created our own schema-generator scripts with reusable pieces of code (for developers), which we composed into flat structures (for editors). Our scripts used the contentful-migration tool to create and update our schema.
Tell us about your favorite hacker moments
Sarah Mogin:
1. The homepage is like the Highlander: there can be only one. But we couldn’t figure out a way to enforce this in Contentful. In the end, we gave our homepage model an internal, required title field using Contentful’s “Unique field” and “Accept only specified values” validations. The only value we allowed was the word “Home” — thus enforcing a singleton homepage.
2. If you’ve used Gatsby and Contentful before, you might have run into some bugs with schema generation. Optional fields that are not in use in at least one instance will be removed from the GraphQL schema, causing an error if your code tries to query them. There is a promising plugin to address this, gatsby-plugin-schema-snapshot, but it wasn’t available at the time. We had to populate “dummy” data in Contentful to fully build out the schema. We designated this content with a checkbox field called System Settings to ensure it would never show up on production.
What’s your favorite content on Mailchimp Presents?
Sarah Mogin:
I love Trade Show Show! It’s like The Office for trade shows, and each episode is under 10 minutes long.
