Content Modeling for React Developers

Rate this content
Bookmark

In today's world, it's no surprise that "Content is King". It helps in telling a story and helping you reach out to more people. Most of the time, developers aren't the ones managing this content. Hence, modeling content efficiently becomes crucial. Doing it well makes the content delivery process smooth for the team. But how does one go on with modeling content? What are the things that one should take care of? I'll answer such questions in this talk, and share my approach to content modeling as a React developer.

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

Haushal is a Developer Advocate at Contentful. Originally from India, he now resides in Berlin and has been working with Contentful recently, experimenting with various technologies and frameworks.

During the Black Friday sale, Contentful observed a massive increase in API requests. GraphQL requests increased by 550%, and the content delivery API (CDA) saw a 73% increase.

Content modeling is a method used to structure and organize code, making it easier for content creators and designers, who may not have technical expertise, to manage and create content efficiently.

Haushal has recently taken up cooking as a hobby and is integrating this interest into his work by developing a web app for a Cookbook, where he is applying his skills in content modeling.

Haushal's content model for the Cookbook app includes types such as recipes, which consist of a title, description, images, ingredients, and cooking instructions. Ingredients are treated as a separate content type to enhance reusability and are linked to recipes.

Content governance involves setting up rules and policies that dictate how content is created, managed, and published within an organization, ensuring consistency and quality control across all content.

Haushal considers multiple platforms for deploying content, including web, mobile, and potentially voice-enabled applications, to ensure a broad and effective distribution of content.

It's acceptable to start with an incomplete content type because it allows for iterative improvements based on feedback and deeper understanding, leading to a more refined and effective content model over time.

Harshil Agrawal
Harshil Agrawal
7 min
23 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Haushal, a Developer Advocate at Contentful, discusses content modeling and its importance in providing a great user experience. He uses his Cookbook web app as an example to explain how he structures and organizes content. The overall content model emphasizes reusability and considerations for content governance and platform selection. Content modeling is an iterative process, and Haushal provides resources for further learning and development.

1. Introduction and Background

Short description:

Hi everyone, I'm Haushal, a Developer Advocate at Contentful. I have been exploring Europe and experimenting with different technologies and frameworks. Check out my projects on my website or connect with me on Twitter.

Hi everyone and thank you for joining. In my lightning talk, my name is Haushal and I work at Contentful. As I was saying I am originally from India but I live in Berlin for 15 months. Still exploring Europe. Still exploring or still trying to be a more Berliner. And I work as a Developer Advocate at Contentful. I recently joined Contentful. And it has been an amazing experience because I get to experiment a lot with different technologies and framework. And share with the wider community and I kind of love doing that and I be a bit very build a lot of year projects so you can check it out on my website or just hit me up on Twitter.

2. Content Modeling and Cookbook Web App

Short description:

Today, I will discuss content modeling and its importance in providing a great user experience. I will use my Cookbook web app as an example to explain how I am structuring and organizing the content. Starting with wireframing, I identified the key elements for the recipe content type, including title, description, images, ingredients, and instructions. To ensure consistency, I created a separate content type for ingredients. Let's dive into the details.

All right so today I'm going to talk about content because in the past two years the amount of content that we have generated is massive. I mean everyone out there has created content in some form or another. In November last year during the Black Friday sale we saw a massive increase in the API request that we got at Contentful APIs. For example the GraphQL requests were increased by 550% while the content delivery API or CDA was increased by 73%. And so as a developer I believe it is on us to make sure that we provide that amazing experience not just to our users but to our team.

But how do we do that and what is content modeling. So basically a content model allows you to structure and organize your code. Now remember as you have the technical expertise but not all your content creators, all your designers would have that technical expertise. So we need to make sure that we provide that value and we provide that easy workflow for them to create content.

So that's quite enough of theory let's get into action and I want to talk today about Cookbook because I have taken cooking as a hobby recently and I'm trying to create a web app because I am a programmer and I believe I can do that. But anyways, so in the couple of next slides I'm going to talk about my approach of how I am modeling my content for this particular application. So I've taken the top-down approach so that I can break down the elements into smaller pieces into smaller chunks which would basically help me to reiterate my content model over and over again. So I started out with wireframing. I'm terrible at design. Don't judge me on the design but this is what I envision my web app to be. So a simple web app which shows a list of recipes and each of these cards basically have an image, a title and a description.

So this simple wireframework gave me an idea of what information I need in my content type. So in Contentful, this is what my content model looks like for the recipe content type. So now I have the title, I have the description and I have images. But we are missing two important things. If I open each or any of those recipes, it has a title, it has the images, it has the description but it needs to have those ingredients as well as the instructions on how to cook them. Otherwise no one knows how to cook their particular recipe and it's going to be just a mess. So with this page I kind of realized, OK, I have a few of these information but I need the ingredients as well as instructions. And that's what I went ahead and added in Contentful. So I added two other fields. One is ingredients and the other one is instructions. Now in ingredients, if you see it, it says its reference because ingredients are going to be shared among other recipes as well. Hence I created a separate content type for ingredients and I'm going to show you just that. So this is my ingredient content type and it has a name and a type. I know there's too many types going on in this talk so I'm just gonna try to avoid using that word.