Strapi content-type for simple portfolio and blog application

This is the second blog post on the series of a blogposts I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

In the last blog post we created bare-bones setup for strapi and nextjs with tailwindcss if you have not read the first blog post then go ahead https://dev.to/bishaln/strapinextjs-and-tailwind-setup-50nk
In this blog post, we're going to look at the strapi's content-type and build our content-type for our portfolio/blog application.

Content-type builder

It is a core plugin of strapi that allows us to manage the content-types and content-type defines the type of data that we want to use in our application. There are a few terms that we need to be aware of before going forward with this

• Collection type - It is a content-type that can manage entries of the same content-type
• Single type - It is also a content-type that can only manage single entry
• Components are a data structure that can be used in multiple collection types and single types.

We've some regular fields that we can use in our content-type most of them are obvious so I will not bother explaining them

• text-field
• rich-text
• number
• date
• boolean
• relation - used to establish relationships with another content-type
• email
• password
• enumeration
• media
• json
• uid

Now that we have a decent understanding of strapi's content-type let's create the content type that we will need for our app.
We'll have in total 4 content types as

• Homepage - This is a single type that will contain all the data for our portfolio landing page
• Writer - This is a collection type that will contain info about the writer of the blog posts
• Post - This is a collection type
• Playlist - This is a collection type that will contain posts related to the playlist

Let's create them inside the strapi admin for that Inside your strapi project run

yarn develop
or
npm run develop

Go to http://localhost:1337/admin and click the content-type builder in the plugins list

Homepage

First let's create the homepage single type click on create a single type link and give it a name Homepage
and Before adding any components or fields to our homepage single type I want you to visit the final app here https://myportfolioandblog.vercel.app/
If you see it carefully then it has 5 distinct sections

• hero
• about
• projects
• recent blogs
• contacts

we'll create 4 components named hero, about, projects, and contacts. We will not create a recent blogs component for now;
Inside the homepage single type click on add another field and select the component. Create a new component with the name Hero and a category with hero. Click on the configure selecting the single component.
Now let's add some fields to this component
title - text field
navlinks - text field
profile - media
After adding this field the homepage single type looks something like this

Now let's add another component About follow the similar process and add these fields to the About component

• work- text field select the long text radio
• blogs- same as work
• watch- same as work
• email- same as work

Add another component Project follow the similar process but this time select the repeatable type instead of a single type so that we can add multiple projects and add these fields to the Project component

• title - text field for short text
• description - text field for long text
• url - text field for short text
• image - media
• bg - media
• tools - text field for short text

Finally, let's add the Contact component follow the similar process this time make it a single type, and add these fields.

• email - text field for short text
• insta - same as email
• linkedin - same as email
• twitter - same as email
• youtube - same as email
• title - same as email

Make sure to save the homepage. After all that we can now add real data to the homepage single type.

Go ahead and add some dummy data to the homepage if you want to
Now we can focus on the other three collection types

Writer

Go to content type builder and select create a new collection type and name it writer
Add these fields to the writer content type and save it

• name - text field for short text
• avatar - media for avatar
• bio - text field for long text

Post

Once again let's create another content type with the following fields and save it

• title - text field for short text
• description - rich text
• topics - text field for short text
• slug - text field for short text make it unique to do that go to advanced tab and select unique
• writer - relation select writer content type and post has and belongs to one user

Playlist

Once again let's create another content type with the following fields and save it

• title - text field for short text
• description - text field for long text
• slug - text field for short text make it unique to do that go to advanced tab and select unique
• posts - relation select posts content type and playlist has many posts

we have to add some relation fields to posts and writers first let's add a playlist relation to posts
as post has one playlist save it.
Inside the writer, content-type add posts relation as a writer has many posts and save it

Now go ahead and some dummy data to all the content-types so that we can query them;
Before querying them we have to make all the content-types find and findone functions publicly available to do that goto
settings -> user permission roles -> public and check all the find and findones

So now, to test lets query for all the data that you will need for the landing page;
This query fetches all the data required for the landing page; cool isn't it?

query {
  homepage {
    Hero {
      title
      navlinks
      profile {url}
    }
    About {
      work
      blogs
      watch
      email
    }
    Project {
      title
      description
      tools
      image {url}
      url
      bg {url}
    }
    Contact {
      email
      insta
      linkedin
      twitter
      youtube
      title
    }
  }
}

So this is it for the content-type in strapi and we have added required content-types for our project. In the next blog post we will setup nextjs to make graphql requests and generate some type information from our queries. If you had any problem following along then let me know in the discussions