1
00:00:01,500 --> 00:00:02,240
Hey, what's up?

2
00:00:02,379 --> 00:00:02,980
My name is Dustin

3
00:00:02,980 --> 00:00:03,799
and I'm a developer

4
00:00:03,799 --> 00:00:04,740
here at Treehouse.

5
00:00:05,360 --> 00:00:05,719
Today I want to

6
00:00:05,719 --> 00:00:06,219
show you how

7
00:00:06,219 --> 00:00:07,099
I built a full

8
00:00:07,099 --> 00:00:08,339
stack note taking

9
00:00:08,339 --> 00:00:09,820
application from start to

10
00:00:09,939 --> 00:00:11,480
finish using just cursor

11
00:00:11,480 --> 00:00:13,359
in less than an hour.

12
00:00:13,679 --> 00:00:13,980
If you want to

13
00:00:13,980 --> 00:00:14,699
learn a little bit

14
00:00:14,699 --> 00:00:15,730
more about cursor,

15
00:00:16,120 --> 00:00:17,329
just head to cursor.com.

16
00:00:17,920 --> 00:00:18,780
I'll also leave some

17
00:00:18,780 --> 00:00:19,899
resources down below.

18
00:00:20,500 --> 00:00:21,140
But the first thing

19
00:00:21,140 --> 00:00:21,980
you'll probably notice

20
00:00:22,039 --> 00:00:22,859
is that it looks just

21
00:00:22,859 --> 00:00:24,460
like VS Code and that's

22
00:00:24,460 --> 00:00:24,980
because it is.

23
00:00:25,420 --> 00:00:25,899
It's a fork

24
00:00:25,899 --> 00:00:26,719
of VS Code.

25
00:00:26,719 --> 00:00:27,480
It's just heavily

26
00:00:27,480 --> 00:00:28,239
integrated with

27
00:00:28,239 --> 00:00:29,600
cursor's AI features.

28
00:00:30,280 --> 00:00:31,079
As you scroll down

29
00:00:31,079 --> 00:00:32,079
on the features page,

30
00:00:32,259 --> 00:00:33,520
you'll notice some

31
00:00:33,520 --> 00:00:33,960
of their best

32
00:00:33,960 --> 00:00:35,159
features and you'll

33
00:00:35,159 --> 00:00:36,000
see chat and this

34
00:00:36,000 --> 00:00:36,579
is the one that we're

35
00:00:36,579 --> 00:00:37,039
going to be using.

36
00:00:37,520 --> 00:00:38,060
You can think of it

37
00:00:38,060 --> 00:00:39,399
as like chat GBT that

38
00:00:39,399 --> 00:00:41,060
lives directly into the

39
00:00:41,060 --> 00:00:42,259
code editor and it

40
00:00:42,259 --> 00:00:43,140
has access to all

41
00:00:43,140 --> 00:00:44,159
of your files and all

42
00:00:44,159 --> 00:00:45,159
of your code's context.

43
00:00:45,560 --> 00:00:46,000
I think we're going

44
00:00:46,000 --> 00:00:46,320
to be able to

45
00:00:46,320 --> 00:00:47,000
build something pretty

46
00:00:47,000 --> 00:00:47,500
cool with this,

47
00:00:47,679 --> 00:00:48,780
so let's see how hard

48
00:00:48,780 --> 00:00:49,340
this is.

49
00:00:55,200 --> 00:00:56,500
Alright, so let's

50
00:00:56,500 --> 00:00:56,920
get started.

51
00:00:57,500 --> 00:00:58,700
We're going to open

52
00:00:58,700 --> 00:00:59,880
up the terminal and I'm

53
00:00:59,880 --> 00:01:01,539
going to CD to my

54
00:01:01,539 --> 00:01:02,420
desktop and I'm going to

55
00:01:02,520 --> 00:01:03,159
create my project

56
00:01:03,159 --> 00:01:03,780
folder here.

57
00:01:04,040 --> 00:01:04,260
We're going to

58
00:01:04,260 --> 00:01:05,040
create a very simple

59
00:01:05,040 --> 00:01:05,939
note taking app,

60
00:01:06,000 --> 00:01:06,519
but it will be a

61
00:01:06,560 --> 00:01:06,959
full stack app.

62
00:01:07,420 --> 00:01:08,579
We are going to start

63
00:01:08,579 --> 00:01:09,920
off with setting up a

64
00:01:09,920 --> 00:01:11,780
basic Next.js application

65
00:01:11,780 --> 00:01:12,739
for this project

66
00:01:13,040 --> 00:01:14,019
and don't worry if you

67
00:01:14,019 --> 00:01:14,500
don't know anything

68
00:01:14,500 --> 00:01:15,900
about Next.js or

69
00:01:15,900 --> 00:01:16,900
Tailwind because I'm not

70
00:01:16,900 --> 00:01:17,359
going to code

71
00:01:17,359 --> 00:01:18,140
a single thing.

72
00:01:18,140 --> 00:01:19,000
We're going to use cursor

73
00:01:19,000 --> 00:01:19,920
chat for everything

74
00:01:19,920 --> 00:01:21,040
so theoretically you

75
00:01:21,040 --> 00:01:21,700
can follow along.

76
00:01:21,959 --> 00:01:22,519
So on my desktop,

77
00:01:22,799 --> 00:01:23,140
I'm going to say

78
00:01:23,140 --> 00:01:26,560
MPX create Next app

79
00:01:26,760 --> 00:01:27,700
at latest and I'm

80
00:01:27,700 --> 00:01:28,340
going to call this

81
00:01:28,340 --> 00:01:28,840
notes.

82
00:01:30,459 --> 00:01:31,219
I'm just going to

83
00:01:31,219 --> 00:01:32,799
click enter a few times

84
00:01:32,930 --> 00:01:33,540
for all of my

85
00:01:33,540 --> 00:01:34,640
default settings if you want

86
00:01:34,640 --> 00:01:35,159
to copy them.

87
00:01:35,700 --> 00:01:36,260
You can pause the

88
00:01:36,260 --> 00:01:37,180
video here and

89
00:01:37,180 --> 00:01:38,180
just take a look.

90
00:01:39,560 --> 00:01:40,040
Alright,

91
00:01:40,159 --> 00:01:41,159
so I guess the

92
00:01:41,200 --> 00:01:42,000
first thing I'll do is

93
00:01:42,000 --> 00:01:43,219
I'll just open up my

94
00:01:43,219 --> 00:01:44,019
integrated terminal

95
00:01:44,530 --> 00:01:45,140
and I'm going to run

96
00:01:45,140 --> 00:01:47,480
npm run dev so that

97
00:01:47,480 --> 00:01:48,140
you can see this

98
00:01:48,140 --> 00:01:49,469
is just a basic boilerplate

99
00:01:49,799 --> 00:01:50,700
Next.js application.

100
00:01:51,159 --> 00:01:51,799
Alright, there we go.

101
00:01:51,920 --> 00:01:53,060
So we have our beautiful

102
00:01:53,239 --> 00:01:53,989
Next.js application

103
00:01:54,099 --> 00:01:54,760
right out of the

104
00:01:54,780 --> 00:01:56,500
box and I'm basically going

105
00:01:56,500 --> 00:01:57,540
to reset this.

106
00:01:57,700 --> 00:01:58,120
I'm going to

107
00:01:58,859 --> 00:01:59,719
come into the source

108
00:01:59,719 --> 00:02:01,260
folder here inside

109
00:02:01,260 --> 00:02:02,359
of the app directory.

110
00:02:02,439 --> 00:02:02,739
I'm going to

111
00:02:02,739 --> 00:02:03,659
remove the favicon.

112
00:02:04,879 --> 00:02:05,400
I'm going to open up

113
00:02:05,400 --> 00:02:07,239
the global.css file and

114
00:02:07,239 --> 00:02:08,479
delete everything except

115
00:02:08,479 --> 00:02:09,620
the tailwind imports.

116
00:02:12,120 --> 00:02:12,840
Inside of layout,

117
00:02:13,099 --> 00:02:13,560
I'm going to remove

118
00:02:13,659 --> 00:02:14,699
all the classes that we

119
00:02:14,699 --> 00:02:15,400
have on the body

120
00:02:16,020 --> 00:02:16,240
and I'm

121
00:02:16,240 --> 00:02:17,800
going to remove the imports

122
00:02:17,819 --> 00:02:20,099
for the fonts and

123
00:02:20,099 --> 00:02:20,780
I'm going to hit save.

124
00:02:21,719 --> 00:02:22,240
And then last,

125
00:02:22,439 --> 00:02:22,879
I'm going to go to

126
00:02:22,879 --> 00:02:23,860
the page and I'm just

127
00:02:23,900 --> 00:02:24,740
going to remove it all.

128
00:02:24,979 --> 00:02:25,479
I'm going to write

129
00:02:26,360 --> 00:02:28,000
RAFCE to create a

130
00:02:28,000 --> 00:02:30,460
basic component called page and

131
00:02:30,460 --> 00:02:31,199
then now that is

132
00:02:31,199 --> 00:02:32,219
all we see in the

133
00:02:32,219 --> 00:02:33,500
browser, which is pretty nice.

134
00:02:33,979 --> 00:02:34,419
Alright,

135
00:02:34,599 --> 00:02:35,219
now up here,

136
00:02:35,340 --> 00:02:35,879
I'm going to switch

137
00:02:35,879 --> 00:02:37,000
this over to chat.

138
00:02:37,000 --> 00:02:38,000
You can think of this

139
00:02:38,039 --> 00:02:39,080
as like chat GPT

140
00:02:39,080 --> 00:02:40,099
if you're familiar with that.

141
00:02:40,259 --> 00:02:40,819
I think the first

142
00:02:40,819 --> 00:02:41,219
thing I want

143
00:02:41,219 --> 00:02:41,960
to do is implement

144
00:02:41,960 --> 00:02:43,319
a landing page for

145
00:02:43,319 --> 00:02:44,939
our notes app that allows

146
00:02:44,939 --> 00:02:46,699
our users to log in

147
00:02:47,219 --> 00:02:47,599
and we're going to

148
00:02:47,599 --> 00:02:48,800
use Firebase for this.

149
00:02:49,159 --> 00:02:49,900
Don't worry if you don't

150
00:02:49,900 --> 00:02:50,530
have any experience

151
00:02:50,740 --> 00:02:52,159
with databases or

152
00:02:52,159 --> 00:02:53,900
authentication or Firebase

153
00:02:53,900 --> 00:02:54,979
or anything like that.

154
00:02:55,159 --> 00:02:55,939
We're going to allow

155
00:02:55,939 --> 00:02:57,000
cursor to do most

156
00:02:57,000 --> 00:02:57,800
of that for us.

157
00:02:57,979 --> 00:02:58,719
I will say though

158
00:02:58,719 --> 00:02:59,400
that if you

159
00:02:59,400 --> 00:03:00,379
do have a little

160
00:03:00,379 --> 00:03:01,599
bit of knowledge about

161
00:03:01,599 --> 00:03:03,240
the backend and databases,

162
00:03:04,060 --> 00:03:04,780
you may be able

163
00:03:04,780 --> 00:03:07,199
to prompt cursor much easier

164
00:03:07,199 --> 00:03:07,800
than if you didn't.

165
00:03:08,080 --> 00:03:08,800
So let's get started

166
00:03:08,800 --> 00:03:09,400
with the first

167
00:03:09,400 --> 00:03:10,120
initial prompt.

168
00:03:10,539 --> 00:03:11,060
All right,

169
00:03:11,139 --> 00:03:11,819
so I'm finished with

170
00:03:11,860 --> 00:03:12,580
my initial prompt.

171
00:03:12,680 --> 00:03:12,939
I'm going to go

172
00:03:12,939 --> 00:03:13,669
ahead and send that

173
00:03:13,680 --> 00:03:14,400
and while it is

174
00:03:14,400 --> 00:03:15,900
working up the code,

175
00:03:16,000 --> 00:03:16,319
I'm going to go

176
00:03:16,319 --> 00:03:17,199
ahead and kind of

177
00:03:17,199 --> 00:03:17,939
read through what I wrote.

178
00:03:18,939 --> 00:03:19,520
I have a brand

179
00:03:19,520 --> 00:03:21,699
new next JS application and

180
00:03:21,699 --> 00:03:22,800
I'm not using TypeScript,

181
00:03:23,060 --> 00:03:23,699
just JavaScript.

182
00:03:24,400 --> 00:03:25,020
I want to create a

183
00:03:25,020 --> 00:03:26,680
full stack note taking app,

184
00:03:26,960 --> 00:03:27,560
a simple one.

185
00:03:28,080 --> 00:03:29,099
Let's get started first

186
00:03:29,099 --> 00:03:29,919
with the landing page.

187
00:03:30,699 --> 00:03:31,080
I want it to

188
00:03:31,080 --> 00:03:32,180
be a simple one pager

189
00:03:32,180 --> 00:03:33,870
with the content centered.

190
00:03:34,879 --> 00:03:35,639
I want the app

191
00:03:35,639 --> 00:03:36,740
name, which is notes

192
00:03:37,259 --> 00:03:38,159
and a brief description

193
00:03:38,159 --> 00:03:39,360
and then a continue with

194
00:03:39,439 --> 00:03:39,919
Google button.

195
00:03:40,300 --> 00:03:40,759
The reason I'm going

196
00:03:40,759 --> 00:03:41,560
to use this continue

197
00:03:41,560 --> 00:03:42,419
with Google button is

198
00:03:42,419 --> 00:03:43,199
because it's probably

199
00:03:43,199 --> 00:03:44,099
the easiest way

200
00:03:44,099 --> 00:03:45,240
to start authenticating

201
00:03:45,240 --> 00:03:45,759
your users.

202
00:03:46,159 --> 00:03:47,000
So I figured let's

203
00:03:47,000 --> 00:03:47,759
keep it simple and

204
00:03:47,759 --> 00:03:48,580
do something like that.

205
00:03:49,560 --> 00:03:49,800
All right,

206
00:03:49,900 --> 00:03:51,439
so for the UI styles,

207
00:03:51,560 --> 00:03:52,520
I'd like a threads

208
00:03:52,520 --> 00:03:53,900
.net slash Instagram

209
00:03:53,900 --> 00:03:55,280
style UI with

210
00:03:55,280 --> 00:03:56,139
round spacious

211
00:03:56,139 --> 00:03:56,939
UI elements.

212
00:03:57,620 --> 00:03:58,000
I don't want

213
00:03:58,000 --> 00:03:59,280
anything fully round.

214
00:04:00,139 --> 00:04:00,539
Now, this is just

215
00:04:00,539 --> 00:04:01,219
personal preference.

216
00:04:01,560 --> 00:04:02,599
I really enjoy the

217
00:04:02,599 --> 00:04:03,759
way that the UI

218
00:04:03,759 --> 00:04:05,099
styles look with

219
00:04:05,120 --> 00:04:06,360
Instagram and threads.

220
00:04:06,599 --> 00:04:07,219
So that's why I'm

221
00:04:07,219 --> 00:04:07,800
going to go with that.

222
00:04:08,620 --> 00:04:09,620
And for the colors,

223
00:04:09,759 --> 00:04:10,620
let's import colors

224
00:04:10,620 --> 00:04:11,840
from Tailwind in

225
00:04:11,840 --> 00:04:12,939
the tailwind.config

226
00:04:12,939 --> 00:04:14,199
file and let's

227
00:04:14,199 --> 00:04:15,699
set the primary to sky

228
00:04:15,699 --> 00:04:17,759
and the secondary to zinc.

229
00:04:18,180 --> 00:04:19,240
I'll explain this when

230
00:04:19,240 --> 00:04:19,839
we get to this,

231
00:04:19,980 --> 00:04:21,040
but trust me,

232
00:04:21,100 --> 00:04:22,060
this is awesome.

233
00:04:22,879 --> 00:04:23,470
And then lastly,

234
00:04:23,699 --> 00:04:24,420
I want the app

235
00:04:24,480 --> 00:04:25,439
to be in the tailwind,

236
00:04:25,759 --> 00:04:26,860
zinc color scale

237
00:04:26,860 --> 00:04:27,480
for both light

238
00:04:27,480 --> 00:04:28,279
and dark mode.

239
00:04:28,699 --> 00:04:29,439
Be sure not to

240
00:04:29,459 --> 00:04:30,680
make dark mode too dark.

241
00:04:31,660 --> 00:04:32,279
All right, so let's

242
00:04:32,279 --> 00:04:33,860
see what it gave us.

243
00:04:34,800 --> 00:04:34,939
All right,

244
00:04:34,959 --> 00:04:35,740
so first things first,

245
00:04:35,939 --> 00:04:36,519
we are going to be

246
00:04:36,519 --> 00:04:37,240
opening up the

247
00:04:37,240 --> 00:04:38,300
tailwind config file.

248
00:04:38,860 --> 00:04:39,379
Now if you did

249
00:04:39,379 --> 00:04:40,620
not supply it with your

250
00:04:40,620 --> 00:04:41,600
tailwind config file

251
00:04:41,600 --> 00:04:42,459
when prompting it,

252
00:04:42,600 --> 00:04:42,839
it's going to

253
00:04:42,839 --> 00:04:43,500
probably try to

254
00:04:43,500 --> 00:04:44,279
create a new one,

255
00:04:44,779 --> 00:04:45,639
which is super annoying.

256
00:04:45,639 --> 00:04:46,199
And I hope they

257
00:04:46,259 --> 00:04:46,949
fix this soon.

258
00:04:47,500 --> 00:04:47,879
And it will

259
00:04:47,879 --> 00:04:48,579
cause issues.

260
00:04:48,579 --> 00:04:49,610
So if I hit accept,

261
00:04:49,800 --> 00:04:50,199
nothing's going

262
00:04:50,199 --> 00:04:50,540
to happen,

263
00:04:50,639 --> 00:04:51,220
but it's going to

264
00:04:51,240 --> 00:04:52,339
override the other one.

265
00:04:52,560 --> 00:04:53,199
Just delete your old

266
00:04:53,199 --> 00:04:53,699
one and then

267
00:04:53,699 --> 00:04:54,399
you should be fine.

268
00:04:55,060 --> 00:04:56,240
And what it's doing is

269
00:04:56,240 --> 00:04:57,540
it's basically importing

270
00:04:57,540 --> 00:04:58,920
tailwind colors and

271
00:04:58,920 --> 00:04:59,620
then setting the primary

272
00:04:59,879 --> 00:05:00,699
color to sky.

273
00:05:01,000 --> 00:05:01,379
That way,

274
00:05:01,420 --> 00:05:02,079
if I ever want to

275
00:05:02,079 --> 00:05:03,379
change the entire UI's

276
00:05:03,379 --> 00:05:04,240
primary color later,

277
00:05:04,399 --> 00:05:04,939
I just got to come

278
00:05:04,939 --> 00:05:05,560
in here and change it.

279
00:05:06,199 --> 00:05:06,899
And same for the

280
00:05:06,899 --> 00:05:07,939
basic UI styles,

281
00:05:08,250 --> 00:05:09,079
which is going to

282
00:05:09,079 --> 00:05:10,060
be the zinc color palette.

283
00:05:10,519 --> 00:05:11,000
And I'll show you

284
00:05:11,000 --> 00:05:11,939
examples of these later.

285
00:05:12,199 --> 00:05:12,740
All right, so next

286
00:05:12,740 --> 00:05:14,110
for the page, hit accept.

287
00:05:15,259 --> 00:05:15,660
Cool.

288
00:05:16,019 --> 00:05:16,279
All right.

289
00:05:16,379 --> 00:05:17,500
So remember, we

290
00:05:17,500 --> 00:05:18,139
are zoomed in.

291
00:05:18,139 --> 00:05:18,519
So I'm going to

292
00:05:18,519 --> 00:05:19,220
zoom out a little bit.

293
00:05:19,399 --> 00:05:19,639
I think that

294
00:05:19,639 --> 00:05:20,199
should be fine.

295
00:05:20,779 --> 00:05:21,319
I think this looks

296
00:05:21,319 --> 00:05:22,920
pretty great off the bat.

297
00:05:23,139 --> 00:05:23,939
So it says notes,

298
00:05:24,579 --> 00:05:24,980
your thoughts,

299
00:05:25,220 --> 00:05:25,860
organized and

300
00:05:25,939 --> 00:05:27,040
accessible anywhere,

301
00:05:27,720 --> 00:05:28,259
the simple way to

302
00:05:28,259 --> 00:05:28,779
capture and

303
00:05:28,879 --> 00:05:29,259
manage your notes.

304
00:05:29,759 --> 00:05:30,139
And then we have

305
00:05:30,139 --> 00:05:31,279
a continue with Google button.

306
00:05:32,160 --> 00:05:33,360
And as I mentioned

307
00:05:33,360 --> 00:05:34,319
earlier with the primary

308
00:05:34,319 --> 00:05:35,579
color set to sky,

309
00:05:36,399 --> 00:05:38,220
in the actual code, you

310
00:05:38,220 --> 00:05:39,100
see that the button has

311
00:05:39,100 --> 00:05:40,500
a BG primary 500

312
00:05:40,500 --> 00:05:42,300
and on hover primary 600.

313
00:05:43,259 --> 00:05:43,660
So that's the

314
00:05:43,740 --> 00:05:44,360
primary color.

315
00:05:44,480 --> 00:05:44,939
So if we go

316
00:05:44,939 --> 00:05:45,660
over to our tail and

317
00:05:45,660 --> 00:05:46,579
config and we change

318
00:05:47,319 --> 00:05:48,120
our primary color

319
00:05:48,120 --> 00:05:49,720
from sky to something

320
00:05:49,720 --> 00:05:50,019
like rose,

321
00:05:51,040 --> 00:05:51,560
it instantly

322
00:05:51,560 --> 00:05:53,160
changes the primary

323
00:05:53,160 --> 00:05:54,220
color that we're

324
00:05:54,220 --> 00:05:55,100
using within the app.

325
00:05:55,480 --> 00:05:56,120
And same with the

326
00:05:56,120 --> 00:05:56,959
zinc color scale.

327
00:05:57,139 --> 00:05:57,759
So this is using

328
00:05:57,759 --> 00:05:59,060
the secondary color,

329
00:05:59,160 --> 00:05:59,680
which is kind of

330
00:05:59,800 --> 00:06:00,379
coloring the UI.

331
00:06:00,560 --> 00:06:01,160
So if I say

332
00:06:01,160 --> 00:06:02,730
something like slate,

333
00:06:04,519 --> 00:06:04,899
you're going to see

334
00:06:04,899 --> 00:06:05,660
that we now have more

335
00:06:05,660 --> 00:06:06,459
of a slate color

336
00:06:06,540 --> 00:06:07,139
palette here.

337
00:06:07,459 --> 00:06:07,620
All right.

338
00:06:07,740 --> 00:06:08,600
So before we start with

339
00:06:08,660 --> 00:06:09,160
the authentication,

340
00:06:09,519 --> 00:06:10,060
let's hit one

341
00:06:10,060 --> 00:06:10,819
more piece first.

342
00:06:10,819 --> 00:06:12,379
Let's let's create a

343
00:06:12,379 --> 00:06:14,019
way to toggle on the

344
00:06:14,019 --> 00:06:14,800
dark and light mode.

345
00:06:15,600 --> 00:06:15,839
All right.

346
00:06:15,920 --> 00:06:16,779
So I wrote, this

347
00:06:16,779 --> 00:06:17,759
is looking great.

348
00:06:18,060 --> 00:06:19,019
Let's continue with

349
00:06:19,019 --> 00:06:20,060
these UI styles.

350
00:06:20,139 --> 00:06:20,699
I want to create a

351
00:06:20,759 --> 00:06:21,860
component for updating

352
00:06:21,860 --> 00:06:22,839
the theme from either

353
00:06:22,839 --> 00:06:23,759
light to dark mode.

354
00:06:24,180 --> 00:06:24,779
And let's set that

355
00:06:24,779 --> 00:06:25,680
up now and add

356
00:06:25,680 --> 00:06:26,439
it to the layout

357
00:06:26,439 --> 00:06:27,500
in the top right.

358
00:06:28,300 --> 00:06:28,740
So it looks like

359
00:06:28,740 --> 00:06:29,379
it's creating a

360
00:06:29,560 --> 00:06:30,480
theme toggle for me.

361
00:06:30,620 --> 00:06:30,779
I'm going to

362
00:06:30,779 --> 00:06:31,279
go ahead and

363
00:06:32,500 --> 00:06:32,699
click accept.

364
00:06:34,339 --> 00:06:34,819
So this is a

365
00:06:34,819 --> 00:06:35,310
new component.

366
00:06:35,540 --> 00:06:36,040
And basically,

367
00:06:36,920 --> 00:06:38,160
it's updating our theme.

368
00:06:38,220 --> 00:06:38,939
So it's looking at

369
00:06:38,939 --> 00:06:40,019
local storage and it's

370
00:06:40,019 --> 00:06:40,740
setting our theme,

371
00:06:40,860 --> 00:06:41,459
which is pretty cool.

372
00:06:41,540 --> 00:06:42,540
So either light or dark.

373
00:06:42,779 --> 00:06:42,920
All right.

374
00:06:42,959 --> 00:06:43,680
Now in the layout,

375
00:06:43,800 --> 00:06:44,300
it looks like we're

376
00:06:44,300 --> 00:06:44,839
going to import

377
00:06:44,839 --> 00:06:45,560
this new component.

378
00:06:46,579 --> 00:06:47,199
And then in the

379
00:06:47,199 --> 00:06:48,100
tailwind config,

380
00:06:48,100 --> 00:06:48,800
we're setting the

381
00:06:49,019 --> 00:06:50,269
dark mode to class.

382
00:06:50,600 --> 00:06:51,459
So let's go ahead

383
00:06:51,459 --> 00:06:52,019
and click it.

384
00:06:52,300 --> 00:06:52,459
Okay.

385
00:06:52,500 --> 00:06:52,600
Cool.

386
00:06:53,040 --> 00:06:53,180
Cool.

387
00:06:53,759 --> 00:06:54,360
I'm not a fan

388
00:06:54,360 --> 00:06:54,949
of these emojis.

389
00:06:55,480 --> 00:06:56,220
So let's say that,

390
00:06:56,379 --> 00:06:57,540
let's say I'm not

391
00:06:57,660 --> 00:06:59,420
a fan of the emojis.

392
00:06:59,920 --> 00:07:01,040
Let's use icons.

393
00:07:02,259 --> 00:07:04,060
I want to use the

394
00:07:04,060 --> 00:07:06,399
react icons library.

395
00:07:07,120 --> 00:07:07,800
And you could use

396
00:07:07,800 --> 00:07:09,160
whatever icon library you like.

397
00:07:09,339 --> 00:07:10,040
I personally really

398
00:07:10,040 --> 00:07:11,079
like react icons.

399
00:07:11,899 --> 00:07:12,240
So I'm going to

400
00:07:12,240 --> 00:07:12,860
go ahead and do that.

401
00:07:12,959 --> 00:07:13,379
And it's going to

402
00:07:13,379 --> 00:07:14,240
ask me to run

403
00:07:14,240 --> 00:07:15,579
npm install react icons.

404
00:07:16,459 --> 00:07:16,819
It'll run the

405
00:07:16,819 --> 00:07:17,680
command for me.

406
00:07:17,819 --> 00:07:18,360
We'll hop right

407
00:07:18,360 --> 00:07:19,180
back into the chat.

408
00:07:19,920 --> 00:07:20,399
And then it looks

409
00:07:20,399 --> 00:07:20,879
like it's going to

410
00:07:20,959 --> 00:07:21,839
update that component

411
00:07:21,839 --> 00:07:22,620
to use that.

412
00:07:23,089 --> 00:07:23,680
And it does.

413
00:07:24,000 --> 00:07:24,480
Now I think this

414
00:07:24,480 --> 00:07:25,160
looks a lot better.

415
00:07:25,720 --> 00:07:26,079
It's personal

416
00:07:26,079 --> 00:07:26,180
preference.

417
00:07:26,839 --> 00:07:27,300
If we go back

418
00:07:27,300 --> 00:07:27,740
to our app,

419
00:07:27,819 --> 00:07:28,620
we see that it's basic.

420
00:07:29,079 --> 00:07:29,339
It's working.

421
00:07:29,839 --> 00:07:30,620
We have our little

422
00:07:30,620 --> 00:07:31,620
home screen here

423
00:07:31,620 --> 00:07:32,639
and now it's time

424
00:07:32,639 --> 00:07:33,339
to authenticate.

425
00:07:38,620 --> 00:07:39,480
So now it's time

426
00:07:39,480 --> 00:07:41,259
to set up authentication

427
00:07:41,259 --> 00:07:42,500
for our app.

428
00:07:42,939 --> 00:07:43,370
If you remember,

429
00:07:43,560 --> 00:07:44,540
we have the continue

430
00:07:44,540 --> 00:07:45,420
with Google button that

431
00:07:45,420 --> 00:07:46,339
currently does nothing

432
00:07:46,509 --> 00:07:47,600
and we want to

433
00:07:47,600 --> 00:07:48,449
set up a firebase.

434
00:07:49,459 --> 00:07:50,139
So you just need to

435
00:07:50,180 --> 00:07:51,519
go to firebase.google

436
00:07:51,519 --> 00:07:52,899
.com and create an account.

437
00:07:53,620 --> 00:07:54,600
And once your account

438
00:07:54,600 --> 00:07:55,300
is all set up,

439
00:07:55,420 --> 00:07:55,839
you want to click

440
00:07:55,839 --> 00:07:57,029
on go to console.

441
00:07:58,399 --> 00:07:59,160
And then just click

442
00:07:59,160 --> 00:08:00,350
on create a project.

443
00:08:01,279 --> 00:08:01,620
We're going to name

444
00:08:01,620 --> 00:08:02,430
this project notes.

445
00:08:03,839 --> 00:08:04,019
I'm going to

446
00:08:04,019 --> 00:08:04,300
hit continue.

447
00:08:05,360 --> 00:08:05,779
I'm going to turn

448
00:08:05,779 --> 00:08:06,660
off the enable

449
00:08:06,660 --> 00:08:07,819
Gemini and firebase.

450
00:08:08,000 --> 00:08:08,480
I don't really

451
00:08:08,480 --> 00:08:09,120
think I need it.

452
00:08:09,720 --> 00:08:10,420
And I'm also going

453
00:08:10,420 --> 00:08:11,439
to turn off the analytics

454
00:08:12,129 --> 00:08:12,860
and I'm going to

455
00:08:12,860 --> 00:08:13,899
click create project.

456
00:08:14,740 --> 00:08:15,360
This shouldn't take

457
00:08:15,600 --> 00:08:16,300
very long at all,

458
00:08:16,360 --> 00:08:16,879
maybe just a

459
00:08:16,879 --> 00:08:17,199
few seconds.

460
00:08:18,220 --> 00:08:18,800
All right, our

461
00:08:18,899 --> 00:08:19,519
project is finished.

462
00:08:19,620 --> 00:08:20,120
I'm going to go ahead

463
00:08:20,120 --> 00:08:20,649
and click continue.

464
00:08:22,079 --> 00:08:22,860
And now we're brought

465
00:08:22,860 --> 00:08:23,819
to this screen here.

466
00:08:24,019 --> 00:08:24,600
I'll make the page

467
00:08:24,600 --> 00:08:25,579
just a little bit bigger.

468
00:08:26,139 --> 00:08:26,980
It says get started

469
00:08:26,980 --> 00:08:28,279
by adding firebase

470
00:08:28,279 --> 00:08:29,060
to your app.

471
00:08:29,379 --> 00:08:30,000
So you can choose

472
00:08:30,000 --> 00:08:31,620
an Apple iOS app.

473
00:08:31,899 --> 00:08:33,320
You can choose Android or

474
00:08:33,320 --> 00:08:34,039
you can do the web.

475
00:08:34,620 --> 00:08:35,360
We're obviously going to

476
00:08:35,379 --> 00:08:36,320
choose the web here.

477
00:08:36,879 --> 00:08:37,519
And then for

478
00:08:37,519 --> 00:08:38,240
the web name,

479
00:08:38,299 --> 00:08:38,600
we're just going

480
00:08:38,600 --> 00:08:39,470
to call it notes

481
00:08:40,139 --> 00:08:40,720
and click register.

482
00:08:41,100 --> 00:08:41,220
All right,

483
00:08:41,240 --> 00:08:41,860
so now we have

484
00:08:41,860 --> 00:08:43,289
all of our important information.

485
00:08:44,279 --> 00:08:44,299
Now,

486
00:08:44,320 --> 00:08:44,940
before we do

487
00:08:44,940 --> 00:08:45,720
anything here,

488
00:08:45,759 --> 00:08:46,259
let's go back

489
00:08:46,259 --> 00:08:46,990
to our project

490
00:08:47,379 --> 00:08:48,679
and let's start talking

491
00:08:48,679 --> 00:08:50,139
to cursor chat again.

492
00:08:50,720 --> 00:08:51,080
OK,

493
00:08:51,259 --> 00:08:52,240
so I basically

494
00:08:52,240 --> 00:08:53,039
just wrote,

495
00:08:53,299 --> 00:08:54,159
I want to now

496
00:08:54,159 --> 00:08:55,820
set up firebase for authenticating

497
00:08:56,559 --> 00:08:57,159
and clicking

498
00:08:57,159 --> 00:08:58,179
continue with Google.

499
00:08:58,179 --> 00:08:59,120
I want the users

500
00:08:59,120 --> 00:09:00,340
to be authenticated with Google

501
00:09:00,340 --> 00:09:01,779
and then redirect them

502
00:09:01,779 --> 00:09:04,230
to a slash home page.

503
00:09:05,139 --> 00:09:05,679
So initially,

504
00:09:05,940 --> 00:09:07,139
it wants me to run

505
00:09:07,139 --> 00:09:08,440
npm install firebase.

506
00:09:08,600 --> 00:09:08,860
Let's go ahead

507
00:09:08,860 --> 00:09:09,200
and do that.

508
00:09:09,360 --> 00:09:10,539
All right, firebase

509
00:09:10,539 --> 00:09:11,159
is installed.

510
00:09:11,240 --> 00:09:11,820
So now it wants to

511
00:09:11,879 --> 00:09:13,679
create a firebase.js file.

512
00:09:14,080 --> 00:09:14,379
I'm going to go

513
00:09:14,379 --> 00:09:15,110
ahead and click

514
00:09:16,360 --> 00:09:17,139
accept on that.

515
00:09:17,220 --> 00:09:17,659
It's going to create

516
00:09:17,659 --> 00:09:18,379
a new file for

517
00:09:18,379 --> 00:09:20,019
me called firebase.js.

518
00:09:21,139 --> 00:09:21,659
And in here,

519
00:09:21,700 --> 00:09:22,159
it looks like we're

520
00:09:22,159 --> 00:09:22,679
going to have all

521
00:09:22,740 --> 00:09:24,340
of our API keys,

522
00:09:25,039 --> 00:09:25,440
the auth domain,

523
00:09:25,799 --> 00:09:26,379
the project ID,

524
00:09:26,740 --> 00:09:27,159
storage bucket,

525
00:09:27,159 --> 00:09:28,019
all those things that

526
00:09:28,019 --> 00:09:28,740
Google is going to

527
00:09:28,740 --> 00:09:29,509
need to authenticate.

528
00:09:30,320 --> 00:09:30,960
And then we're going

529
00:09:30,960 --> 00:09:31,500
to go ahead and create

530
00:09:31,500 --> 00:09:32,700
our dot env file

531
00:09:33,139 --> 00:09:34,200
so that we can

532
00:09:34,200 --> 00:09:35,639
actually import these

533
00:09:35,639 --> 00:09:36,940
keys into here.

534
00:09:37,299 --> 00:09:37,799
And I'll show you

535
00:09:37,799 --> 00:09:38,440
a very easy

536
00:09:38,440 --> 00:09:39,139
way to do this.

537
00:09:39,919 --> 00:09:41,139
You have your variable

538
00:09:41,139 --> 00:09:42,279
names and your values.

539
00:09:42,700 --> 00:09:43,340
And we have to get

540
00:09:43,340 --> 00:09:44,340
all this information

541
00:09:44,340 --> 00:09:46,460
here into there.

542
00:09:46,860 --> 00:09:47,500
And that can be

543
00:09:47,500 --> 00:09:48,039
pretty tedious.

544
00:09:48,679 --> 00:09:50,340
So you can just come

545
00:09:50,340 --> 00:09:51,299
in here, paste that in.

546
00:09:51,940 --> 00:09:53,179
And you can copy this

547
00:09:53,179 --> 00:09:54,100
entire thing and click

548
00:09:54,100 --> 00:09:56,220
command K and just say,

549
00:09:56,220 --> 00:09:57,600
set up these

550
00:09:57,600 --> 00:10:00,259
variables with their

551
00:10:01,200 --> 00:10:01,679
correct

552
00:10:03,440 --> 00:10:03,639
values

553
00:10:04,279 --> 00:10:04,820
and hit enter.

554
00:10:05,019 --> 00:10:05,419
So it's going to

555
00:10:05,419 --> 00:10:06,210
go ahead and remove

556
00:10:06,220 --> 00:10:07,340
everything except

557
00:10:07,620 --> 00:10:08,740
the variable name

558
00:10:08,740 --> 00:10:09,299
and the value,

559
00:10:10,059 --> 00:10:10,399
pretty simple.

560
00:10:11,220 --> 00:10:11,460
All right,

561
00:10:11,480 --> 00:10:12,399
so next it wants to

562
00:10:12,399 --> 00:10:14,039
create another component,

563
00:10:14,639 --> 00:10:15,299
auth context.

564
00:10:15,919 --> 00:10:16,500
So we're going to

565
00:10:16,500 --> 00:10:17,179
let it do that.

566
00:10:18,360 --> 00:10:18,559
We're going

567
00:10:18,559 --> 00:10:18,940
to hit accept.

568
00:10:20,259 --> 00:10:21,460
And then in our layout,

569
00:10:21,659 --> 00:10:22,480
it looks like it's

570
00:10:22,519 --> 00:10:23,220
going to add this

571
00:10:23,220 --> 00:10:23,929
author provider.

572
00:10:25,000 --> 00:10:25,519
And then,

573
00:10:25,860 --> 00:10:26,299
OK,

574
00:10:26,340 --> 00:10:27,120
now we're creating a

575
00:10:27,120 --> 00:10:28,460
Google sign in component,

576
00:10:28,620 --> 00:10:29,299
which is pretty cool.

577
00:10:29,700 --> 00:10:30,620
And now inside

578
00:10:30,620 --> 00:10:31,279
of our page,

579
00:10:31,379 --> 00:10:31,620
we're going to

580
00:10:31,620 --> 00:10:32,419
import that Google

581
00:10:32,419 --> 00:10:33,379
sign in component.

582
00:10:34,299 --> 00:10:34,889
And then finally,

583
00:10:36,539 --> 00:10:37,379
we're creating that

584
00:10:37,379 --> 00:10:38,659
homepage that we mentioned

585
00:10:38,700 --> 00:10:39,100
that we wanted

586
00:10:39,100 --> 00:10:39,679
to redirect to.

587
00:10:40,379 --> 00:10:40,960
So this looks

588
00:10:40,960 --> 00:10:41,720
pretty basic.

589
00:10:41,879 --> 00:10:42,429
It says welcome,

590
00:10:42,519 --> 00:10:43,299
and then it has

591
00:10:43,299 --> 00:10:44,360
our display name.

592
00:10:44,480 --> 00:10:45,019
So this must be

593
00:10:45,019 --> 00:10:46,179
getting this data from

594
00:10:46,179 --> 00:10:47,370
our authentication.

595
00:10:48,399 --> 00:10:49,580
Before we do anything,

596
00:10:49,779 --> 00:10:50,259
we do need to

597
00:10:50,259 --> 00:10:51,980
come back into the console.

598
00:10:51,980 --> 00:10:52,980
And we're going to

599
00:10:52,980 --> 00:10:53,940
go over here to

600
00:10:54,090 --> 00:10:55,580
authentication and we're

601
00:10:55,580 --> 00:10:55,879
going to click

602
00:10:55,879 --> 00:10:56,379
get started.

603
00:10:56,700 --> 00:10:57,100
Now,

604
00:10:57,120 --> 00:10:58,000
we basically need to

605
00:10:58,000 --> 00:10:59,139
let Firebase know

606
00:10:59,139 --> 00:11:00,700
which sign in method

607
00:11:00,700 --> 00:11:02,100
we want our app to

608
00:11:02,100 --> 00:11:02,639
be working with.

609
00:11:02,840 --> 00:11:03,279
And there's a ton

610
00:11:03,279 --> 00:11:03,779
to choose from.

611
00:11:04,000 --> 00:11:04,419
You have Google,

612
00:11:04,700 --> 00:11:04,940
Facebook,

613
00:11:05,639 --> 00:11:06,919
GitHub, Apple, Twitter,

614
00:11:07,019 --> 00:11:07,919
and you can even

615
00:11:07,919 --> 00:11:09,279
just use your email password,

616
00:11:09,779 --> 00:11:10,200
phone number

617
00:11:10,200 --> 00:11:10,820
or anonymous.

618
00:11:11,340 --> 00:11:11,720
But we're going to

619
00:11:11,720 --> 00:11:12,539
click Google for this.

620
00:11:12,960 --> 00:11:13,440
And all we're going

621
00:11:13,440 --> 00:11:14,110
to do is click enable.

622
00:11:14,679 --> 00:11:15,059
And you're going to

623
00:11:15,059 --> 00:11:16,620
set up a email address

624
00:11:16,620 --> 00:11:17,200
that you want to

625
00:11:17,200 --> 00:11:18,059
be tied to your project.

626
00:11:18,480 --> 00:11:19,019
So I'm just going to

627
00:11:19,019 --> 00:11:19,659
choose one of my

628
00:11:19,659 --> 00:11:20,620
Google email addresses.

629
00:11:21,519 --> 00:11:22,240
We're going to hit save.

630
00:11:22,820 --> 00:11:23,759
And now our project

631
00:11:23,759 --> 00:11:24,539
should work once

632
00:11:24,539 --> 00:11:25,120
this is finished.

633
00:11:25,799 --> 00:11:26,039
All right.

634
00:11:26,139 --> 00:11:26,799
So now let's go

635
00:11:26,799 --> 00:11:27,440
over here and check.

636
00:11:27,799 --> 00:11:28,379
I'm going to refresh the

637
00:11:28,460 --> 00:11:29,419
page just to make sure.

638
00:11:30,080 --> 00:11:30,679
And now when I click

639
00:11:30,679 --> 00:11:31,620
continue with Google,

640
00:11:32,259 --> 00:11:32,600
this little

641
00:11:32,600 --> 00:11:33,860
modal pops up

642
00:11:33,860 --> 00:11:34,279
and I could choose

643
00:11:34,279 --> 00:11:35,120
my Google account,

644
00:11:35,419 --> 00:11:35,899
click continue.

645
00:11:37,220 --> 00:11:38,559
And now I'm redirected

646
00:11:38,559 --> 00:11:39,360
with my username,

647
00:11:39,500 --> 00:11:40,340
which is pretty cool.

648
00:11:40,960 --> 00:11:41,399
And if I hit

649
00:11:41,399 --> 00:11:42,759
refresh, it stays.

650
00:11:43,659 --> 00:11:44,820
If I try to delete

651
00:11:44,820 --> 00:11:46,120
this slash home,

652
00:11:46,120 --> 00:11:47,480
it takes me back.

653
00:11:47,639 --> 00:11:48,460
So let's actually see

654
00:11:48,460 --> 00:11:48,960
if we can't

655
00:11:49,019 --> 00:11:49,879
fix this right now.

656
00:11:53,340 --> 00:11:54,159
So I wrote once

657
00:11:54,159 --> 00:11:54,860
I'm authenticated,

658
00:11:55,139 --> 00:11:56,419
I'm brought to slash

659
00:11:56,419 --> 00:11:57,480
home as expected,

660
00:11:57,940 --> 00:11:58,759
but I can still have

661
00:11:58,759 --> 00:11:59,480
access to the

662
00:11:59,480 --> 00:12:00,539
initial landing page.

663
00:12:01,039 --> 00:12:01,519
And I don't want

664
00:12:01,519 --> 00:12:02,200
users to be able to

665
00:12:02,259 --> 00:12:02,919
access the landing

666
00:12:02,919 --> 00:12:03,759
page if authenticated.

667
00:12:05,000 --> 00:12:05,799
So let's see if it

668
00:12:05,799 --> 00:12:07,860
updates any of the

669
00:12:07,860 --> 00:12:08,740
code to make this work.

670
00:12:09,379 --> 00:12:09,580
All right.

671
00:12:09,639 --> 00:12:10,279
So instantly I'm

672
00:12:10,279 --> 00:12:11,200
brought to slash home,

673
00:12:11,240 --> 00:12:11,700
which is great.

674
00:12:11,820 --> 00:12:12,500
So let's go over here

675
00:12:12,500 --> 00:12:13,919
and delete this and enter

676
00:12:14,500 --> 00:12:14,759
and cool.

677
00:12:14,860 --> 00:12:15,600
I'm redirected again.

678
00:12:16,379 --> 00:12:17,360
So now we just need

679
00:12:17,360 --> 00:12:17,940
to find a way

680
00:12:17,940 --> 00:12:19,120
to log the user out.

681
00:12:21,740 --> 00:12:22,559
So I wrote, OK,

682
00:12:22,840 --> 00:12:23,460
this works great.

683
00:12:23,820 --> 00:12:24,639
Next to our theme

684
00:12:24,639 --> 00:12:25,519
button in the header,

685
00:12:25,759 --> 00:12:26,539
let's add an option

686
00:12:26,539 --> 00:12:27,580
that looks similar

687
00:12:27,620 --> 00:12:28,200
for logging

688
00:12:28,200 --> 00:12:28,899
the user out.

689
00:12:29,879 --> 00:12:30,120
All right.

690
00:12:30,220 --> 00:12:30,519
So I'm going to go

691
00:12:30,519 --> 00:12:31,360
ahead and accept this

692
00:12:31,360 --> 00:12:32,539
code to create a header.

693
00:12:32,740 --> 00:12:33,419
And inside this header,

694
00:12:33,500 --> 00:12:34,320
we have our theme toggle

695
00:12:34,320 --> 00:12:35,120
and then what looks

696
00:12:35,120 --> 00:12:36,059
like a log out button.

697
00:12:36,500 --> 00:12:36,940
It does have a

698
00:12:36,940 --> 00:12:37,659
handle sign out.

699
00:12:37,759 --> 00:12:38,559
So I'm sure we're

700
00:12:38,559 --> 00:12:38,980
going to be writing

701
00:12:38,980 --> 00:12:39,860
some logic for that.

702
00:12:39,980 --> 00:12:40,659
Oh, we're actually doing

703
00:12:40,659 --> 00:12:41,399
it in the header.

704
00:12:41,879 --> 00:12:43,059
It looks like it's a

705
00:12:43,059 --> 00:12:43,620
little button here.

706
00:12:44,299 --> 00:12:45,200
So basically a

707
00:12:45,200 --> 00:12:46,399
wait sign out off

708
00:12:46,960 --> 00:12:47,360
and then push.

709
00:12:47,799 --> 00:12:47,899
OK,

710
00:12:47,919 --> 00:12:48,559
so then it's basically

711
00:12:48,559 --> 00:12:49,320
going to route us back

712
00:12:49,320 --> 00:12:50,019
to that home page.

713
00:12:50,639 --> 00:12:50,840
All right.

714
00:12:50,879 --> 00:12:52,100
So let's also update

715
00:12:52,100 --> 00:12:53,820
the layout to have

716
00:12:53,820 --> 00:12:54,480
our header instead

717
00:12:54,480 --> 00:12:55,500
of just theme toggle.

718
00:12:56,139 --> 00:12:56,679
All right.

719
00:12:56,759 --> 00:12:57,840
So let's take

720
00:12:57,840 --> 00:12:58,299
a look at that.

721
00:12:58,580 --> 00:12:58,980
And if we come

722
00:12:58,980 --> 00:12:59,879
into the browser,

723
00:13:00,480 --> 00:13:00,600
OK,

724
00:13:00,779 --> 00:13:01,519
I don't see the

725
00:13:01,519 --> 00:13:02,179
log out button.

726
00:13:02,399 --> 00:13:04,139
So let's say don't

727
00:13:04,179 --> 00:13:05,639
see the log out button.

728
00:13:06,779 --> 00:13:07,500
The issue might be

729
00:13:07,500 --> 00:13:08,039
that we need

730
00:13:08,039 --> 00:13:09,080
to update the theme

731
00:13:09,080 --> 00:13:10,399
toggle component to remove

732
00:13:10,399 --> 00:13:11,759
its fixed positioning.

733
00:13:12,320 --> 00:13:12,460
OK,

734
00:13:12,659 --> 00:13:13,919
so it's probably there and

735
00:13:13,919 --> 00:13:14,899
we just can't see it.

736
00:13:15,240 --> 00:13:16,139
So let's apply

737
00:13:16,139 --> 00:13:16,879
this new code.

738
00:13:17,019 --> 00:13:18,100
OK, now we have our

739
00:13:18,100 --> 00:13:19,639
log out button and cool.

740
00:13:19,639 --> 00:13:20,240
It logs me out.

741
00:13:20,480 --> 00:13:21,019
Now let me see

742
00:13:21,019 --> 00:13:21,379
if I can

743
00:13:21,519 --> 00:13:22,659
access that home page

744
00:13:23,720 --> 00:13:24,200
and I cannot.

745
00:13:24,639 --> 00:13:24,740
Awesome.

746
00:13:25,139 --> 00:13:25,600
So now if I

747
00:13:25,600 --> 00:13:27,769
log in and I'm authenticated,

748
00:13:27,980 --> 00:13:28,759
now I'm brought back

749
00:13:28,759 --> 00:13:29,940
to home and I can't

750
00:13:29,940 --> 00:13:30,919
access the initial page.

751
00:13:31,940 --> 00:13:32,960
This is perfect.

752
00:13:33,159 --> 00:13:33,639
This is a pretty

753
00:13:33,639 --> 00:13:34,179
great start.

754
00:13:34,460 --> 00:13:36,000
We now have a working

755
00:13:36,000 --> 00:13:37,440
landing page that

756
00:13:37,440 --> 00:13:38,820
allows us to log in

757
00:13:38,820 --> 00:13:40,019
and log out with Google.

758
00:13:40,720 --> 00:13:40,860
So

759
00:13:41,659 --> 00:13:42,139
I think we're at

760
00:13:42,139 --> 00:13:42,919
a pretty good place

761
00:13:42,919 --> 00:13:43,580
to get started

762
00:13:43,580 --> 00:13:44,480
building the main

763
00:13:44,480 --> 00:13:45,799
functionality of this app.

764
00:13:51,879 --> 00:13:53,240
So with the authentication

765
00:13:53,240 --> 00:13:53,899
out of the way,

766
00:13:54,019 --> 00:13:54,740
let's try to work

767
00:13:54,740 --> 00:13:55,620
on the main functionality

768
00:13:55,620 --> 00:13:56,639
of this app.

769
00:13:57,059 --> 00:13:57,559
Is it just me

770
00:13:57,559 --> 00:13:57,919
or does this

771
00:13:57,919 --> 00:13:58,740
button not look sent?

772
00:13:58,840 --> 00:13:59,299
This button is

773
00:13:59,299 --> 00:13:59,720
not centered.

774
00:14:00,139 --> 00:14:00,460
Hold on.

775
00:14:00,740 --> 00:14:01,080
We're going to fix

776
00:14:01,080 --> 00:14:01,600
this real quick.

777
00:14:01,960 --> 00:14:03,279
This button needs

778
00:14:03,279 --> 00:14:04,720
to be centered.

779
00:14:05,360 --> 00:14:05,740
And actually,

780
00:14:05,799 --> 00:14:06,340
while we're here,

781
00:14:06,840 --> 00:14:08,220
let's make the button

782
00:14:08,220 --> 00:14:10,659
dark instead of using

783
00:14:10,659 --> 00:14:13,190
the app's primary color.

784
00:14:14,220 --> 00:14:14,940
Just because I think

785
00:14:15,299 --> 00:14:16,940
Google should just be dark.

786
00:14:17,980 --> 00:14:18,539
There we go.

787
00:14:19,200 --> 00:14:20,500
So let's log in to

788
00:14:20,500 --> 00:14:21,620
our app so that

789
00:14:21,620 --> 00:14:23,039
we're on the home page.

790
00:14:23,539 --> 00:14:23,539
And

791
00:14:24,200 --> 00:14:25,700
I guess let's figure

792
00:14:25,700 --> 00:14:26,259
out how we want

793
00:14:26,259 --> 00:14:27,740
this page to how

794
00:14:27,740 --> 00:14:28,580
we want this to look.

795
00:14:28,980 --> 00:14:29,240
All right.

796
00:14:29,299 --> 00:14:29,899
So I started off

797
00:14:29,899 --> 00:14:30,740
with a basic prompt.

798
00:14:30,879 --> 00:14:31,340
I just said,

799
00:14:31,559 --> 00:14:32,120
let's start building

800
00:14:32,120 --> 00:14:33,059
out our note app.

801
00:14:33,240 --> 00:14:33,580
Remember,

802
00:14:33,779 --> 00:14:34,519
I'd like to use

803
00:14:34,519 --> 00:14:35,620
a threads dot net slash

804
00:14:35,620 --> 00:14:36,899
Instagram field to it.

805
00:14:37,559 --> 00:14:38,059
Let's start off

806
00:14:38,059 --> 00:14:39,059
with a left panel,

807
00:14:39,059 --> 00:14:40,100
which holds all

808
00:14:40,100 --> 00:14:40,539
of our notes

809
00:14:41,360 --> 00:14:42,059
and a button at

810
00:14:42,059 --> 00:14:42,879
the top to

811
00:14:42,980 --> 00:14:43,659
add a new note

812
00:14:44,120 --> 00:14:44,899
on the right side

813
00:14:44,899 --> 00:14:45,960
is the current note

814
00:14:45,960 --> 00:14:46,899
that is visible, which

815
00:14:46,899 --> 00:14:47,960
by default is none.

816
00:14:48,240 --> 00:14:48,759
We'll go ahead and

817
00:14:48,759 --> 00:14:50,350
apply the page.

818
00:14:51,639 --> 00:14:52,639
OK, this kind of

819
00:14:52,639 --> 00:14:53,740
it's a great start.

820
00:14:54,919 --> 00:14:56,220
It's a great start.

821
00:14:56,879 --> 00:14:57,659
Oh, that's just

822
00:14:57,659 --> 00:14:58,379
really wide.

823
00:14:58,500 --> 00:14:58,889
It looks like,

824
00:14:59,519 --> 00:15:00,779
yeah, we can just say.

825
00:15:03,500 --> 00:15:05,019
Let's make the left

826
00:15:05,480 --> 00:15:07,159
panel a little smaller.

827
00:15:07,720 --> 00:15:08,480
We may also be

828
00:15:08,480 --> 00:15:09,899
zoomed in, mind you.

829
00:15:10,100 --> 00:15:10,580
Oh, no, we're not

830
00:15:10,580 --> 00:15:11,169
zoomed in anymore.

831
00:15:11,759 --> 00:15:12,159
Click apply.

832
00:15:13,419 --> 00:15:13,799
There we go.

833
00:15:14,679 --> 00:15:15,080
Awesome.

834
00:15:15,360 --> 00:15:16,220
Now, if we click new

835
00:15:16,220 --> 00:15:17,059
note, nothing happens.

836
00:15:17,440 --> 00:15:17,899
So I guess

837
00:15:18,440 --> 00:15:19,360
I guess we have

838
00:15:19,379 --> 00:15:19,980
to set that up.

839
00:15:20,399 --> 00:15:20,639
OK,

840
00:15:20,700 --> 00:15:21,600
so I wrote when

841
00:15:21,600 --> 00:15:22,539
clicking a new note,

842
00:15:22,600 --> 00:15:23,240
let's create a new

843
00:15:23,240 --> 00:15:24,240
note that's editable

844
00:15:24,240 --> 00:15:24,700
on the right.

845
00:15:25,179 --> 00:15:25,940
You can start with a

846
00:15:25,940 --> 00:15:27,120
preview card in the left

847
00:15:27,259 --> 00:15:28,360
panel and include the

848
00:15:28,360 --> 00:15:29,580
logged in users image

849
00:15:29,580 --> 00:15:30,539
as well as the

850
00:15:30,539 --> 00:15:31,960
title of the note and

851
00:15:31,960 --> 00:15:32,919
truncate some of the

852
00:15:32,919 --> 00:15:33,820
body of the note.

853
00:15:34,259 --> 00:15:34,480
So

854
00:15:35,120 --> 00:15:35,559
it looks like it's

855
00:15:35,559 --> 00:15:36,279
creating a note

856
00:15:36,279 --> 00:15:37,190
card component,

857
00:15:37,860 --> 00:15:38,519
which is pretty cool.

858
00:15:38,600 --> 00:15:39,600
I like that it's creating

859
00:15:39,600 --> 00:15:40,679
components for all of this.

860
00:15:41,440 --> 00:15:42,220
So let's see.

861
00:15:42,379 --> 00:15:42,700
We'll click

862
00:15:42,720 --> 00:15:43,340
apply to page.

863
00:15:43,340 --> 00:15:43,879
We'll take a look.

864
00:15:44,340 --> 00:15:44,960
OK, so we're setting

865
00:15:44,960 --> 00:15:46,210
up notes in state.

866
00:15:47,000 --> 00:15:47,860
We will eventually

867
00:15:47,860 --> 00:15:48,620
connect all of

868
00:15:48,620 --> 00:15:49,419
this to Firebase.

869
00:15:49,700 --> 00:15:50,240
We're just going to build

870
00:15:50,240 --> 00:15:51,480
out the full UI and

871
00:15:51,529 --> 00:15:52,360
experience first

872
00:15:52,360 --> 00:15:53,059
to make things a

873
00:15:53,059 --> 00:15:53,580
little bit easier.

874
00:15:54,179 --> 00:15:54,720
And then we'll worry

875
00:15:54,720 --> 00:15:55,659
about setting this all

876
00:15:55,659 --> 00:15:56,759
up into the database.

877
00:15:58,100 --> 00:15:58,519
So it looks like

878
00:15:58,519 --> 00:15:59,590
we have a function create

879
00:15:59,639 --> 00:16:00,720
new note and a

880
00:16:00,720 --> 00:16:01,659
new note includes an ID,

881
00:16:02,259 --> 00:16:03,279
a title, content,

882
00:16:03,740 --> 00:16:04,360
user image,

883
00:16:05,100 --> 00:16:06,320
created at and user ID.

884
00:16:06,480 --> 00:16:06,820
And it looks like

885
00:16:06,820 --> 00:16:07,519
some of the stuff is

886
00:16:07,519 --> 00:16:08,299
actually coming from

887
00:16:08,299 --> 00:16:08,789
our authentication.

888
00:16:09,379 --> 00:16:10,120
So that's that's

889
00:16:10,179 --> 00:16:10,500
pretty neat.

890
00:16:11,500 --> 00:16:12,519
Seems simple enough.

891
00:16:12,840 --> 00:16:13,220
Looks like we're getting

892
00:16:13,220 --> 00:16:13,860
an error, though.

893
00:16:13,940 --> 00:16:14,080
Oh,

894
00:16:14,720 --> 00:16:15,559
we have to install

895
00:16:15,559 --> 00:16:17,299
the date FNS package.

896
00:16:17,899 --> 00:16:18,440
So let's do that.

897
00:16:18,639 --> 00:16:18,860
All right.

898
00:16:18,899 --> 00:16:19,860
So I installed that

899
00:16:19,860 --> 00:16:20,659
and now it looks like

900
00:16:20,720 --> 00:16:21,580
our app is kind

901
00:16:21,580 --> 00:16:22,559
of back to normal here.

902
00:16:22,679 --> 00:16:24,419
So if we hit plus,

903
00:16:25,039 --> 00:16:25,860
OK,

904
00:16:26,580 --> 00:16:27,360
OK, I like the

905
00:16:27,360 --> 00:16:27,840
way this looks.

906
00:16:28,259 --> 00:16:28,899
I'm going to change a

907
00:16:28,899 --> 00:16:29,879
little bit of this here,

908
00:16:29,960 --> 00:16:30,259
but

909
00:16:31,000 --> 00:16:31,820
we could change this

910
00:16:31,820 --> 00:16:33,620
to my first note.

911
00:16:34,360 --> 00:16:34,720
Awesome.

912
00:16:35,440 --> 00:16:36,620
This is my very

913
00:16:36,620 --> 00:16:38,100
first note.

914
00:16:38,100 --> 00:16:39,100
OK, so this looks

915
00:16:39,100 --> 00:16:39,720
pretty cool.

916
00:16:40,559 --> 00:16:41,519
I'm not in love

917
00:16:41,519 --> 00:16:42,179
with the structure.

918
00:16:42,320 --> 00:16:42,919
So I wrote in

919
00:16:42,919 --> 00:16:43,600
the left panel,

920
00:16:43,740 --> 00:16:44,580
the note card should

921
00:16:44,580 --> 00:16:45,440
have the user's

922
00:16:45,440 --> 00:16:46,039
image on the left

923
00:16:46,039 --> 00:16:46,820
and then the title,

924
00:16:46,960 --> 00:16:47,980
body and date in

925
00:16:47,980 --> 00:16:48,679
the same column.

926
00:16:48,860 --> 00:16:49,200
So that looks

927
00:16:49,200 --> 00:16:49,580
pretty good.

928
00:16:49,720 --> 00:16:50,379
I like I like

929
00:16:50,379 --> 00:16:51,139
the way that this looks.

930
00:16:52,139 --> 00:16:53,399
I do want to go

931
00:16:53,399 --> 00:16:54,879
ahead and create another note.

932
00:16:55,399 --> 00:16:57,620
This is my second note.

933
00:16:59,440 --> 00:17:00,220
Hello, world.

934
00:17:00,759 --> 00:17:00,940
All right.

935
00:17:00,960 --> 00:17:01,440
Now, what happens

936
00:17:01,440 --> 00:17:02,019
if I click this?

937
00:17:02,460 --> 00:17:02,700
Does it?

938
00:17:03,080 --> 00:17:03,700
OK, cool.

939
00:17:03,940 --> 00:17:04,599
And it allows us to

940
00:17:04,599 --> 00:17:05,400
keep editing here,

941
00:17:05,420 --> 00:17:05,920
which is kind of

942
00:17:06,000 --> 00:17:06,960
neat and look good

943
00:17:06,960 --> 00:17:07,819
in light mode.

944
00:17:08,099 --> 00:17:08,700
Sure does.

945
00:17:09,880 --> 00:17:10,779
I do want to

946
00:17:10,779 --> 00:17:11,980
see our primary color

947
00:17:11,980 --> 00:17:12,700
a little bit more.

948
00:17:13,380 --> 00:17:15,460
Let's set the create

949
00:17:15,460 --> 00:17:17,240
new note button to

950
00:17:17,240 --> 00:17:19,539
use the primary color.

951
00:17:20,019 --> 00:17:20,240
Cool.

952
00:17:20,559 --> 00:17:21,200
So now we have our

953
00:17:21,200 --> 00:17:22,200
main color here.

954
00:17:22,740 --> 00:17:23,079
I think that

955
00:17:23,079 --> 00:17:23,700
looks pretty good.

956
00:17:24,359 --> 00:17:24,940
And actually,

957
00:17:25,000 --> 00:17:25,579
now that I'm kind of

958
00:17:25,579 --> 00:17:26,539
seeing it with all this,

959
00:17:27,039 --> 00:17:27,859
it doesn't look.

960
00:17:29,279 --> 00:17:30,019
You know, I'm not

961
00:17:30,019 --> 00:17:32,619
really feeling the sky color.

962
00:17:32,759 --> 00:17:33,119
Maybe we could

963
00:17:33,119 --> 00:17:34,119
change it to Emerald.

964
00:17:36,680 --> 00:17:37,559
Or maybe Indigo.

965
00:17:40,539 --> 00:17:41,359
Indigo looks pretty good

966
00:17:41,359 --> 00:17:42,220
with this dark mode.

967
00:17:42,599 --> 00:17:43,220
It looks pretty good.

968
00:17:43,299 --> 00:17:43,900
Like mode, maybe we'll

969
00:17:43,900 --> 00:17:44,400
just go with Indigo.

970
00:17:45,579 --> 00:17:47,500
But that's the beauty of

971
00:17:47,579 --> 00:17:48,339
using these variables.

972
00:17:48,640 --> 00:17:48,920
Also,

973
00:17:49,119 --> 00:17:50,539
we can say slate

974
00:17:50,539 --> 00:17:52,140
and now our entire

975
00:17:52,140 --> 00:17:53,740
secondary color,

976
00:17:53,940 --> 00:17:54,799
which for our UI

977
00:17:54,799 --> 00:17:56,140
is all updated and

978
00:17:56,140 --> 00:17:56,920
everything just looks good

979
00:17:57,180 --> 00:17:57,640
right out the box.

980
00:17:58,099 --> 00:17:58,619
But just wanted to

981
00:17:58,619 --> 00:17:59,240
show you the power

982
00:17:59,240 --> 00:18:00,119
of setting up your

983
00:18:00,180 --> 00:18:00,779
tail in this way.

984
00:18:01,140 --> 00:18:01,759
And this is just

985
00:18:01,759 --> 00:18:03,900
another advantage of knowing a

986
00:18:03,900 --> 00:18:04,500
little bit of code

987
00:18:05,180 --> 00:18:05,680
even if you're going

988
00:18:05,680 --> 00:18:06,720
to use something like

989
00:18:06,819 --> 00:18:07,740
cursor to build something

990
00:18:07,759 --> 00:18:08,900
out completely for you.

991
00:18:09,700 --> 00:18:09,980
All right,

992
00:18:10,079 --> 00:18:11,640
so we basically have

993
00:18:12,000 --> 00:18:13,059
the functionality that we

994
00:18:13,140 --> 00:18:13,839
want with this app.

995
00:18:13,940 --> 00:18:14,680
The only other thing I

996
00:18:14,680 --> 00:18:15,339
want to add to

997
00:18:15,339 --> 00:18:16,779
the functionality for the nodes

998
00:18:16,779 --> 00:18:17,460
is to be able to

999
00:18:17,640 --> 00:18:18,420
delete a note.

1000
00:18:19,279 --> 00:18:19,880
So I just wrote,

1001
00:18:20,099 --> 00:18:21,019
can you give me the

1002
00:18:21,119 --> 00:18:22,240
option to delete a note?

1003
00:18:22,400 --> 00:18:23,579
I'd like a confirmation

1004
00:18:23,579 --> 00:18:23,960
before

1005
00:18:23,960 --> 00:18:24,900
actually deleting it.

1006
00:18:25,940 --> 00:18:26,440
So it looks like

1007
00:18:26,440 --> 00:18:27,200
it's creating a

1008
00:18:27,200 --> 00:18:28,299
delete note modal.

1009
00:18:28,559 --> 00:18:29,200
So I'm guessing we're

1010
00:18:29,200 --> 00:18:29,500
going to have some

1011
00:18:29,500 --> 00:18:30,240
sort of modal when we

1012
00:18:30,240 --> 00:18:30,960
go to delete a note.

1013
00:18:31,299 --> 00:18:32,119
Let's create that.

1014
00:18:32,309 --> 00:18:33,299
And it looks like

1015
00:18:33,299 --> 00:18:34,769
inside of the page component,

1016
00:18:34,960 --> 00:18:37,140
we're probably adding some

1017
00:18:37,140 --> 00:18:38,680
sort of way to delete

1018
00:18:39,500 --> 00:18:39,799
the note.

1019
00:18:40,339 --> 00:18:41,099
OK, so we get

1020
00:18:41,099 --> 00:18:43,240
a big red button here.

1021
00:18:44,440 --> 00:18:45,319
This is my

1022
00:18:45,319 --> 00:18:47,240
first ever note.

1023
00:18:47,930 --> 00:18:48,339
Let's create

1024
00:18:48,339 --> 00:18:48,700
a second one.

1025
00:18:49,740 --> 00:18:50,539
Second note.

1026
00:18:52,019 --> 00:18:52,240
All right,

1027
00:18:52,319 --> 00:18:52,980
so if I would go

1028
00:18:52,980 --> 00:18:54,240
to delete the first note,

1029
00:18:55,380 --> 00:18:55,819
delete note,

1030
00:18:56,019 --> 00:18:56,539
are you sure you

1031
00:18:56,539 --> 00:18:57,460
want to delete this note?

1032
00:18:57,559 --> 00:18:57,900
This action

1033
00:18:57,900 --> 00:18:58,779
cannot be undone.

1034
00:18:59,539 --> 00:19:00,500
I really like this UI.

1035
00:19:00,509 --> 00:19:01,920
I like that I

1036
00:19:01,920 --> 00:19:03,440
can just kind of initially

1037
00:19:03,470 --> 00:19:05,059
prompt cursor with how I

1038
00:19:05,059 --> 00:19:06,000
want my UI to look.

1039
00:19:06,579 --> 00:19:07,220
And I just I

1040
00:19:07,220 --> 00:19:08,440
get it just looks great.

1041
00:19:08,619 --> 00:19:09,210
It looks great.

1042
00:19:09,960 --> 00:19:10,420
All right, so let's

1043
00:19:10,420 --> 00:19:11,079
go ahead and delete it

1044
00:19:11,079 --> 00:19:11,500
and make sure that

1045
00:19:11,500 --> 00:19:12,420
actually works cool.

1046
00:19:12,720 --> 00:19:13,059
And it does.

1047
00:19:13,599 --> 00:19:13,759
That's awesome.

1048
00:19:14,660 --> 00:19:14,880
All right,

1049
00:19:14,880 --> 00:19:15,730
so I think honestly,

1050
00:19:16,019 --> 00:19:16,220
I mean,

1051
00:19:16,240 --> 00:19:16,670
if we refresh,

1052
00:19:16,960 --> 00:19:17,180
we're going to

1053
00:19:17,180 --> 00:19:17,660
lose our data.

1054
00:19:17,880 --> 00:19:18,380
We're not setting

1055
00:19:18,380 --> 00:19:19,259
this in local storage

1056
00:19:19,279 --> 00:19:20,119
because we're going to eventually

1057
00:19:20,119 --> 00:19:20,880
set this in our database.

1058
00:19:21,759 --> 00:19:22,240
So I think that's

1059
00:19:22,240 --> 00:19:22,750
the next step.

1060
00:19:23,180 --> 00:19:23,779
So now that we got

1061
00:19:23,779 --> 00:19:24,299
pretty much all

1062
00:19:24,299 --> 00:19:24,700
the functionality

1063
00:19:24,700 --> 00:19:25,720
that we want out

1064
00:19:25,720 --> 00:19:26,940
of our basic note app,

1065
00:19:27,240 --> 00:19:28,240
let's set this up

1066
00:19:28,440 --> 00:19:29,420
to work with our

1067
00:19:29,420 --> 00:19:30,480
Firebase database.

1068
00:19:31,259 --> 00:19:31,980
And then I think

1069
00:19:31,980 --> 00:19:32,380
it'll be time

1070
00:19:32,380 --> 00:19:33,279
to host this app.

1071
00:19:38,539 --> 00:19:39,619
All right.

1072
00:19:39,859 --> 00:19:40,579
So as I mentioned

1073
00:19:40,579 --> 00:19:41,059
earlier,

1074
00:19:41,220 --> 00:19:41,619
I think it's

1075
00:19:41,619 --> 00:19:42,519
time to start

1076
00:19:43,279 --> 00:19:43,799
getting some of

1077
00:19:43,799 --> 00:19:45,079
this data into our

1078
00:19:45,079 --> 00:19:46,140
database so that we

1079
00:19:46,140 --> 00:19:47,680
can actually have it

1080
00:19:48,099 --> 00:19:48,819
every time we load

1081
00:19:48,819 --> 00:19:49,680
up our notes app.

1082
00:19:50,339 --> 00:19:51,299
So I told cursor

1083
00:19:51,299 --> 00:19:53,220
this is all working perfectly.

1084
00:19:53,819 --> 00:19:54,500
Now I want to start

1085
00:19:54,579 --> 00:19:55,480
storing this data

1086
00:19:55,480 --> 00:19:56,250
in my database.

1087
00:19:56,369 --> 00:19:57,480
I'm new to Firebase,

1088
00:19:57,880 --> 00:19:58,700
so help me understand

1089
00:19:58,700 --> 00:19:59,759
what needs to be done

1090
00:19:59,759 --> 00:20:01,160
within my Firebase

1091
00:20:01,160 --> 00:20:02,359
console as well.

1092
00:20:03,079 --> 00:20:03,460
I want to be

1093
00:20:03,460 --> 00:20:04,160
able to create a

1094
00:20:04,160 --> 00:20:05,440
note, read a note,

1095
00:20:05,819 --> 00:20:06,839
update a note and delete

1096
00:20:06,839 --> 00:20:07,720
a note from my database.

1097
00:20:08,259 --> 00:20:08,720
And these are all

1098
00:20:08,720 --> 00:20:09,420
things that we're currently

1099
00:20:09,420 --> 00:20:10,160
doing in the app.

1100
00:20:10,819 --> 00:20:11,380
I want my notes

1101
00:20:11,380 --> 00:20:12,200
to be tied to

1102
00:20:12,200 --> 00:20:13,500
my logged in user.

1103
00:20:13,880 --> 00:20:14,819
So let's just go

1104
00:20:14,819 --> 00:20:15,799
through the options that

1105
00:20:15,799 --> 00:20:16,299
it gives us here.

1106
00:20:17,039 --> 00:20:17,579
I'll help you set

1107
00:20:17,579 --> 00:20:18,430
up a firestore

1108
00:20:18,440 --> 00:20:19,480
database and integrate

1109
00:20:19,480 --> 00:20:20,220
it with your app.

1110
00:20:20,500 --> 00:20:20,960
First,

1111
00:20:21,359 --> 00:20:21,940
in your Firebase

1112
00:20:21,940 --> 00:20:22,599
console,

1113
00:20:22,839 --> 00:20:24,380
go to firestore database

1114
00:20:24,380 --> 00:20:25,259
in the left sidebar.

1115
00:20:26,599 --> 00:20:27,039
So I do

1116
00:20:27,039 --> 00:20:27,640
see it here.

1117
00:20:27,779 --> 00:20:28,579
And if you don't

1118
00:20:28,579 --> 00:20:29,259
see this here,

1119
00:20:29,299 --> 00:20:30,079
just go to build

1120
00:20:30,599 --> 00:20:31,450
and you'll see firestore

1121
00:20:31,759 --> 00:20:32,940
database there as well.

1122
00:20:33,660 --> 00:20:34,220
So click that

1123
00:20:34,220 --> 00:20:35,640
create database.

1124
00:20:36,059 --> 00:20:36,160
Okay,

1125
00:20:36,720 --> 00:20:37,140
we'll do that.

1126
00:20:38,019 --> 00:20:38,720
Start in

1127
00:20:38,720 --> 00:20:39,460
production mode.

1128
00:20:45,519 --> 00:20:46,220
So this should not

1129
00:20:46,220 --> 00:20:47,480
take very long at all.

1130
00:20:47,480 --> 00:20:48,000
And then we should

1131
00:20:48,039 --> 00:20:48,619
be thrown into our

1132
00:20:48,619 --> 00:20:49,779
new cloud firestore.

1133
00:20:50,339 --> 00:20:50,799
Awesome.

1134
00:20:51,039 --> 00:20:51,440
Next,

1135
00:20:51,599 --> 00:20:52,019
we need to set

1136
00:20:52,019 --> 00:20:53,480
up security rules for

1137
00:20:53,599 --> 00:20:55,140
firestore in the firebase

1138
00:20:55,140 --> 00:20:55,240
console,

1139
00:20:55,660 --> 00:20:56,680
go to firestore database

1140
00:20:56,680 --> 00:20:58,920
rules and update them.

1141
00:21:00,099 --> 00:21:00,759
All right, so let's

1142
00:21:00,759 --> 00:21:01,319
go to the rules.

1143
00:21:01,920 --> 00:21:02,799
Let's go ahead

1144
00:21:02,799 --> 00:21:04,220
and copy this.

1145
00:21:04,799 --> 00:21:05,440
And I think what we'll

1146
00:21:05,440 --> 00:21:06,079
need to do is

1147
00:21:06,079 --> 00:21:07,259
just paste this in here,

1148
00:21:07,940 --> 00:21:08,279
hit publish.

1149
00:21:08,980 --> 00:21:09,599
These rules ensure

1150
00:21:09,599 --> 00:21:10,579
that users can only

1151
00:21:10,619 --> 00:21:11,099
read and write

1152
00:21:11,099 --> 00:21:12,299
notes that they own,

1153
00:21:12,680 --> 00:21:13,599
create notes with

1154
00:21:13,599 --> 00:21:14,660
their own user ID.

1155
00:21:15,380 --> 00:21:15,619
All right,

1156
00:21:15,680 --> 00:21:16,559
so now let's create

1157
00:21:16,559 --> 00:21:17,940
a firebase service for

1158
00:21:17,940 --> 00:21:18,880
handling the notes.

1159
00:21:19,799 --> 00:21:20,019
All right,

1160
00:21:20,059 --> 00:21:21,579
so we are going to

1161
00:21:21,579 --> 00:21:23,680
create this notes.js file.

1162
00:21:23,680 --> 00:21:25,359
And then inside of

1163
00:21:25,359 --> 00:21:27,359
our firebase.js file,

1164
00:21:27,420 --> 00:21:28,819
we're going to import,

1165
00:21:29,000 --> 00:21:29,720
get firestore.

1166
00:21:29,799 --> 00:21:30,079
So we're going to

1167
00:21:30,119 --> 00:21:30,880
have access to that data.

1168
00:21:31,819 --> 00:21:32,220
And then we're going to

1169
00:21:32,220 --> 00:21:33,210
export that database.

1170
00:21:34,460 --> 00:21:35,539
And for our page,

1171
00:21:35,619 --> 00:21:36,759
it looks like we are.

1172
00:21:37,799 --> 00:21:38,019
All right,

1173
00:21:38,019 --> 00:21:38,579
so it looks like

1174
00:21:38,579 --> 00:21:39,960
we are pulling create note,

1175
00:21:40,140 --> 00:21:40,660
update note,

1176
00:21:40,819 --> 00:21:41,299
delete note

1177
00:21:41,299 --> 00:21:42,980
and subscribe from

1178
00:21:42,980 --> 00:21:44,559
our notes.js file

1179
00:21:44,559 --> 00:21:45,119
that we created.

1180
00:21:45,559 --> 00:21:46,380
So this implementation

1181
00:21:46,380 --> 00:21:47,900
does the following.

1182
00:21:48,799 --> 00:21:49,839
Uses firestore for

1183
00:21:49,839 --> 00:21:50,579
CRUD operations,

1184
00:21:51,119 --> 00:21:51,799
subscribes to

1185
00:21:51,799 --> 00:21:52,700
real time updates.

1186
00:21:53,140 --> 00:21:54,359
It also ties notes to

1187
00:21:54,359 --> 00:21:55,200
authenticated users,

1188
00:21:55,200 --> 00:21:57,019
maintains all existing

1189
00:21:57,019 --> 00:21:57,140
functionality,

1190
00:21:58,440 --> 00:21:58,960
adds proper

1191
00:21:58,980 --> 00:21:59,779
error handling,

1192
00:22:00,200 --> 00:22:00,940
updates the UI in

1193
00:22:00,940 --> 00:22:01,960
real time when changes occur.

1194
00:22:02,619 --> 00:22:02,980
Okay, cool.

1195
00:22:03,039 --> 00:22:03,839
So this seems to

1196
00:22:03,839 --> 00:22:05,299
be everything that we need.

1197
00:22:05,619 --> 00:22:06,279
Let's go over here

1198
00:22:06,279 --> 00:22:06,680
and make sure

1199
00:22:06,680 --> 00:22:07,259
it's still working.

1200
00:22:08,400 --> 00:22:08,720
And it is.

1201
00:22:09,200 --> 00:22:10,299
So that's good so far.

1202
00:22:10,559 --> 00:22:10,839
All right.

1203
00:22:11,099 --> 00:22:11,380
Uh-oh.

1204
00:22:11,480 --> 00:22:12,240
We do have an error.

1205
00:22:12,420 --> 00:22:12,779
I didn't even

1206
00:22:12,779 --> 00:22:13,460
do anything yet.

1207
00:22:14,160 --> 00:22:15,480
So it says at

1208
00:22:15,480 --> 00:22:16,619
firebase firestore,

1209
00:22:16,839 --> 00:22:18,039
firestore uncot error.

1210
00:22:19,180 --> 00:22:19,599
The query

1211
00:22:19,599 --> 00:22:21,359
requires an index.

1212
00:22:21,660 --> 00:22:22,779
You can create it here.

1213
00:22:23,539 --> 00:22:24,160
Go ahead and copy

1214
00:22:24,180 --> 00:22:25,039
this error message

1215
00:22:25,039 --> 00:22:25,700
that we're getting

1216
00:22:26,960 --> 00:22:27,400
and just paste

1217
00:22:27,400 --> 00:22:27,799
it in here

1218
00:22:27,799 --> 00:22:28,240
and just say,

1219
00:22:29,019 --> 00:22:30,779
I'm getting this error

1220
00:22:30,779 --> 00:22:32,640
when the page loads.

1221
00:22:34,099 --> 00:22:34,740
The error occurs

1222
00:22:34,740 --> 00:22:36,059
because firestore needs

1223
00:22:36,059 --> 00:22:37,880
a composite index

1224
00:22:37,880 --> 00:22:38,759
for the query we're

1225
00:22:38,759 --> 00:22:40,000
using in subscribe

1226
00:22:40,000 --> 00:22:40,700
to notes.

1227
00:22:40,960 --> 00:22:41,640
You can fix this

1228
00:22:41,640 --> 00:22:42,259
in two ways.

1229
00:22:42,380 --> 00:22:42,960
In easy way,

1230
00:22:43,400 --> 00:22:44,160
click the link in

1231
00:22:44,160 --> 00:22:44,779
the error message.

1232
00:22:44,779 --> 00:22:45,420
It will take you

1233
00:22:45,420 --> 00:22:46,660
directly to the firestore

1234
00:22:46,660 --> 00:22:47,319
where you can

1235
00:22:47,319 --> 00:22:48,420
create the required

1236
00:22:48,420 --> 00:22:50,160
index, just click create

1237
00:22:50,160 --> 00:22:51,140
index on that page.

1238
00:22:51,759 --> 00:22:52,039
Okay.

1239
00:22:52,099 --> 00:22:52,900
So if we go with

1240
00:22:52,900 --> 00:22:53,680
the easy route,

1241
00:22:54,039 --> 00:22:55,319
we click this link here,

1242
00:22:55,339 --> 00:22:56,059
which I already did.

1243
00:22:56,220 --> 00:22:56,799
And it created

1244
00:22:56,799 --> 00:22:57,940
this index for us,

1245
00:22:58,799 --> 00:22:59,599
which is good.

1246
00:22:59,740 --> 00:23:00,700
It's not working yet.

1247
00:23:00,980 --> 00:23:01,640
Like if I go back

1248
00:23:01,640 --> 00:23:02,869
and I refresh the page,

1249
00:23:03,140 --> 00:23:03,680
eventually we're going

1250
00:23:03,680 --> 00:23:04,279
to get that error

1251
00:23:04,279 --> 00:23:04,579
again.

1252
00:23:05,240 --> 00:23:06,440
And I think it's due

1253
00:23:06,440 --> 00:23:08,059
to this status right here.

1254
00:23:08,140 --> 00:23:08,960
It says it's building.

1255
00:23:09,140 --> 00:23:09,720
So I don't think this

1256
00:23:09,720 --> 00:23:10,500
is completed yet.

1257
00:23:11,160 --> 00:23:11,599
Oh,

1258
00:23:12,440 --> 00:23:12,920
now it is.

1259
00:23:13,140 --> 00:23:13,779
It should work now.

1260
00:23:15,039 --> 00:23:15,539
Hopefully.

1261
00:23:17,259 --> 00:23:17,759
Okay.

1262
00:23:18,000 --> 00:23:18,259
Cool.

1263
00:23:18,519 --> 00:23:19,420
No errors, no

1264
00:23:19,420 --> 00:23:19,900
errors yet.

1265
00:23:20,099 --> 00:23:20,460
That's awesome.

1266
00:23:21,220 --> 00:23:21,440
All right.

1267
00:23:21,460 --> 00:23:21,759
So let's go

1268
00:23:21,759 --> 00:23:22,400
ahead and create.

1269
00:23:25,519 --> 00:23:26,019
Okay.

1270
00:23:26,079 --> 00:23:26,500
So let's do what

1271
00:23:26,500 --> 00:23:26,900
we got here.

1272
00:23:27,359 --> 00:23:27,579
All right.

1273
00:23:27,640 --> 00:23:28,710
So let's just copy this

1274
00:23:29,880 --> 00:23:30,440
and let's explain

1275
00:23:30,440 --> 00:23:31,019
this to cursor.

1276
00:23:31,880 --> 00:23:32,799
When I try

1277
00:23:34,559 --> 00:23:36,180
to create a new

1278
00:23:36,180 --> 00:23:38,079
note, I get this error.

1279
00:23:38,400 --> 00:23:39,099
And let's just

1280
00:23:39,099 --> 00:23:40,019
paste in this error.

1281
00:23:40,460 --> 00:23:41,059
So it says this

1282
00:23:41,059 --> 00:23:42,079
error occurs because

1283
00:23:42,079 --> 00:23:43,539
firestore's time stamp

1284
00:23:43,539 --> 00:23:44,299
needs to be converted

1285
00:23:44,299 --> 00:23:45,039
to a JavaScript

1286
00:23:45,039 --> 00:23:46,240
date object before

1287
00:23:46,240 --> 00:23:47,940
being passed to format

1288
00:23:47,940 --> 00:23:49,259
distance to now.

1289
00:23:50,039 --> 00:23:50,680
Let's fix this in

1290
00:23:50,680 --> 00:23:51,579
both the note card

1291
00:23:51,579 --> 00:23:52,519
component and where

1292
00:23:52,519 --> 00:23:53,380
we create the note.

1293
00:23:53,539 --> 00:23:53,680
All right.

1294
00:23:53,700 --> 00:23:54,460
Let's accept that

1295
00:23:54,460 --> 00:23:55,420
in the note card

1296
00:23:55,420 --> 00:23:56,460
and let's also accept

1297
00:23:56,460 --> 00:23:57,180
it in the page.

1298
00:23:58,140 --> 00:23:58,680
That might be

1299
00:23:58,680 --> 00:23:59,019
everything.

1300
00:23:59,500 --> 00:23:59,619
Okay.

1301
00:23:59,740 --> 00:24:00,059
Cool.

1302
00:24:01,019 --> 00:24:01,500
Let's let's

1303
00:24:01,500 --> 00:24:01,960
just refresh.

1304
00:24:02,599 --> 00:24:02,700
Okay.

1305
00:24:02,759 --> 00:24:03,279
So let's create

1306
00:24:03,279 --> 00:24:03,819
a new one.

1307
00:24:04,200 --> 00:24:04,319
Okay.

1308
00:24:04,359 --> 00:24:05,180
We'll call this one

1309
00:24:05,180 --> 00:24:08,440
my second note ever.

1310
00:24:09,039 --> 00:24:09,279
All right.

1311
00:24:09,339 --> 00:24:09,859
So we are having

1312
00:24:09,859 --> 00:24:10,420
some issues.

1313
00:24:11,160 --> 00:24:11,960
I think it has

1314
00:24:11,960 --> 00:24:13,099
something to do with

1315
00:24:13,299 --> 00:24:14,779
saving and grabbing

1316
00:24:14,779 --> 00:24:15,440
the state back.

1317
00:24:15,599 --> 00:24:15,960
It looks like I'm

1318
00:24:15,980 --> 00:24:17,450
losing characters as I type.

1319
00:24:18,019 --> 00:24:18,500
So that's an

1320
00:24:18,500 --> 00:24:19,720
interesting issue here.

1321
00:24:19,819 --> 00:24:21,140
But if we hit refresh,

1322
00:24:22,059 --> 00:24:22,720
we do still have

1323
00:24:22,720 --> 00:24:23,180
our note here.

1324
00:24:23,640 --> 00:24:24,099
We also have

1325
00:24:24,099 --> 00:24:24,759
this note here,

1326
00:24:24,779 --> 00:24:25,559
which is pretty cool.

1327
00:24:25,680 --> 00:24:26,359
And I think we

1328
00:24:26,359 --> 00:24:26,980
can delete notes.

1329
00:24:28,180 --> 00:24:28,900
So it looks like we

1330
00:24:28,900 --> 00:24:29,740
have our basic

1331
00:24:29,740 --> 00:24:30,680
functionality working.

1332
00:24:31,559 --> 00:24:32,299
There is that weird

1333
00:24:32,299 --> 00:24:33,319
typing bug, though.

1334
00:24:33,440 --> 00:24:34,539
So let's let's explain

1335
00:24:34,539 --> 00:24:35,319
that to cursor and

1336
00:24:35,319 --> 00:24:35,980
see what's going on.

1337
00:24:36,319 --> 00:24:36,640
Okay.

1338
00:24:36,700 --> 00:24:37,700
So I wrote looks like

1339
00:24:37,700 --> 00:24:38,680
all my credit operations

1340
00:24:38,700 --> 00:24:39,440
are working perfectly.

1341
00:24:39,599 --> 00:24:40,680
The only issue I

1342
00:24:40,680 --> 00:24:41,579
see is that while I'm

1343
00:24:41,579 --> 00:24:42,700
typing in the title

1344
00:24:42,700 --> 00:24:43,599
or the body field,

1345
00:24:44,259 --> 00:24:44,740
sometimes I

1346
00:24:44,740 --> 00:24:45,400
lose letters.

1347
00:24:45,660 --> 00:24:46,339
I think this could

1348
00:24:46,339 --> 00:24:47,480
be due to updating

1349
00:24:47,480 --> 00:24:48,339
in real time.

1350
00:24:49,119 --> 00:24:49,920
Maybe we could try,

1351
00:24:50,359 --> 00:24:51,319
maybe we could have a

1352
00:24:51,319 --> 00:24:52,519
bounce delay implemented.

1353
00:24:52,799 --> 00:24:53,460
And basically what that

1354
00:24:53,460 --> 00:24:54,660
is is instead of

1355
00:24:54,660 --> 00:24:56,019
something updating every

1356
00:24:56,019 --> 00:24:56,640
time you type,

1357
00:24:56,859 --> 00:24:57,420
we could have like

1358
00:24:57,420 --> 00:24:58,839
a three second delay

1359
00:24:59,299 --> 00:25:00,380
or something like that

1360
00:25:00,779 --> 00:25:01,140
before it updates.

1361
00:25:01,519 --> 00:25:02,079
That way it doesn't have

1362
00:25:02,079 --> 00:25:03,180
to update as you type.

1363
00:25:03,539 --> 00:25:04,359
Yes, we can implement.

1364
00:25:04,579 --> 00:25:04,960
Oh, it's called

1365
00:25:04,960 --> 00:25:05,259
debouncing.

1366
00:25:05,799 --> 00:25:05,960
Okay.

1367
00:25:06,000 --> 00:25:06,460
Well, at least it

1368
00:25:06,460 --> 00:25:06,940
knew what I meant.

1369
00:25:07,200 --> 00:25:07,599
So that's cool.

1370
00:25:07,599 --> 00:25:07,700
Yes,

1371
00:25:08,480 --> 00:25:09,160
we can implement

1372
00:25:09,640 --> 00:25:10,359
debouncing to reduce

1373
00:25:10,359 --> 00:25:11,200
the frequency of

1374
00:25:11,400 --> 00:25:12,119
updates while typing.

1375
00:25:12,519 --> 00:25:13,579
Let's create custom

1376
00:25:13,579 --> 00:25:14,960
hook for debouncing

1377
00:25:14,960 --> 00:25:15,720
and update the

1378
00:25:15,799 --> 00:25:16,759
homepage to use it.

1379
00:25:16,900 --> 00:25:17,220
Okay, cool.

1380
00:25:17,400 --> 00:25:17,720
So we're going to

1381
00:25:17,720 --> 00:25:18,579
create a new hook

1382
00:25:19,119 --> 00:25:20,059
called use debounce,

1383
00:25:20,930 --> 00:25:21,599
which I think is

1384
00:25:21,599 --> 00:25:22,319
such a cool word.

1385
00:25:23,460 --> 00:25:23,839
And then we're going

1386
00:25:23,839 --> 00:25:24,680
to update our page

1387
00:25:24,680 --> 00:25:25,799
component to use it.

1388
00:25:26,299 --> 00:25:26,700
Awesome.

1389
00:25:26,960 --> 00:25:27,140
All right.

1390
00:25:27,160 --> 00:25:27,720
So do have our

1391
00:25:27,720 --> 00:25:29,059
old note here.

1392
00:25:29,200 --> 00:25:29,619
Let's just go ahead

1393
00:25:29,619 --> 00:25:30,099
and delete it.

1394
00:25:31,000 --> 00:25:31,619
Make sure everything's

1395
00:25:31,619 --> 00:25:32,319
working just right.

1396
00:25:33,019 --> 00:25:33,180
All right.

1397
00:25:33,180 --> 00:25:33,400
We're going to

1398
00:25:33,400 --> 00:25:34,059
create a new note.

1399
00:25:34,059 --> 00:25:34,319
I'm going to

1400
00:25:34,319 --> 00:25:36,799
say this is my

1401
00:25:38,160 --> 00:25:39,579
first ever note.

1402
00:25:40,299 --> 00:25:40,500
All right.

1403
00:25:40,579 --> 00:25:41,299
So far so good.

1404
00:25:42,299 --> 00:25:44,180
This is my first note

1405
00:25:44,180 --> 00:25:46,279
in the new notes app.

1406
00:25:46,700 --> 00:25:47,660
I think this

1407
00:25:47,900 --> 00:25:49,119
app is awesome.

1408
00:25:49,799 --> 00:25:49,940
All right.

1409
00:25:50,000 --> 00:25:50,339
Let's go ahead

1410
00:25:50,339 --> 00:25:50,740
and refresh.

1411
00:25:51,640 --> 00:25:51,799
Cool.

1412
00:25:51,880 --> 00:25:52,220
We still see

1413
00:25:52,220 --> 00:25:52,680
our note here.

1414
00:25:53,420 --> 00:25:53,759
Let's go over

1415
00:25:53,759 --> 00:25:54,410
here and create.

1416
00:25:57,240 --> 00:25:58,119
All right.

1417
00:25:58,160 --> 00:25:58,259
Cool.

1418
00:25:58,339 --> 00:25:58,920
So we do have our

1419
00:25:58,920 --> 00:25:59,420
notes working.

1420
00:25:59,759 --> 00:26:00,059
Looks like

1421
00:26:00,779 --> 00:26:01,640
I do want to see

1422
00:26:01,640 --> 00:26:02,599
if I can log

1423
00:26:02,599 --> 00:26:04,039
out and log back in.

1424
00:26:04,059 --> 00:26:05,140
Without any issues.

1425
00:26:05,980 --> 00:26:06,420
Okay.

1426
00:26:06,440 --> 00:26:06,720
Awesome.

1427
00:26:06,799 --> 00:26:07,460
So this is working.

1428
00:26:08,019 --> 00:26:08,319
There's really

1429
00:26:08,319 --> 00:26:09,500
only one small like

1430
00:26:09,740 --> 00:26:10,920
minor UI tweak.

1431
00:26:11,200 --> 00:26:12,059
And that's the

1432
00:26:12,059 --> 00:26:13,259
trash button.

1433
00:26:13,819 --> 00:26:14,440
How it shows up

1434
00:26:14,480 --> 00:26:15,599
on top right here.

1435
00:26:16,140 --> 00:26:17,140
That's a super easy fix.

1436
00:26:17,359 --> 00:26:18,039
And it's so cosmetic.

1437
00:26:18,200 --> 00:26:18,599
I'm not going to

1438
00:26:18,599 --> 00:26:19,099
worry about it.

1439
00:26:19,099 --> 00:26:19,740
But other than that,

1440
00:26:19,759 --> 00:26:20,400
I think this app

1441
00:26:20,400 --> 00:26:20,859
looks really,

1442
00:26:20,900 --> 00:26:21,339
really good.

1443
00:26:21,660 --> 00:26:22,759
So I think now let's

1444
00:26:22,759 --> 00:26:23,539
let's see if we

1445
00:26:23,539 --> 00:26:24,440
can go host this app.

1446
00:26:29,380 --> 00:26:30,259
All right.

1447
00:26:30,259 --> 00:26:31,660
So the first step to

1448
00:26:31,660 --> 00:26:32,819
getting our project

1449
00:26:32,819 --> 00:26:34,519
hosted is to actually

1450
00:26:34,519 --> 00:26:35,500
get the project up

1451
00:26:35,640 --> 00:26:35,980
on GitHub.

1452
00:26:36,500 --> 00:26:36,819
So I'm going to

1453
00:26:36,819 --> 00:26:38,059
go to my GitHub and

1454
00:26:38,059 --> 00:26:39,119
create a new project.

1455
00:26:39,279 --> 00:26:39,680
I'll just call

1456
00:26:39,680 --> 00:26:40,380
this notes.

1457
00:26:41,079 --> 00:26:41,740
And I'll just say

1458
00:26:41,740 --> 00:26:44,220
a simple note taking app.

1459
00:26:45,420 --> 00:26:45,980
And I'll go ahead

1460
00:26:45,980 --> 00:26:47,259
and just click create repo.

1461
00:26:48,000 --> 00:26:48,559
And what we'll do

1462
00:26:48,559 --> 00:26:49,160
is we'll go ahead

1463
00:26:49,160 --> 00:26:50,079
and copy the second

1464
00:26:50,079 --> 00:26:50,859
bit of code here.

1465
00:26:51,359 --> 00:26:51,839
And this is going

1466
00:26:51,839 --> 00:26:53,299
to push an existing repo

1467
00:26:53,299 --> 00:26:54,380
from the command line,

1468
00:26:54,400 --> 00:26:54,759
which is our

1469
00:26:54,759 --> 00:26:55,480
project over here.

1470
00:26:56,119 --> 00:26:56,660
And we'll just paste

1471
00:26:56,660 --> 00:26:57,539
in that bit of code.

1472
00:26:57,539 --> 00:26:59,640
That should track

1473
00:26:59,640 --> 00:27:00,480
all of our files.

1474
00:27:00,619 --> 00:27:01,039
And we can say

1475
00:27:01,039 --> 00:27:01,950
a knit commit,

1476
00:27:03,220 --> 00:27:04,380
commit this and then

1477
00:27:04,380 --> 00:27:05,480
go ahead and push this

1478
00:27:06,200 --> 00:27:06,720
straight up to GitHub.

1479
00:27:07,259 --> 00:27:07,660
Awesome.

1480
00:27:07,740 --> 00:27:08,759
Now the next step is

1481
00:27:08,759 --> 00:27:10,000
to find a hosting provider.

1482
00:27:10,240 --> 00:27:11,579
I personally have had a

1483
00:27:11,579 --> 00:27:13,380
lot of success with Versailles.

1484
00:27:13,460 --> 00:27:13,779
So we're going

1485
00:27:13,779 --> 00:27:14,200
to do that

1486
00:27:14,779 --> 00:27:15,380
now that we're logged

1487
00:27:15,380 --> 00:27:16,049
into Versailles.

1488
00:27:16,519 --> 00:27:16,819
If you don't

1489
00:27:16,819 --> 00:27:17,299
have an account,

1490
00:27:17,359 --> 00:27:17,680
you just need

1491
00:27:17,680 --> 00:27:18,240
to create one.

1492
00:27:18,440 --> 00:27:18,900
You can go

1493
00:27:18,900 --> 00:27:19,559
to add new.

1494
00:27:19,799 --> 00:27:20,160
We can do

1495
00:27:20,160 --> 00:27:20,420
a new project.

1496
00:27:21,799 --> 00:27:22,400
And this is all

1497
00:27:22,400 --> 00:27:23,779
coming from my GitHub,

1498
00:27:23,779 --> 00:27:24,460
which is something

1499
00:27:24,460 --> 00:27:25,180
that you could link

1500
00:27:25,180 --> 00:27:25,900
once you create

1501
00:27:25,900 --> 00:27:26,319
your account.

1502
00:27:26,859 --> 00:27:27,140
I'm going to go

1503
00:27:27,140 --> 00:27:28,380
ahead and click import on

1504
00:27:28,380 --> 00:27:29,420
our notes right here.

1505
00:27:29,940 --> 00:27:30,460
We do need to

1506
00:27:30,460 --> 00:27:30,960
set up our

1507
00:27:30,960 --> 00:27:32,319
environment variables here though.

1508
00:27:33,440 --> 00:27:33,839
All right.

1509
00:27:34,039 --> 00:27:34,779
Now you're going to

1510
00:27:34,779 --> 00:27:35,220
want to make sure

1511
00:27:35,220 --> 00:27:36,140
this is all looking

1512
00:27:36,259 --> 00:27:37,039
the way it should.

1513
00:27:37,539 --> 00:27:37,940
And you're just going

1514
00:27:37,940 --> 00:27:38,319
to click deploy.

1515
00:27:39,839 --> 00:27:40,519
And if you scroll down,

1516
00:27:40,619 --> 00:27:41,680
you'll see the deploy

1517
00:27:41,680 --> 00:27:42,859
logs down here.

1518
00:27:43,539 --> 00:27:44,039
And this will let

1519
00:27:44,039 --> 00:27:44,619
you know if there's

1520
00:27:44,619 --> 00:27:45,480
any issues while

1521
00:27:45,480 --> 00:27:46,319
trying to build your

1522
00:27:46,319 --> 00:27:48,079
application and host it

1523
00:27:48,079 --> 00:27:48,839
up on the web.

1524
00:27:49,839 --> 00:27:50,259
All right.

1525
00:27:50,460 --> 00:27:50,859
Congratulations.

1526
00:27:51,380 --> 00:27:51,940
You just deployed

1527
00:27:51,940 --> 00:27:52,519
a new project.

1528
00:27:53,180 --> 00:27:53,539
And here's a

1529
00:27:53,539 --> 00:27:54,559
snapshot of that,

1530
00:27:54,640 --> 00:27:55,359
which is pretty cool.

1531
00:27:55,369 --> 00:27:56,720
And click continue

1532
00:27:56,720 --> 00:27:57,779
to dashboard and

1533
00:27:57,779 --> 00:27:58,420
you'll have all the

1534
00:27:58,420 --> 00:27:59,539
information about it.

1535
00:27:59,980 --> 00:28:00,599
So by default,

1536
00:28:00,680 --> 00:28:01,359
it does set you

1537
00:28:01,359 --> 00:28:02,789
off with a domain,

1538
00:28:03,240 --> 00:28:03,720
but you can

1539
00:28:03,799 --> 00:28:04,420
click it and

1540
00:28:04,420 --> 00:28:05,059
you'll see that your

1541
00:28:05,059 --> 00:28:06,200
project is live.

1542
00:28:06,559 --> 00:28:07,440
We are getting an issue

1543
00:28:07,440 --> 00:28:08,420
trying to sign in though.

1544
00:28:08,480 --> 00:28:09,900
And it says fire base

1545
00:28:09,900 --> 00:28:11,480
error auth slash

1546
00:28:11,480 --> 00:28:12,920
unauthorized domain.

1547
00:28:13,200 --> 00:28:13,480
Okay.

1548
00:28:13,680 --> 00:28:14,619
So we may have

1549
00:28:14,619 --> 00:28:16,299
to change up something somewhere.

1550
00:28:17,299 --> 00:28:18,039
Let's copy this and

1551
00:28:18,039 --> 00:28:19,180
paste this into cursor.

1552
00:28:19,960 --> 00:28:20,180
All right.

1553
00:28:20,240 --> 00:28:20,880
So I just said

1554
00:28:20,880 --> 00:28:21,940
now that we have deployed

1555
00:28:21,940 --> 00:28:22,920
the app onto the

1556
00:28:22,920 --> 00:28:23,890
web with Versailles,

1557
00:28:23,940 --> 00:28:24,759
I'm getting this error

1558
00:28:24,759 --> 00:28:25,259
when I try to

1559
00:28:25,259 --> 00:28:26,220
sign in and I just

1560
00:28:26,220 --> 00:28:26,900
paste it in the error.

1561
00:28:27,700 --> 00:28:28,440
And it says this

1562
00:28:28,440 --> 00:28:29,240
error occurs because

1563
00:28:29,240 --> 00:28:30,480
fire base auth needs

1564
00:28:30,480 --> 00:28:31,680
to explicitly allow

1565
00:28:31,680 --> 00:28:32,680
the domains where

1566
00:28:32,680 --> 00:28:33,880
your application runs.

1567
00:28:34,460 --> 00:28:35,079
So you'll need to

1568
00:28:35,099 --> 00:28:35,779
add your Versailles

1569
00:28:35,779 --> 00:28:36,819
deployment domain

1570
00:28:36,819 --> 00:28:37,700
to the authorized

1571
00:28:37,700 --> 00:28:38,859
domains and fire

1572
00:28:38,859 --> 00:28:39,460
base console.

1573
00:28:40,160 --> 00:28:40,740
Here's how to fix it.

1574
00:28:41,119 --> 00:28:41,640
Go to the fire

1575
00:28:41,640 --> 00:28:42,269
base console,

1576
00:28:42,440 --> 00:28:43,319
select your project,

1577
00:28:43,900 --> 00:28:44,119
click on

1578
00:28:44,119 --> 00:28:45,180
authentication in the

1579
00:28:45,180 --> 00:28:46,480
left sidebar and then

1580
00:28:46,480 --> 00:28:47,440
go to the settings tab,

1581
00:28:48,319 --> 00:28:48,900
scroll down to

1582
00:28:48,900 --> 00:28:49,960
authorized domains

1583
00:28:49,960 --> 00:28:50,839
and click add domain.

1584
00:28:51,339 --> 00:28:51,960
All right.

1585
00:28:51,960 --> 00:28:52,900
Authorized domains

1586
00:28:52,900 --> 00:28:54,079
add domain.

1587
00:28:54,480 --> 00:28:55,019
And I think we

1588
00:28:55,019 --> 00:28:55,559
just need to

1589
00:28:55,680 --> 00:28:56,930
add our new domain.

1590
00:28:57,710 --> 00:28:58,440
Let's go ahead and

1591
00:28:58,599 --> 00:29:00,000
copy that and we'll

1592
00:29:00,000 --> 00:29:00,759
paste that in here

1593
00:29:01,539 --> 00:29:02,170
and click add.

1594
00:29:02,400 --> 00:29:03,400
Let's try to log in.

1595
00:29:05,259 --> 00:29:05,680
Cool.

1596
00:29:06,000 --> 00:29:06,759
Looks like it logged me

1597
00:29:06,759 --> 00:29:07,940
in and I have access

1598
00:29:07,940 --> 00:29:09,039
to all of my notes.

1599
00:29:09,480 --> 00:29:11,660
Let's delete the study

1600
00:29:11,660 --> 00:29:14,039
plan and let's log out.

1601
00:29:14,259 --> 00:29:15,119
Let's log back in.

1602
00:29:16,420 --> 00:29:16,839
Cool.

1603
00:29:17,119 --> 00:29:17,839
And it's still gone

1604
00:29:17,839 --> 00:29:18,420
and we still

1605
00:29:18,420 --> 00:29:19,079
have our notes here

1606
00:29:19,740 --> 00:29:20,319
and we have our fully

1607
00:29:20,319 --> 00:29:22,019
functioning app live on the

1608
00:29:22,019 --> 00:29:23,559
web for everyone to see.

1609
00:29:24,220 --> 00:29:24,619
Awesome.

1610
00:29:24,940 --> 00:29:26,079
So thanks for building this

1611
00:29:26,079 --> 00:29:27,400
note taking app with me.

1612
00:29:27,539 --> 00:29:27,799
This was a

1613
00:29:27,799 --> 00:29:28,279
lot of fun.

1614
00:29:28,420 --> 00:29:29,019
I actually really

1615
00:29:29,019 --> 00:29:30,180
enjoy using cursor.

1616
00:29:30,559 --> 00:29:30,680
Remember,

1617
00:29:30,819 --> 00:29:31,660
check down below for

1618
00:29:31,660 --> 00:29:33,039
more resources on cursor.

1619
00:29:33,099 --> 00:29:33,980
If you're new to it

1620
00:29:33,980 --> 00:29:34,769
and want to get started,

1621
00:29:35,079 --> 00:29:35,740
I'll see you guys

1622
00:29:35,740 --> 00:29:36,240
in the next one.

1623
00:29:36,500 --> 00:29:36,720
Peace.