1
00:00:00,910 --> 00:00:04,840
Hello and welcome to the first preview of this project that is getting started with the project.

2
00:00:05,320 --> 00:00:12,040
So whenever so first thing that you have to do whenever you are creating a modern application is to

3
00:00:12,040 --> 00:00:15,970
create the HDR and the stylised folders are shown already.

4
00:00:16,870 --> 00:00:22,180
So this is the so our main area of concern is writing the Abdi's code.

5
00:00:22,570 --> 00:00:28,480
OK, so you're writing the post trick was to get requests by API, the middleware part using the database,

6
00:00:28,480 --> 00:00:32,530
setting up the database, setting up the strategies for Google authentication.

7
00:00:32,530 --> 00:00:34,630
Facebook authentication be the main goal.

8
00:00:35,200 --> 00:00:43,480
So creating a lab Daniel pages with the Demi Jones plan, anchor tags and then styles, etc. This is

9
00:00:43,480 --> 00:00:47,880
not our area of concern so that I've already been provided with view.

10
00:00:47,900 --> 00:00:50,560
You can see that in the courses that is provided to you.

11
00:00:51,460 --> 00:00:53,740
So now using this can get started.

12
00:00:54,100 --> 00:00:59,530
So first thing you have to do is download all the folders that you are having and then the next thing

13
00:00:59,890 --> 00:01:02,070
you have to do is open the terminal.

14
00:01:04,190 --> 00:01:05,030
And you can see it.

15
00:01:06,130 --> 00:01:10,900
Open the terminal and go to the director that you are presented.

16
00:01:11,320 --> 00:01:11,680
OK.

17
00:01:12,040 --> 00:01:12,820
That is react.

18
00:01:13,090 --> 00:01:17,170
I have my social app directory inside my React Project Directorate.

19
00:01:17,710 --> 00:01:19,060
So go inside the social app.

20
00:01:19,060 --> 00:01:22,210
You can have it any name, and the first thing you ever do is and be a minute.

21
00:01:22,750 --> 00:01:28,630
That means you're initializing the note package manager so that you can install all the dependencies

22
00:01:28,630 --> 00:01:31,690
that you want, the modules that you want in your project.

23
00:01:32,030 --> 00:01:38,890
Well, such as a Body Pass, Express, Jazz Aegis and all that stuff.

24
00:01:39,700 --> 00:01:43,330
So once you click on and be a minute, it will ask for a box.

25
00:01:43,330 --> 00:01:47,410
You'll be the package name, restaurant description or keywords or the letters click on.

26
00:01:47,650 --> 00:01:49,860
Keep on clicking Enter until it finishes.

27
00:01:50,410 --> 00:01:53,230
If not for this message until you have to click on Enter.

28
00:01:55,050 --> 00:02:01,980
And then if you don't want to click into these many times, then you can use this command and beam space

29
00:02:02,130 --> 00:02:11,040
in it space minus light so minus five flag by default gives you all the questions that they initialize

30
00:02:11,040 --> 00:02:11,460
at us.

31
00:02:11,970 --> 00:02:13,290
So this is a chart.

32
00:02:14,830 --> 00:02:20,800
OK, and the next one that you have to do is to install the required packages from NPR, so you have

33
00:02:20,800 --> 00:02:22,830
initialized the second one is installed.

34
00:02:23,680 --> 00:02:28,420
So I haven't started to express 40 percent and also haven't started.

35
00:02:29,320 --> 00:02:30,300
As you can see.

36
00:02:34,240 --> 00:02:35,650
And all 10 straight idiots.

37
00:02:36,040 --> 00:02:40,510
So you have to basically install an express body passer and aegis.

38
00:02:42,040 --> 00:02:43,000
So offer that.

39
00:02:44,410 --> 00:02:46,720
After required of them inside Europe, gorgeous.

40
00:02:47,720 --> 00:02:48,080
OK.

41
00:02:48,530 --> 00:02:50,930
So create a file column, dodges and required.

42
00:02:51,590 --> 00:02:52,520
So as you can see.

43
00:02:54,620 --> 00:02:54,840
Yeah.

44
00:02:55,670 --> 00:02:56,360
Express.

45
00:02:58,300 --> 00:03:02,100
Body parts that required body parts to have required expression, body posture.

46
00:03:02,530 --> 00:03:09,070
I have made my app as an express app and then I have used the static public for all the static pressure

47
00:03:09,070 --> 00:03:09,430
present.

48
00:03:09,820 --> 00:03:11,560
So now you have to go to the public folder.

49
00:03:12,610 --> 00:03:17,620
There you will see the styles, all styles and images related to the page were presented inside the

50
00:03:17,620 --> 00:03:23,110
public forum and then the Indian will be set to Aegis agents embedded JavaScript.

51
00:03:23,440 --> 00:03:26,440
If you want to know more about it, you can go through the documentation.

52
00:03:27,850 --> 00:03:30,520
And then we are using the body parts that you are alleged called Extra.

53
00:03:31,360 --> 00:03:34,720
So what is body parts that we'll see that in the coming weeks?

54
00:03:34,750 --> 00:03:38,800
This is a very important topic while you are working to petroleum and farms and everything.

55
00:03:39,760 --> 00:03:43,660
So here inside of you, so as you said, the view engine to Egypt.

56
00:03:44,050 --> 00:03:48,000
So by default, this will search for a folder with the name views.

57
00:03:48,520 --> 00:03:54,280
OK, so this is the full reviews and it will go into it, and it looks like these are all the folders

58
00:03:54,280 --> 00:03:55,630
that it will set up.

59
00:03:55,870 --> 00:04:00,130
But the project so that we can use whenever required, for example, we are rendering and logging directly

60
00:04:00,370 --> 00:04:07,270
without mentioning any part because this response will automatically search inside this views folder,

61
00:04:07,270 --> 00:04:10,180
so no need to specify the whole directory part.

62
00:04:10,540 --> 00:04:15,880
Once we have done this court, then it will by default considered as the default electropop.

63
00:04:16,940 --> 00:04:20,090
So here now and showing what could we have written here?

64
00:04:20,450 --> 00:04:26,830
The first thing is hair that had that well contained in the title body and everything this could tell

65
00:04:26,840 --> 00:04:32,300
basically the, you know, the default that the boiler picks, in fact, that if you want, you can

66
00:04:32,300 --> 00:04:36,260
copy other roles, you can remove them, not at all of a problem.

67
00:04:37,130 --> 00:04:41,120
This will be the hair done and the photo will be simply closing the body and extremely tight.

68
00:04:41,690 --> 00:04:43,550
So will be, for example, open home.

69
00:04:43,960 --> 00:04:47,180
Yes, you will be including the patient's hair that perchance for them.

70
00:04:47,450 --> 00:04:49,730
Similarly, the pages will be importing that.

71
00:04:50,870 --> 00:04:52,820
And then right, the remaining God between them.

72
00:04:53,270 --> 00:04:57,350
So here, home page, you will have some text and then two buttons.

73
00:04:57,770 --> 00:04:59,570
Two buttons, meaning register and logging.

74
00:05:00,110 --> 00:05:06,330
So what they will do once click on once we click on those, they will redirect you to slash register.

75
00:05:07,610 --> 00:05:10,280
OK, hatchet of sequester slash register.

76
00:05:10,700 --> 00:05:12,230
So slash and you start out.

77
00:05:12,230 --> 00:05:19,580
Condense these things like will have a body method for these lava form for email password.

78
00:05:19,910 --> 00:05:24,740
So this is where body parts of is used to get the data, what the user is entering in boogeymen and

79
00:05:24,740 --> 00:05:26,930
password so can check the code over.

80
00:05:26,990 --> 00:05:29,660
This is basically a simple HD ambulances that trigger an order.

81
00:05:29,660 --> 00:05:35,810
Writing the code from scratch will see the main things like what is happening inside the adaptogens

82
00:05:35,810 --> 00:05:38,980
and that's why I'm giving up this pitch.

83
00:05:38,990 --> 00:05:39,640
General codes.

84
00:05:40,250 --> 00:05:47,150
The average for each component domain see how the code works and all the upcoming videos.

85
00:05:47,870 --> 00:05:51,140
So password email register and then some buttons like such.

86
00:05:51,320 --> 00:05:52,440
Sign up with Google.

87
00:05:52,460 --> 00:05:53,450
Sign up with Facebook.

88
00:05:54,410 --> 00:05:55,790
So here, sign up with Google.

89
00:05:55,850 --> 00:05:58,260
I had an icon before that fab effect.

90
00:05:58,910 --> 00:06:00,620
So where does this icon comes from?

91
00:06:00,860 --> 00:06:02,120
This comes from bootstrap.

92
00:06:02,480 --> 00:06:07,130
So here is the Good Shepherd have downloaded the bootstrap modules, so if you want, you can download

93
00:06:07,130 --> 00:06:08,870
or you can use the bootstrap client.

94
00:06:09,380 --> 00:06:16,310
So if you go to more than 30 years, you can see here we are using the CSR.

95
00:06:17,840 --> 00:06:19,310
Cases will challenge downward.

96
00:06:19,610 --> 00:06:25,340
But yet, instead of this, it should have you use the CBN so you can go to the will will go to whichever

97
00:06:25,340 --> 00:06:27,590
documentation copy page the client already.

98
00:06:28,370 --> 00:06:29,450
So that's not a problem.

99
00:06:31,750 --> 00:06:37,360
So, yeah, so we have discussed your home registered in the log, any similar desktop, a change yet

100
00:06:37,360 --> 00:06:38,110
it should be logging.

101
00:06:39,130 --> 00:06:47,080
And then secrets inside the secrets you have no submeter are not just secret strategies here, you're

102
00:06:47,080 --> 00:06:50,290
going to have your boss discover my borscht.

103
00:06:52,050 --> 00:06:52,380
OK.

104
00:06:55,730 --> 00:06:57,140
So you can have a poor start.

105
00:06:57,380 --> 00:07:01,740
You can tell me the first thing that all basically symbolized Yemen and never see us.

106
00:07:02,420 --> 00:07:05,210
So once you have done with these kind of stuff.

107
00:07:07,800 --> 00:07:13,770
This should be the border that barges into that border, as we have discussed until this sovereign to

108
00:07:13,980 --> 00:07:19,860
of this last, then in the next coming radius, what is the external true means what a body parts that

109
00:07:20,190 --> 00:07:21,300
refers to and everything.

110
00:07:21,960 --> 00:07:24,170
And then this is the most important step.

111
00:07:24,390 --> 00:07:28,590
It's a big step in every project that you create with using one monster.

112
00:07:29,680 --> 00:07:38,050
So basically abducted isn't means on which board of a pet should be more strict, OK, on which board

113
00:07:38,200 --> 00:07:42,430
of a rabbit should get the request made by satellite that is port number four thousand.

114
00:07:43,030 --> 00:07:48,000
And how to know that whether we are the pope is listening to the Florida webpages listening to that,

115
00:07:48,010 --> 00:07:50,950
but it is by calling this a callback function.

116
00:07:51,430 --> 00:07:57,730
So whenever this is executed, then this callback function will get a lot of I started successfully

117
00:07:57,850 --> 00:08:00,160
fought for larger venues and it was over it.

118
00:08:00,430 --> 00:08:02,200
I'm using four thousand currently.

119
00:08:03,040 --> 00:08:06,310
You can also use three thousand two thousand fighters in anything as your wish.

120
00:08:07,000 --> 00:08:08,890
So this really isn't on the boat four thousand.

121
00:08:09,670 --> 00:08:15,010
And then next thing is got get slash comma callback.

122
00:08:15,020 --> 00:08:16,120
So this is a callback function.

123
00:08:16,120 --> 00:08:16,780
So everything.

124
00:08:16,780 --> 00:08:20,650
Similarly, I have one callback function, all our callback functions.

125
00:08:21,040 --> 00:08:22,780
So what the fallback on functions are doing?

126
00:08:23,200 --> 00:08:24,370
What does this get?

127
00:08:24,370 --> 00:08:25,270
Function the time?

128
00:08:25,600 --> 00:08:28,330
This is a function present in express.

129
00:08:28,570 --> 00:08:28,930
OK.

130
00:08:29,530 --> 00:08:30,670
This will get the request.

131
00:08:30,670 --> 00:08:34,030
That means a client is asking server for something.

132
00:08:34,240 --> 00:08:37,930
So we have the server, for example, a person standing something.

133
00:08:37,960 --> 00:08:42,670
There are some apps and like, for example, we type in www.youtube.com.

134
00:08:43,000 --> 00:08:46,990
That means we are asking the board, the Google Home page for the Google search, what we're asking

135
00:08:46,990 --> 00:08:51,100
the Google server in law as their homepage.

136
00:08:51,400 --> 00:08:52,360
So this is similar to that.

137
00:08:52,750 --> 00:08:56,210
We are asking the server to load the home page home page.

138
00:08:56,210 --> 00:08:58,300
You referred to that quotation slash.

139
00:08:58,870 --> 00:09:02,230
So if you want log in page, you need to render flash log in, flash i.

140
00:09:02,590 --> 00:09:03,340
It like that.

141
00:09:03,970 --> 00:09:06,610
So as you can see in homebodies aegis.

142
00:09:07,620 --> 00:09:10,590
Whenever we're clicking on logging, it is calling the logging road.

143
00:09:11,040 --> 00:09:14,370
So what's happening with the logging will be called it will then.

144
00:09:15,660 --> 00:09:20,430
Senator callback function, which will have the request and response request means what the client is

145
00:09:20,430 --> 00:09:25,440
asking their sponsors, what are what the server should accept.

146
00:09:26,010 --> 00:09:29,850
So basically we have the server, we are sending a response doctor and then log in.

147
00:09:30,180 --> 00:09:32,070
So basically we are rendering the log in page.

148
00:09:32,310 --> 00:09:34,550
OK, we are entering this page log into digits.

149
00:09:35,040 --> 00:09:35,890
That's what we are doing.

150
00:09:35,910 --> 00:09:39,030
Similarly, when the user is asking for are not registered.

151
00:09:40,540 --> 00:09:41,400
Not slash registered.

152
00:09:42,040 --> 00:09:46,120
We are then taking the question response as the parameters for the callback function and then rendering

153
00:09:46,120 --> 00:09:47,560
that just a pitch.

154
00:09:48,460 --> 00:09:49,290
So this is basically it.

155
00:09:49,300 --> 00:09:51,580
And then the homepage log in page registered, better known.

156
00:09:51,590 --> 00:09:55,400
So then there's any potential for transfer request made by the client.

157
00:09:56,080 --> 00:09:58,090
So this is the basic boilerplate code.

158
00:09:58,390 --> 00:09:58,690
OK.

159
00:09:58,750 --> 00:10:03,250
So if you remove these two lines or you if you combine them, the remaining four is the basic boilerplate

160
00:10:03,250 --> 00:10:05,260
code that you use for any project that you build.

161
00:10:05,270 --> 00:10:10,540
Using React, you need to you need to have these basic modules and start npm, initialize.

162
00:10:10,540 --> 00:10:13,000
Install them, required them, use them.

163
00:10:13,120 --> 00:10:18,610
Create the constant app using the Express JS make up work, listening to the request made by the client

164
00:10:18,610 --> 00:10:19,750
and then a good function.

165
00:10:20,230 --> 00:10:26,110
So all this make setting up of the project and not from here on what we are going to do in the code

166
00:10:26,110 --> 00:10:32,470
that that project related to like using the different levels of security and everything so we can see

167
00:10:32,470 --> 00:10:37,500
how to protect the, you know, whenever the user clicks on or give some data and clicks on into like

168
00:10:37,510 --> 00:10:43,690
username and password, how to store them in the database and how to ensure the security that no one,

169
00:10:44,170 --> 00:10:47,590
no attack that will, you know, get the data, steal the data.

170
00:10:48,090 --> 00:10:49,720
Our system should not get compromised.

171
00:10:50,590 --> 00:10:53,260
So this all things we'll see in upcoming reduce.

172
00:10:53,890 --> 00:10:54,970
I hope you understood this.

173
00:10:54,970 --> 00:10:57,070
We don't like how to get started with basic.

174
00:10:57,430 --> 00:10:59,600
One stack application will meet in the next.