Original subtitles

I will now give you a quick overview of Strapi,

that, as mentioned, is the Headless

CMS we'll use for our example.

Now, you can just watch this video,

without following the same steps on your machine,

because in the next lecture I'll give

you a project you can download,

so what I'm showing you now is just to

give you an idea of how Strapi works.

We can initialize a new project with

the "create-strapi-app" command.

So I'll open a Terminal,

and I'm inside my Projects folder.

Here I'll run "create-strapi-app",

but let me change the project name to "my-cms".

We want a "Quickstart" installation,

and it will take some time to download

all the dependencies.

It will also start the Strapi

application automatically,

and this opens a web page where

we can create a user.

But we'll do that later.

Let me stop the server for now,

and show you what's inside this project first,

by opening it in Visual Studio Code.

You can see that it's a JavaScript project,

with a "package.json" file.

It has some Strapi dependencies,

and it uses SQLite as the database

for local testing.

We don't actually need to look at the code,

but it is all JavaScript.

Now, we can start the dev server,

by going inside the project folder first,

and typing "npm run develop".

This will start the Strapi server

in development mode.

And it's asking us again to create a user.

So I'll just enter some sample details.

I'll put "admin@example.com" as the email,

and "Admin123" as the password,

that are the same credentials we'll

use for the rest of our example.

Now, this is just a welcome tour,

that we can skip.

But this is what the Strapi dashboard looks like.

From here we can configure our "Content Types",

which means the type of objects

we want to save into the CMS.

There's an existing type called User,

with fields like "username", "email", and so on,

but we're not actually going

to use it in our example.

Instead, we want to create a new collection type,

and we can enter "Review" as the "Display name",

because this object represents a game review

that we'll display on our Next.js website.

There are some "Advanced Settings",

and by default it has "Draft & publish" enabled,

which means that when we create a new Review

it will initially be a "Draft",

and then we can publish it as a separate step.

This could be useful to preview each

article before publishing it.

Anyway, let's continue.

The next step is to define some

fields for our collection type.

For example we could add a "Text" field,

for the "title" of each Review.

We're basically defining which properties

are available for a Review object.

Again, there are some "Advanced Settings",

and here we can set this field as "required",

which sounds like a good idea for the "title".

Then we can go ahead and add another field,

this time we could select "Rich text",

that will provide a "rich text editor

with formatting options".

This is perfect for the "body" of our Review.

And, once again, we could

make it required as well.

Ok, let's finish here.

We only have two fields, but

that's enough as an example.

What we want to do now is "Save"

our new collection type,

and Strapi will restart, after adding

some code for our new Review type.

At this point we can go to

the "Content Manager" tab,

and here we'll see all our reviews.

Of course we don't have any yet,

but we can go and create a new entry from here.

Let's enter a title, like "Stardew Valley",

and a body, with some example text.

Now, as you can see this editor provides

some simple formatting options,

so we can select some text

click the Bold button,

and this adds the right Markdown syntax.

We can then preview the result

with this other button.

So the person that writes the review doesn't

need to know the full Markdown syntax.

Anyway, let's go and save this entry.

Now, at this point this Review is a Draft version,

so we could have another person

check the text for example.

And then we can publish it as a separate step.

If we go back to the list, we can

see our new review in the table.

Let's go and quickly create another entry,

this time for "Hollow Knight",

and I'll just write "Test" as the body.

Let's save, and publish straight away,

and if we go back, of course we

see two reviews in the list.

So, as administrators we can define

some collection types,

and specify which fields are

available for each type,

and Strapi will automatically

give us a user interface,

with a form with all the right field types,

so we or other staff members

can easily enter the data.

Not only that, but Strapi automatically

provides an API

that we can call from our frontend

application to fetch the data.

It's a REST API that we can use for

example to get all the entries.

Let's try opening this URL in the browser,

but our collection is called "reviews".

Now, at the moment we get a "Forbidden" error,

because we need to configure

some permissions first.

Under Settings we can configure the Roles,

under "Users & Permissions".

There's a predefined Role called "Public",

where we can specify which content

should be accessible to everybody.

Here we can select "Review",

and if we enable "find" and "findOne",

this means the public should be able to read the reviews,

but not modify them.

So, if we save these new permissions

and then go and request "/api/reviews" again,

you can see that this time we get some JSON data,

that contains two objects with

"title" and "body" properties,

along with some other fields

that are set automatically.

We'll look at the data format in more

detail later in this section,

but this is how we'll be able to fetch

the data in our Next.js application.

Our collaborators can manage all the review

data using the Strapi interface,

but we'll display it to the

public in our Next.js app,

with a fully customized user interface.

Now, I've only created two text fields here,

but there are other field types, like Media,

that we can use to upload images for example,

or "UID", that is a unique identifier,

and will be useful for the review "slug".

As mentioned, in the next video I'll give

you a preconfigured Strapi project

that already includes data for a number of reviews,

including images.