Scaling Content at Coinbase

Written by Clay Kohut, Senior Software Engineer

TLDR: Over the past year, Coinbase has invested in tools to remove static content via our web interface. This is the story of how we did it and why it matters.

Coinbase Learn (Editor)

Coinbase’s educational portal, Coinbase Learn, was launched in late 2020. Learn contains hundreds It includes beginner’s guides, hands-on tutorials, and market updates and is maintained by a dedicated team of content editors.

Our engineers have explored various options to run Learn. Ideally, we wanted a solution that would allow us to seamlessly integrate content into the Coinbase checkout experience.

Hosted options for blog-like content like Medium offer very little flexibility.

The WordPress framework was very opinionated and directly related to the user interface.

We ended up choosing a file Headless CMSAnd specially content. Contentful is a content platform that offers a headless approach to content as well as backend scalability to integrate with our favorite tools and ways of working. Being “headless” means that CMS is UI-neutral – it separates Content From experience, simply providing structured JSON for the front-end, allowing us to take full control of the front-end experience.

Integrating with Contentful was just a matter of creating data structures that represent different types of content (via Contentful UI) and then assigning those data structures to your React components (which actually handled data rendering)

Our Primary CMS Engineering

Wear a flight suit

With Coinbase Learn under our belt and Coinbase Direct Public Offering (DPO) On the horizon, a cohesion initiative (considered project suit). Project Flightuit sought to bring a cohesive look and feel across the checkout Coinbase properties as well as enforce design standards across newly created landing pages.

While investigating the status of Coinbase product landing pages, we discovered 40 product surfaces scattered across 15 different repositories / front-end applications. The various frontends are built using a variety of technologies – everything from React with Typescript (our current standard) to legacy Ruby on Rails templates, to static HTML.

Peek at the “Page Architecture” overview document

Take advantage of the Contentful integration that was initially set up for Learn CoinbaseWe set out to create a set of “blocks” that can be used to standardize landing page layouts (while aligning around our brand new guidelines).

‘Blocks’, also known as content types, are high-level components that combine to create landing pages. For example, a “Hero” block might contain a “Title”, “Subtitle” and a “CTA Button” in a CMS, which corresponds to a React component on the front end.

The hero block data structure (left) and corresponding React component (right)

By creating a thoughtful “block-based system” (and refactoring our existing landing pages to use that system), we were able to efficiently migrate nearly all of our landing pages into a single front-end application, powered by React, and integrated with Contentful.

Once the block system was up and running, paging was a relatively simple task of dragging/dropping the various blocks through the Contentful UI, and redirecting old page paths to the new CMS-based alternative.

1, 2, automation

Flightuit After the project, our team focused on improving the usability and flexibility of the CMS. Some lessons learned:

  1. Made by CMS easy to use For non-technical team members is extremely important. With our first pass on CMS landing pages, we created some data structures with advanced features (such as generating global layout) that were mostly only understandable and serviceable by engineers (thus defeating the main value pillar of CMS). We countered this by favoring the editor experience above all else. By automating advanced features within Contentful where possible (such as automatically selecting the layout that best fits the set of content), we can allow editors to focus on Editing instead of Building.
  2. By integrating with Contentful (third party), our frontends are now dependent on Contentful uptime. guaranteed to have very consistent A track record of nearly 100% uptime, but this dependence was challenged when Contentful experienced two outages due to some extensive DNS issues. (To be content fair, these outages were also hit by some of the largest websites in the world and were the only cases where we saw Contentful unavailable.) To ensure that our high visibility pages (such as our homepage) are available, we have decided that the best way forward is to introduce a reverse proxy API that takes advantage of A title that doesn’t make sense if it’s wrong, for our CDN to serve the cached content if the upstream call fails. This allows us to stay awake even when the CMS is down (for X number of days).
Above: Our CMS architecture before and after adding the cached reverse proxy

3. Training new engineering teams to work with and expand the CMS was the primary focus. My team has become the only source of knowledge for an increasingly used system, often outsourcing new engineers to the system on a one-time basis. To better disseminate knowledge of the framework, we have developed CMS Ambassador Program, which aims to train and gather CMS professionals across the company. The program begins with a 1.5-hour structured workshop where attendees learn the introductions and generalizations of integration with a CMS. While this program is currently running in real time and setup sessions are held as needed, we are currently in the process of converting this into a self-service course via an in-house training tool.

A shot from our in-house CMS Ambassador workshop

Main results

With 2021 coming to a close, we’re proud to take a look at how far we’ve come over the past year. Here’s the progress we’ve seen after successfully implementing a company-wide content management system:

  • Landing page creation time reduced from an average of two weeks to less than a day.
  • Reduce the time it takes to change content From an hour process Change/review/merge/publish code to less than 10 minutes, And Without engineering intervention.
  • By the end of the year, 90% of all top-level surfaces will be covered. This means that Almost all surfaces of high-level products that have been checked out On Coinbase it will be running on Contentful by the end of the year.

These efficiency gains have been largely made possible by our leadership’s investment in infrastructure tools and developers. Coinbase really cares about engineering excellence, developer experience, and automation of routine processes.

We also couldn’t have done it without the hard work of some amazingly talented and thoughtful individuals (each of whom I am extremely proud to work with):

  • Leon Hagarty, Askat Bakiv, Joao Mello, Stephen Lee, Wilhelm Willy, Bryant Gallardo, Gueherme Lorsen, Raymond Son, Leonardo Zizamia, Christopher Nascon (England)
  • Bobby Rasmusson and Ross Ballard (Producer)
  • Ananth Chandrasekharan, Gotham Bauchi, Manish Gupta (Executive Vice President of Eng)

We’re all excited to enter 2022 with a shiny, unified front end and minimal one-off change requests on the horizon. If you are interested in joining Coinbase, check out the careers page here. Here’s a Happy New Year!

Coinbase’s scaling content was originally posted on the Coinbase blog on Medium, where people continue the conversation by highlighting and responding to this story.

Leave a Comment