1
00:00:03,000 --> 00:00:05,888
Now that we've had a quick look at Strapi,

2
00:00:05,888 --> 00:00:09,443
I'll show you how to set up the preconfigured Strapi

3
00:00:09,443 --> 00:00:12,382
project that we'll use for our application.

4
00:00:12,451 --> 00:00:16,043
Under this lecture's Resources you'll find

5
00:00:16,043 --> 00:00:19,207
a file called "next-reviews-cms.zip".

6
00:00:19,293 --> 00:00:22,124
Please download this to your machine.

7
00:00:22,124 --> 00:00:24,569
I'll save it in the same folder that

8
00:00:24,569 --> 00:00:27,013
contains the "next-reviews" project,

9
00:00:27,081 --> 00:00:29,957
and then unzip it in the file manager.

10
00:00:29,957 --> 00:00:32,331
Note that I didn't put it inside

11
00:00:32,331 --> 00:00:34,335
the "next-reviews" project.

12
00:00:34,409 --> 00:00:36,190
It's a separate application.

13
00:00:36,190 --> 00:00:39,836
This folder contains all the code and the data.

14
00:00:39,836 --> 00:00:41,838
The first thing we need to do

15
00:00:41,838 --> 00:00:43,770
is install the dependencies.

16
00:00:43,839 --> 00:00:46,652
And I'll do that in a standalone Terminal,

17
00:00:46,652 --> 00:00:49,648
because we don't need to modify any code,

18
00:00:49,648 --> 00:00:52,017
but you can open the project in Visual

19
00:00:52,017 --> 00:00:53,637
Studio Code if you prefer.

20
00:00:53,700 --> 00:00:57,166
Let's go into the "next-reviews-cms" folder,

21
00:00:57,978 --> 00:01:00,394
and run "npm install" here.

22
00:01:01,420 --> 00:01:03,339
This will take a minute or so.

23
00:01:04,232 --> 00:01:07,756
Once it's done we want to build the application,

24
00:01:07,756 --> 00:01:09,298
with "npm run build".

25
00:01:09,372 --> 00:01:13,105
Since the collection types are preconfigured there's

26
00:01:13,105 --> 00:01:15,761
no need to run the "develop" command.

27
00:01:15,833 --> 00:01:18,329
We can launch "npm start" instead,

28
00:01:18,329 --> 00:01:20,384
that should be a bit faster,

29
00:01:20,458 --> 00:01:23,151
and this will start the Strapi server.

30
00:01:23,151 --> 00:01:27,084
It runs on port 1337 by default.

31
00:01:27,084 --> 00:01:30,958
The URL it printed here is actually misleading,

32
00:01:30,958 --> 00:01:34,960
because it's showing "::" as the host name,

33
00:01:34,960 --> 00:01:38,993
but "::" is actually a special IPv6 address

34
00:01:38,993 --> 00:01:41,381
that means the server is listening

35
00:01:41,381 --> 00:01:43,347
on all available interfaces.

36
00:01:43,417 --> 00:01:46,684
It's like "0.0.0.0" in IPv4, if you

37
00:01:46,684 --> 00:01:49,950
know a little bit about networking.

38
00:01:50,043 --> 00:01:51,975
Anyway, the point is that, when

39
00:01:51,975 --> 00:01:53,470
connecting to the server

40
00:01:53,532 --> 00:01:57,899
we need to use "localhost" in the URL, not "::".

41
00:01:57,899 --> 00:02:02,831
The port is 1337, and we want the admin page.

42
00:02:02,831 --> 00:02:05,257
Now, here we need to log in, and

43
00:02:05,257 --> 00:02:07,379
there's a preconfigured user

44
00:02:07,455 --> 00:02:11,084
with email: "admin@example.com"

45
00:02:11,084 --> 00:02:15,937
and the password is "Admin123", with a capital A.

46
00:02:15,937 --> 00:02:18,036
We can also tick "Remember me"

47
00:02:18,036 --> 00:02:21,130
so we won't have to log in again every time.

48
00:02:21,214 --> 00:02:23,309
And this is the Strapi dashboard, as

49
00:02:23,309 --> 00:02:25,229
we've seen in the previous video.

50
00:02:25,287 --> 00:02:28,282
If we look in "Content-Type Builder", there's

51
00:02:28,282 --> 00:02:30,611
already a "Review" collection type,

52
00:02:30,677 --> 00:02:33,770
with all the fields we'll need for our website:

53
00:02:33,770 --> 00:02:36,595
"slug", "title", "image", "body",

54
00:02:36,595 --> 00:02:39,312
and then I've also added a "subtitle".

55
00:02:39,312 --> 00:02:42,254
If we go to the "Content Manager" section,

56
00:02:42,254 --> 00:02:44,910
here there are already a number of entries.

57
00:02:44,961 --> 00:02:48,246
In fact, there are 25 reviews in total,

58
00:02:48,246 --> 00:02:50,929
so we have enough items to implement

59
00:02:50,929 --> 00:02:52,345
pagination as well.

60
00:02:52,420 --> 00:02:54,603
Each review includes an image,

61
00:02:54,603 --> 00:02:58,098
that I got from the RAWG Video Game Database,

62
00:02:58,098 --> 00:03:00,327
and also a long review body,

63
00:03:00,327 --> 00:03:03,313
that I generated using ChatGPT,

64
00:03:03,313 --> 00:03:05,340
so we have a realistic amount

65
00:03:05,340 --> 00:03:07,297
of text to show on the page.

66
00:03:07,366 --> 00:03:10,133
Of course, each review has its own image,

67
00:03:10,133 --> 00:03:13,648
as well as a different AI-generated text.

68
00:03:13,648 --> 00:03:15,690
You can have some fun reading the

69
00:03:15,690 --> 00:03:17,300
review bodies if you like,

70
00:03:17,362 --> 00:03:19,650
and see if ChatGPT did a good

71
00:03:19,650 --> 00:03:21,860
job of writing the articles.

72
00:03:21,939 --> 00:03:24,482
Anyway, as we've seen in the previous video

73
00:03:24,482 --> 00:03:26,934
Strapi automatically exposes

74
00:03:26,934 --> 00:03:28,948
this content as an API.

75
00:03:29,036 --> 00:03:33,611
So if we go and open "localhost" on port 1337

76
00:03:33,611 --> 00:03:36,174
at the "/api/reviews" path,

77
00:03:36,451 --> 00:03:38,922
we get in response a pretty large

78
00:03:38,922 --> 00:03:41,168
JSON object with all the data.

79
00:03:41,243 --> 00:03:44,195
Now, I have a Chrome extension installed

80
00:03:44,195 --> 00:03:46,336
that formats the JSON nicely.

81
00:03:46,410 --> 00:03:50,161
If you try this without that extension you'll probably

82
00:03:50,161 --> 00:03:52,800
see a huge string with no indentation,

83
00:03:52,870 --> 00:03:54,309
but it doesn't really matter.

84
00:03:54,309 --> 00:03:56,194
We'll look at this data in more

85
00:03:56,194 --> 00:03:57,714
detail in the next video,

86
00:03:57,774 --> 00:03:59,996
when we'll start writing some

87
00:03:59,996 --> 00:04:01,604
code to call the API.

88
00:04:01,681 --> 00:04:04,376
But this is our CMS set up and ready

89
00:04:04,376 --> 00:04:06,619
with plenty of data available to

90
00:04:06,619 --> 00:04:08,792
use in our Next.js application.