1
00:00:02,090 --> 00:00:04,420
So let's now start building

2
00:00:04,420 --> 00:00:06,340
this project together.

3
00:00:06,340 --> 00:00:09,770
And for this, of course, the first question is,

4
00:00:09,770 --> 00:00:11,960
where exactly do we start?

5
00:00:11,960 --> 00:00:16,520
Because there are many areas or aspects we could start with.

6
00:00:16,520 --> 00:00:19,720
We could start by building all our data models.

7
00:00:19,720 --> 00:00:23,870
We could start by writing all the CSS code first.

8
00:00:23,870 --> 00:00:28,360
But I instead would rather go feature by feature

9
00:00:28,360 --> 00:00:31,700
and maybe start with the authentication part

10
00:00:31,700 --> 00:00:35,320
and then there first work on all the views

11
00:00:35,320 --> 00:00:37,550
that belong to the authentication,

12
00:00:37,550 --> 00:00:39,170
work on the controllers

13
00:00:39,170 --> 00:00:42,170
and any data models we might need for this,

14
00:00:42,170 --> 00:00:43,990
add all the CSS code,

15
00:00:43,990 --> 00:00:46,980
and with that I mean that we write it together.

16
00:00:46,980 --> 00:00:48,740
And then once that is done,

17
00:00:48,740 --> 00:00:51,670
once all the authentication parts are done

18
00:00:51,670 --> 00:00:53,680
and this feature works,

19
00:00:53,680 --> 00:00:56,240
we can move on to the next feature in line,

20
00:00:56,240 --> 00:01:00,180
which then could be the admin area so that as a next step,

21
00:01:00,180 --> 00:01:02,880
we can, for example, work on adding products

22
00:01:02,880 --> 00:01:05,480
so that we get some products to work with.

23
00:01:05,480 --> 00:01:07,620
This is one approach we could take,

24
00:01:07,620 --> 00:01:10,193
and it is the approach I wanna take here.

25
00:01:11,080 --> 00:01:14,270
Therefore, if we have a look at all these pages,

26
00:01:14,270 --> 00:01:16,840
all these views we defined before,

27
00:01:16,840 --> 00:01:20,540
and we then also have a look at all these data entities,

28
00:01:20,540 --> 00:01:23,200
the models we need, it should be clear

29
00:01:23,200 --> 00:01:26,420
that if you wanna start with authentication,

30
00:01:26,420 --> 00:01:30,070
we definitely need the user data model

31
00:01:30,070 --> 00:01:33,350
and we need the signup and login pages,

32
00:01:33,350 --> 00:01:36,510
the views for signing up and logging in.

33
00:01:36,510 --> 00:01:39,540
And I wanna start with authentication

34
00:01:39,540 --> 00:01:42,860
because that's the key to having an admin area

35
00:01:42,860 --> 00:01:46,270
which in turn then is the key to having products,

36
00:01:46,270 --> 00:01:48,120
which we can buy and so on.

37
00:01:48,120 --> 00:01:50,630
So we need authentication to work

38
00:01:50,630 --> 00:01:52,323
on the rest of this project.

39
00:01:53,180 --> 00:01:55,080
Now, before we start working

40
00:01:55,080 --> 00:01:58,080
on any authentication logic though,

41
00:01:58,080 --> 00:02:03,020
we need a basic Node Express website setup

42
00:02:03,020 --> 00:02:05,150
because we're going to use Node.js

43
00:02:05,150 --> 00:02:07,070
and Express for the backend

44
00:02:07,070 --> 00:02:09,900
and we're going to add all our frontend code,

45
00:02:09,900 --> 00:02:14,390
the views, the CSS code, and the frontend JavaScript code

46
00:02:14,390 --> 00:02:16,613
inside of the project as we learned it

47
00:02:16,613 --> 00:02:18,690
throughout this course.

48
00:02:18,690 --> 00:02:23,410
And therefore, I created a brand new basically empty folder,

49
00:02:23,410 --> 00:02:25,360
just got a gitignore file in there

50
00:02:25,360 --> 00:02:28,490
to help me with tracking my progress

51
00:02:28,490 --> 00:02:31,180
and with creating these code snapshots

52
00:02:31,180 --> 00:02:33,640
and ignoring some files and folders

53
00:02:33,640 --> 00:02:36,620
that should not be part of those snapshots,

54
00:02:36,620 --> 00:02:39,650
but you can start with an entirely empty folder.

55
00:02:39,650 --> 00:02:41,140
You don't need gitignore.

56
00:02:41,140 --> 00:02:45,720
And in there, I'll first of all open this built-in terminal

57
00:02:45,720 --> 00:02:49,150
or command prompt, so that as a first step,

58
00:02:49,150 --> 00:02:53,360
I can initialize this as a Node Express project.

59
00:02:53,360 --> 00:02:56,250
And it's been a while since we last did this,

60
00:02:56,250 --> 00:02:58,310
but you might remember that you do this

61
00:02:58,310 --> 00:03:00,560
with help of the npm command,

62
00:03:00,560 --> 00:03:03,830
which is available once you install Node.js,

63
00:03:03,830 --> 00:03:07,090
which is a prerequisite for this course section,

64
00:03:07,090 --> 00:03:09,080
and then you run init

65
00:03:09,080 --> 00:03:12,070
and then you can actually add dash y here

66
00:03:12,070 --> 00:03:15,140
so that all these default questions

67
00:03:15,140 --> 00:03:19,140
are actually automatically answered with yes.

68
00:03:19,140 --> 00:03:21,330
And therefore, that's the command I'll run

69
00:03:21,330 --> 00:03:23,440
in this empty folder.

70
00:03:23,440 --> 00:03:27,490
And this did give me a package.json file,

71
00:03:27,490 --> 00:03:29,220
which looks something like this.

72
00:03:29,220 --> 00:03:31,980
It might not look exactly the same for you.

73
00:03:31,980 --> 00:03:34,320
You might have some extra fields in there,

74
00:03:34,320 --> 00:03:37,610
but it should basically look something like this.

75
00:03:37,610 --> 00:03:40,300
Of course, you can also add some information in here,

76
00:03:40,300 --> 00:03:42,080
like, for example, your name,

77
00:03:42,080 --> 00:03:44,000
but this is totally optional

78
00:03:44,000 --> 00:03:46,570
and I'll leave it like this for the moment.

79
00:03:46,570 --> 00:03:49,360
Or at least, I'm not going to edit it directly.

80
00:03:49,360 --> 00:03:51,800
Because I am actually going to edit it,

81
00:03:51,800 --> 00:03:54,110
but with help of more commands.

82
00:03:54,110 --> 00:03:57,080
And for this, I'll open the terminal again.

83
00:03:57,080 --> 00:04:00,840
Because I do actually wanna run more commands here

84
00:04:00,840 --> 00:04:03,610
because I do want to install some packages

85
00:04:03,610 --> 00:04:05,810
which we'll use in this project.

86
00:04:05,810 --> 00:04:08,740
There are a bunch of third-party packages

87
00:04:08,740 --> 00:04:11,540
which we will use throughout this project,

88
00:04:11,540 --> 00:04:15,240
but the first one which I wanna install with npm install,

89
00:04:15,240 --> 00:04:18,600
which is the command for adding new Node dependencies

90
00:04:18,600 --> 00:04:22,340
into such a Node project, is Express.

91
00:04:22,340 --> 00:04:26,940
That it is extra package that helps us with managing routes,

92
00:04:26,940 --> 00:04:31,500
managing middleware, parsing request bodies and so on.

93
00:04:31,500 --> 00:04:34,000
We've been using it throughout the entire course

94
00:04:34,000 --> 00:04:36,210
up to this point and it's a key package

95
00:04:36,210 --> 00:04:39,233
for most Node-driven websites you are building.

96
00:04:40,690 --> 00:04:42,310
Now, we're going to add more packages.

97
00:04:42,310 --> 00:04:43,640
As I said, for the moment,

98
00:04:43,640 --> 00:04:45,963
that's the first package I wanna install.

99
00:04:47,380 --> 00:04:50,250
The only other package I wanna install right now

100
00:04:50,250 --> 00:04:52,750
in addition will actually be installed

101
00:04:52,750 --> 00:04:54,940
with the save-dev flag,

102
00:04:54,940 --> 00:04:58,620
so npm install --save-dev

103
00:04:58,620 --> 00:05:00,280
because that's nodemon,

104
00:05:00,280 --> 00:05:01,420
which is this package

105
00:05:01,420 --> 00:05:04,150
which is only required during development,

106
00:05:04,150 --> 00:05:06,490
hence the save-dev flag,

107
00:05:06,490 --> 00:05:09,070
which actually will watch our code

108
00:05:09,070 --> 00:05:11,810
and restart the Node server for us

109
00:05:11,810 --> 00:05:14,440
whenever the code changes.

110
00:05:14,440 --> 00:05:17,120
Without that package, as you might remember,

111
00:05:17,120 --> 00:05:20,230
you have to manually quit and restart the server

112
00:05:20,230 --> 00:05:23,030
whenever you change something and that's a bit annoying,

113
00:05:23,030 --> 00:05:25,563
so I'm going to install this package for this.

114
00:05:26,720 --> 00:05:30,730
Now in package.json, we have these dependencies in there

115
00:05:30,730 --> 00:05:33,490
and now we can also add a start script

116
00:05:33,490 --> 00:05:35,350
in this scripts area.

117
00:05:35,350 --> 00:05:37,870
Instead of this test script actually,

118
00:05:37,870 --> 00:05:41,920
I'll add a script called start between those double quotes.

119
00:05:41,920 --> 00:05:44,360
And then on the right side between double quotes,

120
00:05:44,360 --> 00:05:47,270
we define the command that should be executed

121
00:05:47,270 --> 00:05:51,570
and here that will be nodemon blank app.js.

122
00:05:51,570 --> 00:05:53,910
So that nodemon will start the server

123
00:05:53,910 --> 00:05:56,410
by starting the app.js file.

124
00:05:56,410 --> 00:05:59,763
That file doesn't exist yet, but we'll soon create it.

125
00:06:01,010 --> 00:06:03,780
Now that's it for the package.json file for now.

126
00:06:03,780 --> 00:06:06,600
Now I do want to add a new file here

127
00:06:06,600 --> 00:06:09,653
and I will add a new app.js file.

128
00:06:12,340 --> 00:06:14,210
Now in this app.js file,

129
00:06:14,210 --> 00:06:17,370
we are going to spin up our basic web server,

130
00:06:17,370 --> 00:06:21,760
and we're going to add a lot of functionality to this file.

131
00:06:21,760 --> 00:06:25,250
For the moment in there, I'll just start by requiring,

132
00:06:25,250 --> 00:06:28,490
so by importing this Express package,

133
00:06:28,490 --> 00:06:30,560
and here I'm really just doing again

134
00:06:30,560 --> 00:06:32,860
what we did over and over again

135
00:06:32,860 --> 00:06:35,353
throughout the previous course sections.

136
00:06:36,750 --> 00:06:39,010
And then once this is required,

137
00:06:39,010 --> 00:06:41,270
we can derive such an app object

138
00:06:41,270 --> 00:06:44,290
by executing Express as a function.

139
00:06:44,290 --> 00:06:45,770
And on this app object,

140
00:06:45,770 --> 00:06:48,760
we can start listening on a certain port.

141
00:06:48,760 --> 00:06:52,440
And here, I'll use port 3000 which is the port I've used

142
00:06:52,440 --> 00:06:54,913
all throughout this course thus far.

143
00:06:56,580 --> 00:06:59,050
Now, this will spin up a very basic web server

144
00:06:59,050 --> 00:07:00,980
that doesn't do anything,

145
00:07:00,980 --> 00:07:03,820
but it is a basis with which we kind of work.

146
00:07:03,820 --> 00:07:05,100
Now as a next step,

147
00:07:05,100 --> 00:07:08,350
we of course wanna start registering some routes

148
00:07:08,350 --> 00:07:11,030
and some views before we then at some point

149
00:07:11,030 --> 00:07:14,410
also add a database, a user data model,

150
00:07:14,410 --> 00:07:17,450
and then all the logic for adding authentication

151
00:07:17,450 --> 00:07:19,523
so for signup and login.