Content Modeling for React Developers


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.



Hey everyone and thank you for joining in. In my lightning talk, my name is Harshal and I work at Contentful. Alright, so yeah, as I was saying, I am originally from India but I live in Berlin for 15 months. Still exploring Europe, still exploring, 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 it with the wider community. And I kind of love doing that and I build a lot of weird projects. You can check it out on my website or just hit me up on Twitter. Alright, 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 API request was 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, you have the technical expertise but not all your content creators or 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 and TeddyBullet 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, okay, I have a few of this 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 shares 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. And there's too many types going on in this talk, so I'm just going to try to avoid using that word. But this is how my ingredient content type looks like. And this is the overall content model. So the recipe has a reference to ingredients, ingredients has a reference to type, and recipe also has an ingredient to the assets, which basically contains the images. Now, one of the other features that I kept in mind when I was building this content model was reusability because as React developers, we build on components and we want to make sure that we use those components again and again. And we don't like to, you know, code those lines of code again and again. And that's what I did over here. I knew I was going to have ingredients for a lot of recipes which are going to be common. And that's what, and that's how I selected ingredients to be a separate content type. The next is content governance. Now, this is mainly important when you are working with your team and your team is going to be the one who is going to create the content, publish the content, and review the content. This is where you have to decide on what kind of workflow, what kind of content governance do you want. Do you need to give access, do you need to give published access to everyone and only a limited amount of people need to have that access. And the next is, and the next very important thing is platform because you need to decide which platform this content is going to be used. Is it just going to be web? Is it just going to be mobile? Is it going to be both? Or is it also going to be a voice enabled application? So that is also one of the key factors that you need to keep in mind. And remember, nobody gets content model right in one pass. I showed you the SCP content type that I created. It only had three fields earlier, but as and when I was creating and designing my wireframe, I realized I need to put in more and more fields over there to make more sense. So it's fine to have an incomplete content type at first, but get the feedback from your team. Try to think more about it and then create your content type. A few resources that I would like to share with you all, we have a learning center where we have trainings where you can learn more about contentful and content modeling. And we have a developer portal where you can get all the developer resources. So if you just want to get started, developer portal is the best place to go. And thank you all for joining in. And sorry for keeping you waiting. I know it's a break and most of you would like to have a coffee. I surely want to, but thank you all for joining in. Have a nice one.
7 min
23 Jun, 2022

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Workshops on related topic