It's that time of year again. Spring is on its way, flowers are starting to bloom, summer vacations are being planned, and in America, the NCAA men’s and women’s college basketball tournaments are upon us. "March Madness" is a rollercoaster of emotions, wild upsets, Cinderella stories, heartache, and buzzer-beating shots — all culminating in a national championship for one team. 

If you’re anything like me, you fill out a tournament bracket or two in hopes of gaining some bragging rights that you correctly picked the biggest upset of the tournament. 

But I also belong to a group of people that like to take this speculation to the next level by creating a fantasy experience around the tournament. We draft players from all the tournament teams with the goal of creating an all-star team that scores the most cumulative points

And every year, when March rolls around, one person in this group knows it’s their responsibility to create and maintain the rudimentary spreadsheet that tracks each player's point totals throughout the tournament. Let me tell you, it's a really tedious job to keep the spreadsheet up to date. 

To put it into perspective, during March and April there are 67 basketball games, 68 teams and 1,050+ players. This year it’s my turn to manage the laborious spreadsheet, so I decided to build something better, something more automated.

Using a React app to represent a scoreboard

After discovering an API that provides the players’ point totals, it was easy enough to create an app with React -- a JavaScript library for building user interfaces -- to represent a scoreboard that reflected each all-star team’s point total. By utilizing a React CMS, I needed a way for participants to draft their all-star team allowing the scoreboard to reflect this information accordingly. 

The draft had basic requirements: participants take turns selecting a single player at a time, a player can only be selected once and only one person can run the draft process for all participants. 

This is when I discovered what might be the largest challenge for myself. Since I would be running the draft, I needed to associate a participant with the player IDs from the API as players were selected. Not a stellar experience for me as I would constantly be looking up player IDs and entering them into Contentful. This left room for a lot of potential errors and created a lot of clicks for me as I moved from participant to participant.

Creating a custom experience with the Contentful App Framework

Enter the Contentful App Framework! I could quickly create a user-friendly UI and custom experience that made this much simpler to manage. 

The App Framework allows me to tailor the editing experience in various places: fields, entry sidebar, entry editor, dialogs, pages and even the app configuration screen. 

I chose the page location so I could display all of the players still eligible for selection, show which participant was currently selecting, and use an easy drag-and-drop widget for me to make selections. All while in the background, the app page is writing this information to Contentful. 

And by building this app within Contentful, I had the added benefit of limiting who had access to run the draft based on whether they were a user of my Contentful space. 

The creation of the drafting app made managing all the content much simpler, and I’m happy to say that I will not be tracking all this data in a spreadsheet ever again. Here is a look at what the draft process inside of Contentful looks like.

Is a custom app the right fit for your project?

Our Contentful Marketplace has a lot of popular third-party integrations ready for you to install, but you may find that you need something more custom to fit your requirements. Determining that a custom app in Contentful was the route for me was a fairly straightforward one. 

Not every digital project needs a custom app to achieve its goals, and though my use case is a small one, I started to see what factors went into my decision to create a custom app and help me ensure the app would be beneficial and worth the time investment. I had to assess the who, what, where, when and why a custom app would be effective for my project before I could start on the how. 

When considering a custom app, you will need to weigh development time and cost against the ROI the end product will generate for your business. As you embark on this journey to discover if a custom app is a good fit for your digital project, here are some considerations to factor in.

Who will be using the custom app?

Editors are essential to producing high-quality digital content. We need to provide them the best tools to excel at their craft. Contentful was built with flexibility in mind, but each use case is different. 

This is where a custom app can take things up a notch. Each digital content team is distinct and has a unique set of requirements and skills — custom apps can take this all into account.

Developers often need ways to ensure the content they receive from the Contentful API is consistent. One simple way to do that is to confirm that data being input meets those requirements through validation. 

Custom apps can add validation beyond simply requiring a field. Inputs can be tested against custom business logic, or even affirmed by another service, giving developers the peace of mind that the content matches expectations.

What will the custom app be used for?

With an ever-growing list of microservices, integrations to those third-party services need ways to be combined with rich content. 

Many of these services already provide full-fledged widgets and APIs that can be used in custom apps to make a seamless editing experience, bringing all of your content together. 

It may also mean that content editors never have to login to these tools; they can perform all of their necessary functions in the Contentful web app. 

Taking this a step further, necessary business processes can be performed by a custom app. 

Publishing a piece of content that meets particular criteria may need to trigger an assortment of activities — indexing content for search, sending email and SMS messages, starting a build process, and many more. 

Custom apps can encompass all of these actions in a simple button for editors to use. 

When should you create a custom app?

At the beginning of a digital project, you might know that a custom app is required to provide the best editing and development experience for the team. 

This is an opportune time to create a custom app while everything is still taking shape. Editors and developers should work together to provide the best tool for both parties as the project matures.

Mature projects can benefit from this collaboration too. Reviewing team pain points and inefficiencies can be an opportunity to employ a custom app. 

Repetitive tasks and areas where bad data is frequently input often lend themselves to further discussions on improving the overall team’s experience. Editors and developers can look to the app framework to quickly build scalable solutions.

Where will the custom app be used?

Contentful offers a multitude of places in the Web App to deploy custom apps, such as in fields, the sidebar or the whole page. This allows an app to add functionality for the team exactly where it's needed. The same logic may even be needed in multiple locations and can be reused. 

Augmented entry fields can allow for additional logic or even offer a custom editing experience to make editor tasks easier. Use custom sidebar apps to show relevant information to editors like article read time or pertinent analytic data. Sidebar apps are also an opportune place for third-party actions to be triggered. Maybe providing a whole dashboard of information for editors is helpful — the page location can be great for that.

And to help with the speed of app creation and the consistency of the editing experience, the Contentful Design System Forma 36 provides easy-to-use React components, allowing you to focus time and energy on the logic of your app.

Why should you use a custom app?

As an API-first platform that integrates all your technologies in a unified content hub, you can create a consolidated editorial experience for your editors. 

Give them all the tools they need in one place to produce first-class content while adding efficiencies and confidence in the way content is managed. 

Meanwhile, boosting developers' confidence in the type of content their code needs to account for and can accelerate deployments. Ultimately, allowing you to deliver your digital messages faster. 

How do you get started with a custom app?

A good place to start with custom apps is the Contentful Learning Center where you’ll find courses that walk you through creating a basic app, followed by the Contentful App Framework documentation. 

You’ll even find that Contentful has a create-contentful-app CLI tool to help you get started with ready-to-use boilerplate code.

Once you're ready to move on to more advanced topics, this GitHub repo can be a great place to take a peek at some working app code. 

My personal favorite from the Contentful Marketplace is the open-source Repeater app, which is supported by a helpful video that walks you through its development.

Wrapping up

The Contentful App Framework will empower your team to cut through content silos, integrate seamlessly with business-critical tools and extend key functionality to fit your project's needs. The possibilities of what you can do with the App Framework are endless. Whatever your path, think of it like drafting your own dream team!

The Contentful Professional Services team provides an App Framework offering as part of a suite of training and consultation products. If you would like some help, don't hesitate to drop us a line.

Subscribe for updates

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