Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build & Launch an App in 30 Minutes with Cursor!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Bring your dream project to life with Cursor, an AI-powered code editor, without writing a single line of code. Join Dustin as he builds a fully functional note-taking app—from idea to launch—using Cursor. Watch as he leverages AI to streamline development, proving how easy and fast it can be to turn an idea into reality with the right tools.
Official Cursor website: Cursor
Check out this introductory to Cursor: Meet Cursor
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hey, what's up?
0:01
My name is Dustin
0:02
and I'm a developer
0:02
here at Treehouse.
0:03
Today I want to
0:05
show you how
0:05
I built a full
0:06
stack note taking
0:07
application from start to
0:08
finish using just cursor
0:09
in less than an hour.
0:11
If you want to
0:13
learn a little bit
0:13
more about cursor,
0:14
just head to cursor.com.
0:16
I'll also leave some
0:17
resources down below.
0:18
But the first thing
0:20
you'll probably notice
0:21
is that it looks just
0:22
like VS Code and that's
0:22
because it is.
0:24
It's a fork
0:25
of VS Code.
0:25
It's just heavily
0:26
integrated with
0:27
cursor's AI features.
0:28
As you scroll down
0:30
on the features page,
0:31
you'll notice some
0:32
of their best
0:33
features and you'll
0:33
see chat and this
0:35
is the one that we're
0:36
going to be using.
0:36
You can think of it
0:37
as like chat GBT that
0:38
lives directly into the
0:39
code editor and it
0:41
has access to all
0:42
of your files and all
0:43
of your code's context.
0:44
I think we're going
0:45
to be able to
0:46
build something pretty
0:46
cool with this,
0:47
so let's see how hard
0:47
this is.
0:48
Alright, so let's
0:55
get started.
0:56
We're going to open
0:57
up the terminal and I'm
0:58
going to CD to my
0:59
desktop and I'm going to
1:01
create my project
1:02
folder here.
1:03
We're going to
1:04
create a very simple
1:04
note taking app,
1:05
but it will be a
1:06
full stack app.
1:06
We are going to start
1:07
off with setting up a
1:08
basic Next.js application
1:09
for this project
1:11
and don't worry if you
1:13
don't know anything
1:14
about Next.js or
1:14
Tailwind because I'm not
1:15
going to code
1:16
a single thing.
1:17
We're going to use cursor
1:18
chat for everything
1:19
so theoretically you
1:19
can follow along.
1:21
So on my desktop,
1:21
I'm going to say
1:22
MPX create Next app
1:23
at latest and I'm
1:26
going to call this
1:27
notes.
1:28
I'm just going to
1:30
click enter a few times
1:31
for all of my
1:32
default settings if you want
1:33
to copy them.
1:34
You can pause the
1:35
video here and
1:36
just take a look.
1:37
Alright,
1:39
so I guess the
1:40
first thing I'll do is
1:41
I'll just open up my
1:42
integrated terminal
1:43
and I'm going to run
1:44
npm run dev so that
1:45
you can see this
1:47
is just a basic boilerplate
1:48
Next.js application.
1:49
Alright, there we go.
1:51
So we have our beautiful
1:51
Next.js application
1:53
right out of the
1:54
box and I'm basically going
1:54
to reset this.
1:56
I'm going to
1:57
come into the source
1:58
folder here inside
1:59
of the app directory.
2:01
I'm going to
2:02
remove the favicon.
2:02
I'm going to open up
2:04
the global.css file and
2:05
delete everything except
2:07
the tailwind imports.
2:08
Inside of layout,
2:12
I'm going to remove
2:13
all the classes that we
2:13
have on the body
2:14
and I'm
2:16
going to remove the imports
2:16
for the fonts and
2:17
I'm going to hit save.
2:20
And then last,
2:21
I'm going to go to
2:22
the page and I'm just
2:22
going to remove it all.
2:23
I'm going to write
2:24
RAFCE to create a
2:26
basic component called page and
2:28
then now that is
2:30
all we see in the
2:31
browser, which is pretty nice.
2:32
Alright,
2:33
now up here,
2:34
I'm going to switch
2:35
this over to chat.
2:35
You can think of this
2:37
as like chat GPT
2:38
if you're familiar with that.
2:39
I think the first
2:40
thing I want
2:40
to do is implement
2:41
a landing page for
2:41
our notes app that allows
2:43
our users to log in
2:44
and we're going to
2:47
use Firebase for this.
2:47
Don't worry if you don't
2:49
have any experience
2:49
with databases or
2:50
authentication or Firebase
2:52
or anything like that.
2:53
We're going to allow
2:55
cursor to do most
2:55
of that for us.
2:57
I will say though
2:57
that if you
2:58
do have a little
2:59
bit of knowledge about
3:00
the backend and databases,
3:01
you may be able
3:04
to prompt cursor much easier
3:04
than if you didn't.
3:07
So let's get started
3:08
with the first
3:08
initial prompt.
3:09
All right,
3:10
so I'm finished with
3:11
my initial prompt.
3:11
I'm going to go
3:12
ahead and send that
3:12
and while it is
3:13
working up the code,
3:14
I'm going to go
3:16
ahead and kind of
3:16
read through what I wrote.
3:17
I have a brand
3:18
new next JS application and
3:19
I'm not using TypeScript,
3:21
just JavaScript.
3:23
I want to create a
3:24
full stack note taking app,
3:25
a simple one.
3:26
Let's get started first
3:28
with the landing page.
3:29
I want it to
3:30
be a simple one pager
3:31
with the content centered.
3:32
I want the app
3:34
name, which is notes
3:35
and a brief description
3:37
and then a continue with
3:38
Google button.
3:39
The reason I'm going
3:40
to use this continue
3:40
with Google button is
3:41
because it's probably
3:42
the easiest way
3:43
to start authenticating
3:44
your users.
3:45
So I figured let's
3:46
keep it simple and
3:47
do something like that.
3:47
All right,
3:49
so for the UI styles,
3:49
I'd like a threads
3:51
.net slash Instagram
3:52
style UI with
3:53
round spacious
3:55
UI elements.
3:56
I don't want
3:57
anything fully round.
3:58
Now, this is just
4:00
personal preference.
4:00
I really enjoy the
4:01
way that the UI
4:02
styles look with
4:03
Instagram and threads.
4:05
So that's why I'm
4:06
going to go with that.
4:07
And for the colors,
4:08
let's import colors
4:09
from Tailwind in
4:10
the tailwind.config
4:11
file and let's
4:12
set the primary to sky
4:14
and the secondary to zinc.
4:15
I'll explain this when
4:18
we get to this,
4:19
but trust me,
4:19
this is awesome.
4:21
And then lastly,
4:22
I want the app
4:23
to be in the tailwind,
4:24
zinc color scale
4:25
for both light
4:26
and dark mode.
4:27
Be sure not to
4:28
make dark mode too dark.
4:29
All right, so let's
4:31
see what it gave us.
4:32
All right,
4:34
so first things first,
4:34
we are going to be
4:35
opening up the
4:36
tailwind config file.
4:37
Now if you did
4:38
not supply it with your
4:39
tailwind config file
4:40
when prompting it,
4:41
it's going to
4:42
probably try to
4:42
create a new one,
4:43
which is super annoying.
4:44
And I hope they
4:45
fix this soon.
4:46
And it will
4:47
cause issues.
4:47
So if I hit accept,
4:48
nothing's going
4:49
to happen,
4:50
but it's going to
4:50
override the other one.
4:51
Just delete your old
4:52
one and then
4:53
you should be fine.
4:53
And what it's doing is
4:55
it's basically importing
4:56
tailwind colors and
4:57
then setting the primary
4:58
color to sky.
4:59
That way,
5:01
if I ever want to
5:01
change the entire UI's
5:02
primary color later,
5:03
I just got to come
5:04
in here and change it.
5:04
And same for the
5:06
basic UI styles,
5:06
which is going to
5:08
be the zinc color palette.
5:09
And I'll show you
5:10
examples of these later.
5:11
All right, so next
5:12
for the page, hit accept.
5:12
Cool.
5:15
All right.
5:16
So remember, we
5:16
are zoomed in.
5:17
So I'm going to
5:18
zoom out a little bit.
5:18
I think that
5:19
should be fine.
5:19
I think this looks
5:20
pretty great off the bat.
5:21
So it says notes,
5:23
your thoughts,
5:24
organized and
5:25
accessible anywhere,
5:25
the simple way to
5:27
capture and
5:28
manage your notes.
5:28
And then we have
5:29
a continue with Google button.
5:30
And as I mentioned
5:32
earlier with the primary
5:33
color set to sky,
5:34
in the actual code, you
5:36
see that the button has
5:38
a BG primary 500
5:39
and on hover primary 600.
5:40
So that's the
5:43
primary color.
5:43
So if we go
5:44
over to our tail and
5:44
config and we change
5:45
our primary color
5:47
from sky to something
5:48
like rose,
5:49
it instantly
5:51
changes the primary
5:51
color that we're
5:53
using within the app.
5:54
And same with the
5:55
zinc color scale.
5:56
So this is using
5:57
the secondary color,
5:57
which is kind of
5:59
coloring the UI.
5:59
So if I say
6:00
something like slate,
6:01
you're going to see
6:04
that we now have more
6:04
of a slate color
6:05
palette here.
6:06
All right.
6:07
So before we start with
6:07
the authentication,
6:08
let's hit one
6:09
more piece first.
6:10
Let's let's create a
6:10
way to toggle on the
6:12
dark and light mode.
6:14
All right.
6:15
So I wrote, this
6:15
is looking great.
6:16
Let's continue with
6:18
these UI styles.
6:19
I want to create a
6:20
component for updating
6:20
the theme from either
6:21
light to dark mode.
6:22
And let's set that
6:24
up now and add
6:24
it to the layout
6:25
in the top right.
6:26
So it looks like
6:28
it's creating a
6:28
theme toggle for me.
6:29
I'm going to
6:30
go ahead and
6:30
click accept.
6:32
So this is a
6:34
new component.
6:34
And basically,
6:35
it's updating our theme.
6:36
So it's looking at
6:38
local storage and it's
6:38
setting our theme,
6:40
which is pretty cool.
6:40
So either light or dark.
6:41
All right.
6:42
Now in the layout,
6:42
it looks like we're
6:43
going to import
6:44
this new component.
6:44
And then in the
6:46
tailwind config,
6:47
we're setting the
6:48
dark mode to class.
6:49
So let's go ahead
6:50
and click it.
6:51
Okay.
6:52
Cool.
6:52
Cool.
6:53
I'm not a fan
6:53
of these emojis.
6:54
So let's say that,
6:55
let's say I'm not
6:56
a fan of the emojis.
6:57
Let's use icons.
6:59
I want to use the
7:02
react icons library.
7:04
And you could use
7:07
whatever icon library you like.
7:07
I personally really
7:09
like react icons.
7:10
So I'm going to
7:11
go ahead and do that.
7:12
And it's going to
7:12
ask me to run
7:13
npm install react icons.
7:14
It'll run the
7:16
command for me.
7:16
We'll hop right
7:17
back into the chat.
7:18
And then it looks
7:19
like it's going to
7:20
update that component
7:20
to use that.
7:21
And it does.
7:23
Now I think this
7:24
looks a lot better.
7:24
It's personal
7:25
preference.
7:26
If we go back
7:26
to our app,
7:27
we see that it's basic.
7:27
It's working.
7:29
We have our little
7:29
home screen here
7:30
and now it's time
7:31
to authenticate.
7:32
So now it's time
7:38
to set up authentication
7:39
for our app.
7:41
If you remember,
7:42
we have the continue
7:43
with Google button that
7:44
currently does nothing
7:45
and we want to
7:46
set up a firebase.
7:47
So you just need to
7:49
go to firebase.google
7:50
.com and create an account.
7:51
And once your account
7:53
is all set up,
7:54
you want to click
7:55
on go to console.
7:55
And then just click
7:58
on create a project.
7:59
We're going to name
8:01
this project notes.
8:01
I'm going to
8:03
hit continue.
8:04
I'm going to turn
8:05
off the enable
8:05
Gemini and firebase.
8:06
I don't really
8:08
think I need it.
8:08
And I'm also going
8:09
to turn off the analytics
8:10
and I'm going to
8:12
click create project.
8:12
This shouldn't take
8:14
very long at all,
8:15
maybe just a
8:16
few seconds.
8:16
All right, our
8:18
project is finished.
8:18
I'm going to go ahead
8:19
and click continue.
8:20
And now we're brought
8:22
to this screen here.
8:22
I'll make the page
8:24
just a little bit bigger.
8:24
It says get started
8:26
by adding firebase
8:26
to your app.
8:28
So you can choose
8:29
an Apple iOS app.
8:30
You can choose Android or
8:31
you can do the web.
8:33
We're obviously going to
8:34
choose the web here.
8:35
And then for
8:36
the web name,
8:37
we're just going
8:38
to call it notes
8:38
and click register.
8:40
All right,
8:41
so now we have
8:41
all of our important information.
8:41
Now,
8:44
before we do
8:44
anything here,
8:44
let's go back
8:45
to our project
8:46
and let's start talking
8:47
to cursor chat again.
8:48
OK,
8:50
so I basically
8:51
just wrote,
8:52
I want to now
8:53
set up firebase for authenticating
8:54
and clicking
8:56
continue with Google.
8:57
I want the users
8:58
to be authenticated with Google
8:59
and then redirect them
9:00
to a slash home page.
9:01
So initially,
9:05
it wants me to run
9:05
npm install firebase.
9:07
Let's go ahead
9:08
and do that.
9:08
All right, firebase
9:09
is installed.
9:10
So now it wants to
9:11
create a firebase.js file.
9:11
I'm going to go
9:14
ahead and click
9:14
accept on that.
9:16
It's going to create
9:17
a new file for
9:17
me called firebase.js.
9:18
And in here,
9:21
it looks like we're
9:21
going to have all
9:22
of our API keys,
9:22
the auth domain,
9:25
the project ID,
9:25
storage bucket,
9:26
all those things that
9:27
Google is going to
9:28
need to authenticate.
9:28
And then we're going
9:30
to go ahead and create
9:30
our dot env file
9:31
so that we can
9:33
actually import these
9:34
keys into here.
9:35
And I'll show you
9:37
a very easy
9:37
way to do this.
9:38
You have your variable
9:39
names and your values.
9:41
And we have to get
9:42
all this information
9:43
here into there.
9:44
And that can be
9:46
pretty tedious.
9:47
So you can just come
9:48
in here, paste that in.
9:50
And you can copy this
9:51
entire thing and click
9:53
command K and just say,
9:54
set up these
9:56
variables with their
9:57
correct
10:01
values
10:03
and hit enter.
10:04
So it's going to
10:05
go ahead and remove
10:05
everything except
10:06
the variable name
10:07
and the value,
10:08
pretty simple.
10:10
All right,
10:11
so next it wants to
10:11
create another component,
10:12
auth context.
10:14
So we're going to
10:15
let it do that.
10:16
We're going
10:18
to hit accept.
10:18
And then in our layout,
10:20
it looks like it's
10:21
going to add this
10:22
author provider.
10:23
And then,
10:25
OK,
10:25
now we're creating a
10:26
Google sign in component,
10:27
which is pretty cool.
10:28
And now inside
10:29
of our page,
10:30
we're going to
10:31
import that Google
10:31
sign in component.
10:32
And then finally,
10:34
we're creating that
10:36
homepage that we mentioned
10:37
that we wanted
10:38
to redirect to.
10:39
So this looks
10:40
pretty basic.
10:40
It says welcome,
10:41
and then it has
10:42
our display name.
10:43
So this must be
10:44
getting this data from
10:45
our authentication.
10:46
Before we do anything,
10:48
we do need to
10:49
come back into the console.
10:50
And we're going to
10:51
go over here to
10:52
authentication and we're
10:54
going to click
10:55
get started.
10:55
Now,
10:56
we basically need to
10:57
let Firebase know
10:58
which sign in method
10:59
we want our app to
11:00
be working with.
11:02
And there's a ton
11:02
to choose from.
11:03
You have Google,
11:04
Facebook,
11:04
GitHub, Apple, Twitter,
11:05
and you can even
11:07
just use your email password,
11:07
phone number
11:09
or anonymous.
11:10
But we're going to
11:11
click Google for this.
11:11
And all we're going
11:12
to do is click enable.
11:13
And you're going to
11:14
set up a email address
11:15
that you want to
11:16
be tied to your project.
11:17
So I'm just going to
11:18
choose one of my
11:19
Google email addresses.
11:19
We're going to hit save.
11:21
And now our project
11:22
should work once
11:23
this is finished.
11:24
All right.
11:25
So now let's go
11:26
over here and check.
11:26
I'm going to refresh the
11:27
page just to make sure.
11:28
And now when I click
11:30
continue with Google,
11:30
this little
11:32
modal pops up
11:32
and I could choose
11:33
my Google account,
11:34
click continue.
11:35
And now I'm redirected
11:37
with my username,
11:38
which is pretty cool.
11:39
And if I hit
11:40
refresh, it stays.
11:41
If I try to delete
11:43
this slash home,
11:44
it takes me back.
11:46
So let's actually see
11:47
if we can't
11:48
fix this right now.
11:49
So I wrote once
11:53
I'm authenticated,
11:54
I'm brought to slash
11:55
home as expected,
11:56
but I can still have
11:57
access to the
11:58
initial landing page.
11:59
And I don't want
12:01
users to be able to
12:01
access the landing
12:02
page if authenticated.
12:02
So let's see if it
12:05
updates any of the
12:05
code to make this work.
12:07
All right.
12:09
So instantly I'm
12:09
brought to slash home,
12:10
which is great.
12:11
So let's go over here
12:11
and delete this and enter
12:12
and cool.
12:14
I'm redirected again.
12:14
So now we just need
12:16
to find a way
12:17
to log the user out.
12:17
So I wrote, OK,
12:21
this works great.
12:22
Next to our theme
12:23
button in the header,
12:24
let's add an option
12:25
that looks similar
12:26
for logging
12:27
the user out.
12:28
All right.
12:29
So I'm going to go
12:30
ahead and accept this
12:30
code to create a header.
12:31
And inside this header,
12:32
we have our theme toggle
12:33
and then what looks
12:34
like a log out button.
12:35
It does have a
12:36
handle sign out.
12:36
So I'm sure we're
12:37
going to be writing
12:38
some logic for that.
12:38
Oh, we're actually doing
12:39
it in the header.
12:40
It looks like it's a
12:41
little button here.
12:43
So basically a
12:44
wait sign out off
12:45
and then push.
12:46
OK,
12:47
so then it's basically
12:47
going to route us back
12:48
to that home page.
12:49
All right.
12:50
So let's also update
12:50
the layout to have
12:52
our header instead
12:53
of just theme toggle.
12:54
All right.
12:56
So let's take
12:56
a look at that.
12:57
And if we come
12:58
into the browser,
12:58
OK,
13:00
I don't see the
13:00
log out button.
13:01
So let's say don't
13:02
see the log out button.
13:04
The issue might be
13:06
that we need
13:07
to update the theme
13:08
toggle component to remove
13:09
its fixed positioning.
13:10
OK,
13:12
so it's probably there and
13:12
we just can't see it.
13:13
So let's apply
13:15
this new code.
13:16
OK, now we have our
13:17
log out button and cool.
13:18
It logs me out.
13:19
Now let me see
13:20
if I can
13:21
access that home page
13:21
and I cannot.
13:23
Awesome.
13:24
So now if I
13:25
log in and I'm authenticated,
13:25
now I'm brought back
13:27
to home and I can't
13:28
access the initial page.
13:29
This is perfect.
13:31
This is a pretty
13:33
great start.
13:33
We now have a working
13:34
landing page that
13:36
allows us to log in
13:37
and log out with Google.
13:38
So
13:40
I think we're at
13:41
a pretty good place
13:42
to get started
13:42
building the main
13:43
functionality of this app.
13:44
So with the authentication
13:51
out of the way,
13:53
let's try to work
13:54
on the main functionality
13:54
of this app.
13:55
Is it just me
13:57
or does this
13:57
button not look sent?
13:57
This button is
13:58
not centered.
13:59
Hold on.
14:00
We're going to fix
14:00
this real quick.
14:01
This button needs
14:01
to be centered.
14:03
And actually,
14:05
while we're here,
14:05
let's make the button
14:06
dark instead of using
14:08
the app's primary color.
14:10
Just because I think
14:14
Google should just be dark.
14:15
There we go.
14:17
So let's log in to
14:19
our app so that
14:20
we're on the home page.
14:21
And
14:23
I guess let's figure
14:24
out how we want
14:25
this page to how
14:26
we want this to look.
14:27
All right.
14:28
So I started off
14:29
with a basic prompt.
14:29
I just said,
14:30
let's start building
14:31
out our note app.
14:32
Remember,
14:33
I'd like to use
14:33
a threads dot net slash
14:34
Instagram field to it.
14:35
Let's start off
14:37
with a left panel,
14:38
which holds all
14:39
of our notes
14:40
and a button at
14:41
the top to
14:42
add a new note
14:42
on the right side
14:44
is the current note
14:44
that is visible, which
14:45
by default is none.
14:46
We'll go ahead and
14:48
apply the page.
14:48
OK, this kind of
14:51
it's a great start.
14:52
It's a great start.
14:54
Oh, that's just
14:56
really wide.
14:57
It looks like,
14:58
yeah, we can just say.
14:59
Let's make the left
15:03
panel a little smaller.
15:05
We may also be
15:07
zoomed in, mind you.
15:08
Oh, no, we're not
15:10
zoomed in anymore.
15:10
Click apply.
15:11
There we go.
15:13
Awesome.
15:14
Now, if we click new
15:15
note, nothing happens.
15:16
So I guess
15:17
I guess we have
15:18
to set that up.
15:19
OK,
15:20
so I wrote when
15:20
clicking a new note,
15:21
let's create a new
15:22
note that's editable
15:23
on the right.
15:24
You can start with a
15:25
preview card in the left
15:25
panel and include the
15:27
logged in users image
15:28
as well as the
15:29
title of the note and
15:30
truncate some of the
15:31
body of the note.
15:32
So
15:34
it looks like it's
15:35
creating a note
15:35
card component,
15:36
which is pretty cool.
15:37
I like that it's creating
15:38
components for all of this.
15:39
So let's see.
15:41
We'll click
15:42
apply to page.
15:42
We'll take a look.
15:43
OK, so we're setting
15:44
up notes in state.
15:44
We will eventually
15:47
connect all of
15:47
this to Firebase.
15:48
We're just going to build
15:49
out the full UI and
15:50
experience first
15:51
to make things a
15:52
little bit easier.
15:53
And then we'll worry
15:54
about setting this all
15:54
up into the database.
15:55
So it looks like
15:58
we have a function create
15:58
new note and a
15:59
new note includes an ID,
16:00
a title, content,
16:02
user image,
16:03
created at and user ID.
16:05
And it looks like
16:06
some of the stuff is
16:06
actually coming from
16:07
our authentication.
16:08
So that's that's
16:09
pretty neat.
16:10
Seems simple enough.
16:11
Looks like we're getting
16:12
an error, though.
16:13
Oh,
16:13
we have to install
16:14
the date FNS package.
16:15
So let's do that.
16:17
All right.
16:18
So I installed that
16:18
and now it looks like
16:19
our app is kind
16:20
of back to normal here.
16:21
So if we hit plus,
16:22
OK,
16:25
OK, I like the
16:26
way this looks.
16:27
I'm going to change a
16:28
little bit of this here,
16:28
but
16:29
we could change this
16:31
to my first note.
16:31
Awesome.
16:34
This is my very
16:35
first note.
16:36
OK, so this looks
16:38
pretty cool.
16:39
I'm not in love
16:40
with the structure.
16:41
So I wrote in
16:42
the left panel,
16:42
the note card should
16:43
have the user's
16:44
image on the left
16:45
and then the title,
16:46
body and date in
16:46
the same column.
16:47
So that looks
16:48
pretty good.
16:49
I like I like
16:49
the way that this looks.
16:50
I do want to go
16:52
ahead and create another note.
16:53
This is my second note.
16:55
Hello, world.
16:59
All right.
17:00
Now, what happens
17:00
if I click this?
17:01
Does it?
17:02
OK, cool.
17:03
And it allows us to
17:03
keep editing here,
17:04
which is kind of
17:05
neat and look good
17:06
in light mode.
17:06
Sure does.
17:08
I do want to
17:09
see our primary color
17:10
a little bit more.
17:11
Let's set the create
17:13
new note button to
17:15
use the primary color.
17:17
Cool.
17:20
So now we have our
17:20
main color here.
17:21
I think that
17:22
looks pretty good.
17:23
And actually,
17:24
now that I'm kind of
17:25
seeing it with all this,
17:25
it doesn't look.
17:27
You know, I'm not
17:29
really feeling the sky color.
17:30
Maybe we could
17:32
change it to Emerald.
17:33
Or maybe Indigo.
17:36
Indigo looks pretty good
17:40
with this dark mode.
17:41
It looks pretty good.
17:42
Like mode, maybe we'll
17:43
just go with Indigo.
17:43
But that's the beauty of
17:45
using these variables.
17:47
Also,
17:48
we can say slate
17:49
and now our entire
17:50
secondary color,
17:52
which for our UI
17:53
is all updated and
17:54
everything just looks good
17:56
right out the box.
17:57
But just wanted to
17:58
show you the power
17:58
of setting up your
17:59
tail in this way.
18:00
And this is just
18:01
another advantage of knowing a
18:01
little bit of code
18:03
even if you're going
18:05
to use something like
18:05
cursor to build something
18:06
out completely for you.
18:07
All right,
18:09
so we basically have
18:10
the functionality that we
18:12
want with this app.
18:13
The only other thing I
18:13
want to add to
18:14
the functionality for the nodes
18:15
is to be able to
18:16
delete a note.
18:17
So I just wrote,
18:19
can you give me the
18:20
option to delete a note?
18:21
I'd like a confirmation
18:22
before
18:23
actually deleting it.
18:23
So it looks like
18:25
it's creating a
18:26
delete note modal.
18:27
So I'm guessing we're
18:28
going to have some
18:29
sort of modal when we
18:29
go to delete a note.
18:30
Let's create that.
18:31
And it looks like
18:32
inside of the page component,
18:33
we're probably adding some
18:34
sort of way to delete
18:37
the note.
18:39
OK, so we get
18:40
a big red button here.
18:41
This is my
18:44
first ever note.
18:45
Let's create
18:47
a second one.
18:48
Second note.
18:49
All right,
18:52
so if I would go
18:52
to delete the first note,
18:52
delete note,
18:55
are you sure you
18:56
want to delete this note?
18:56
This action
18:57
cannot be undone.
18:57
I really like this UI.
18:59
I like that I
19:00
can just kind of initially
19:01
prompt cursor with how I
19:03
want my UI to look.
19:05
And I just I
19:06
get it just looks great.
19:07
It looks great.
19:08
All right, so let's
19:09
go ahead and delete it
19:10
and make sure that
19:11
actually works cool.
19:11
And it does.
19:12
That's awesome.
19:13
All right,
19:14
so I think honestly,
19:14
I mean,
19:16
if we refresh,
19:16
we're going to
19:16
lose our data.
19:17
We're not setting
19:17
this in local storage
19:18
because we're going to eventually
19:19
set this in our database.
19:20
So I think that's
19:21
the next step.
19:22
So now that we got
19:23
pretty much all
19:23
the functionality
19:24
that we want out
19:24
of our basic note app,
19:25
let's set this up
19:27
to work with our
19:28
Firebase database.
19:29
And then I think
19:31
it'll be time
19:31
to host this app.
19:32
All right.
19:38
So as I mentioned
19:39
earlier,
19:40
I think it's
19:41
time to start
19:41
getting some of
19:43
this data into our
19:43
database so that we
19:45
can actually have it
19:46
every time we load
19:48
up our notes app.
19:48
So I told cursor
19:50
this is all working perfectly.
19:51
Now I want to start
19:53
storing this data
19:54
in my database.
19:55
I'm new to Firebase,
19:56
so help me understand
19:57
what needs to be done
19:58
within my Firebase
19:59
console as well.
20:01
I want to be
20:03
able to create a
20:03
note, read a note,
20:04
update a note and delete
20:05
a note from my database.
20:06
And these are all
20:08
things that we're currently
20:08
doing in the app.
20:09
I want my notes
20:10
to be tied to
20:11
my logged in user.
20:12
So let's just go
20:13
through the options that
20:14
it gives us here.
20:15
I'll help you set
20:17
up a firestore
20:17
database and integrate
20:18
it with your app.
20:19
First,
20:20
in your Firebase
20:21
console,
20:21
go to firestore database
20:22
in the left sidebar.
20:24
So I do
20:26
see it here.
20:27
And if you don't
20:27
see this here,
20:28
just go to build
20:29
and you'll see firestore
20:30
database there as well.
20:31
So click that
20:33
create database.
20:34
Okay,
20:36
we'll do that.
20:36
Start in
20:38
production mode.
20:38
So this should not
20:45
take very long at all.
20:46
And then we should
20:47
be thrown into our
20:48
new cloud firestore.
20:48
Awesome.
20:50
Next,
20:51
we need to set
20:51
up security rules for
20:52
firestore in the firebase
20:53
console,
20:55
go to firestore database
20:55
rules and update them.
20:56
All right, so let's
21:00
go to the rules.
21:00
Let's go ahead
21:01
and copy this.
21:02
And I think what we'll
21:04
need to do is
21:05
just paste this in here,
21:06
hit publish.
21:07
These rules ensure
21:08
that users can only
21:09
read and write
21:10
notes that they own,
21:11
create notes with
21:12
their own user ID.
21:13
All right,
21:15
so now let's create
21:15
a firebase service for
21:16
handling the notes.
21:17
All right,
21:19
so we are going to
21:20
create this notes.js file.
21:21
And then inside of
21:23
our firebase.js file,
21:25
we're going to import,
21:27
get firestore.
21:29
So we're going to
21:29
have access to that data.
21:30
And then we're going to
21:31
export that database.
21:32
And for our page,
21:34
it looks like we are.
21:35
All right,
21:37
so it looks like
21:38
we are pulling create note,
21:38
update note,
21:40
delete note
21:40
and subscribe from
21:41
our notes.js file
21:42
that we created.
21:44
So this implementation
21:45
does the following.
21:46
Uses firestore for
21:48
CRUD operations,
21:49
subscribes to
21:51
real time updates.
21:51
It also ties notes to
21:53
authenticated users,
21:54
maintains all existing
21:55
functionality,
21:57
adds proper
21:58
error handling,
21:58
updates the UI in
22:00
real time when changes occur.
22:00
Okay, cool.
22:02
So this seems to
22:03
be everything that we need.
22:03
Let's go over here
22:05
and make sure
22:06
it's still working.
22:06
And it is.
22:08
So that's good so far.
22:09
All right.
22:10
Uh-oh.
22:11
We do have an error.
22:11
I didn't even
22:12
do anything yet.
22:12
So it says at
22:14
firebase firestore,
22:15
firestore uncot error.
22:16
The query
22:19
requires an index.
22:19
You can create it here.
22:21
Go ahead and copy
22:23
this error message
22:24
that we're getting
22:25
and just paste
22:26
it in here
22:27
and just say,
22:27
I'm getting this error
22:29
when the page loads.
22:30
The error occurs
22:34
because firestore needs
22:34
a composite index
22:36
for the query we're
22:37
using in subscribe
22:38
to notes.
22:40
You can fix this
22:40
in two ways.
22:41
In easy way,
22:42
click the link in
22:43
the error message.
22:44
It will take you
22:44
directly to the firestore
22:45
where you can
22:46
create the required
22:47
index, just click create
22:48
index on that page.
22:50
Okay.
22:51
So if we go with
22:52
the easy route,
22:52
we click this link here,
22:54
which I already did.
22:55
And it created
22:56
this index for us,
22:56
which is good.
22:58
It's not working yet.
22:59
Like if I go back
23:00
and I refresh the page,
23:01
eventually we're going
23:03
to get that error
23:03
again.
23:04
And I think it's due
23:05
to this status right here.
23:06
It says it's building.
23:08
So I don't think this
23:09
is completed yet.
23:09
Oh,
23:11
now it is.
23:12
It should work now.
23:13
Hopefully.
23:15
Okay.
23:17
Cool.
23:18
No errors, no
23:18
errors yet.
23:19
That's awesome.
23:20
All right.
23:21
So let's go
23:21
ahead and create.
23:21
Okay.
23:25
So let's do what
23:26
we got here.
23:26
All right.
23:27
So let's just copy this
23:27
and let's explain
23:29
this to cursor.
23:30
When I try
23:31
to create a new
23:34
note, I get this error.
23:36
And let's just
23:38
paste in this error.
23:39
So it says this
23:40
error occurs because
23:41
firestore's time stamp
23:42
needs to be converted
23:43
to a JavaScript
23:44
date object before
23:45
being passed to format
23:46
distance to now.
23:47
Let's fix this in
23:50
both the note card
23:50
component and where
23:51
we create the note.
23:52
All right.
23:53
Let's accept that
23:53
in the note card
23:54
and let's also accept
23:55
it in the page.
23:56
That might be
23:58
everything.
23:58
Okay.
23:59
Cool.
23:59
Let's let's
24:01
just refresh.
24:01
Okay.
24:02
So let's create
24:02
a new one.
24:03
Okay.
24:04
We'll call this one
24:04
my second note ever.
24:05
All right.
24:09
So we are having
24:09
some issues.
24:09
I think it has
24:11
something to do with
24:11
saving and grabbing
24:13
the state back.
24:14
It looks like I'm
24:15
losing characters as I type.
24:15
So that's an
24:18
interesting issue here.
24:18
But if we hit refresh,
24:19
we do still have
24:22
our note here.
24:22
We also have
24:23
this note here,
24:24
which is pretty cool.
24:24
And I think we
24:25
can delete notes.
24:26
So it looks like we
24:28
have our basic
24:28
functionality working.
24:29
There is that weird
24:31
typing bug, though.
24:32
So let's let's explain
24:33
that to cursor and
24:34
see what's going on.
24:35
Okay.
24:36
So I wrote looks like
24:36
all my credit operations
24:37
are working perfectly.
24:38
The only issue I
24:39
see is that while I'm
24:40
typing in the title
24:41
or the body field,
24:42
sometimes I
24:44
lose letters.
24:44
I think this could
24:45
be due to updating
24:46
in real time.
24:47
Maybe we could try,
24:49
maybe we could have a
24:50
bounce delay implemented.
24:51
And basically what that
24:52
is is instead of
24:53
something updating every
24:54
time you type,
24:56
we could have like
24:56
a three second delay
24:57
or something like that
24:59
before it updates.
25:00
That way it doesn't have
25:01
to update as you type.
25:02
Yes, we can implement.
25:03
Oh, it's called
25:04
debouncing.
25:04
Okay.
25:05
Well, at least it
25:06
knew what I meant.
25:06
So that's cool.
25:07
Yes,
25:07
we can implement
25:08
debouncing to reduce
25:09
the frequency of
25:10
updates while typing.
25:11
Let's create custom
25:12
hook for debouncing
25:13
and update the
25:14
homepage to use it.
25:15
Okay, cool.
25:16
So we're going to
25:17
create a new hook
25:17
called use debounce,
25:19
which I think is
25:20
such a cool word.
25:21
And then we're going
25:23
to update our page
25:23
component to use it.
25:24
Awesome.
25:26
All right.
25:26
So do have our
25:27
old note here.
25:27
Let's just go ahead
25:29
and delete it.
25:29
Make sure everything's
25:31
working just right.
25:31
All right.
25:33
We're going to
25:33
create a new note.
25:33
I'm going to
25:34
say this is my
25:34
first ever note.
25:38
All right.
25:40
So far so good.
25:40
This is my first note
25:42
in the new notes app.
25:44
I think this
25:46
app is awesome.
25:47
All right.
25:49
Let's go ahead
25:50
and refresh.
25:50
Cool.
25:51
We still see
25:51
our note here.
25:52
Let's go over
25:53
here and create.
25:53
All right.
25:57
Cool.
25:58
So we do have our
25:58
notes working.
25:58
Looks like
25:59
I do want to see
26:00
if I can log
26:01
out and log back in.
26:02
Without any issues.
26:04
Okay.
26:05
Awesome.
26:06
So this is working.
26:06
There's really
26:08
only one small like
26:08
minor UI tweak.
26:09
And that's the
26:11
trash button.
26:12
How it shows up
26:13
on top right here.
26:14
That's a super easy fix.
26:16
And it's so cosmetic.
26:17
I'm not going to
26:18
worry about it.
26:18
But other than that,
26:19
I think this app
26:19
looks really,
26:20
really good.
26:20
So I think now let's
26:21
let's see if we
26:22
can go host this app.
26:23
All right.
26:29
So the first step to
26:30
getting our project
26:31
hosted is to actually
26:32
get the project up
26:34
on GitHub.
26:35
So I'm going to
26:36
go to my GitHub and
26:36
create a new project.
26:38
I'll just call
26:39
this notes.
26:39
And I'll just say
26:41
a simple note taking app.
26:41
And I'll go ahead
26:45
and just click create repo.
26:45
And what we'll do
26:48
is we'll go ahead
26:48
and copy the second
26:49
bit of code here.
26:50
And this is going
26:51
to push an existing repo
26:51
from the command line,
26:53
which is our
26:54
project over here.
26:54
And we'll just paste
26:56
in that bit of code.
26:56
That should track
26:57
all of our files.
26:59
And we can say
27:00
a knit commit,
27:01
commit this and then
27:03
go ahead and push this
27:04
straight up to GitHub.
27:06
Awesome.
27:07
Now the next step is
27:07
to find a hosting provider.
27:08
I personally have had a
27:10
lot of success with Versailles.
27:11
So we're going
27:13
to do that
27:13
now that we're logged
27:14
into Versailles.
27:15
If you don't
27:16
have an account,
27:16
you just need
27:17
to create one.
27:17
You can go
27:18
to add new.
27:18
We can do
27:19
a new project.
27:20
And this is all
27:21
coming from my GitHub,
27:22
which is something
27:23
that you could link
27:24
once you create
27:25
your account.
27:25
I'm going to go
27:26
ahead and click import on
27:27
our notes right here.
27:28
We do need to
27:29
set up our
27:30
environment variables here though.
27:30
All right.
27:33
Now you're going to
27:34
want to make sure
27:34
this is all looking
27:35
the way it should.
27:36
And you're just going
27:37
to click deploy.
27:37
And if you scroll down,
27:39
you'll see the deploy
27:40
logs down here.
27:41
And this will let
27:43
you know if there's
27:44
any issues while
27:44
trying to build your
27:45
application and host it
27:46
up on the web.
27:48
All right.
27:49
Congratulations.
27:50
You just deployed
27:51
a new project.
27:51
And here's a
27:53
snapshot of that,
27:53
which is pretty cool.
27:54
And click continue
27:55
to dashboard and
27:56
you'll have all the
27:57
information about it.
27:58
So by default,
27:59
it does set you
28:00
off with a domain,
28:01
but you can
28:03
click it and
28:03
you'll see that your
28:04
project is live.
28:05
We are getting an issue
28:06
trying to sign in though.
28:07
And it says fire base
28:08
error auth slash
28:09
unauthorized domain.
28:11
Okay.
28:13
So we may have
28:13
to change up something somewhere.
28:14
Let's copy this and
28:17
paste this into cursor.
28:18
All right.
28:19
So I just said
28:20
now that we have deployed
28:20
the app onto the
28:21
web with Versailles,
28:22
I'm getting this error
28:23
when I try to
28:24
sign in and I just
28:25
paste it in the error.
28:26
And it says this
28:27
error occurs because
28:28
fire base auth needs
28:29
to explicitly allow
28:30
the domains where
28:31
your application runs.
28:32
So you'll need to
28:34
add your Versailles
28:35
deployment domain
28:35
to the authorized
28:36
domains and fire
28:37
base console.
28:38
Here's how to fix it.
28:40
Go to the fire
28:41
base console,
28:41
select your project,
28:42
click on
28:43
authentication in the
28:44
left sidebar and then
28:45
go to the settings tab,
28:46
scroll down to
28:48
authorized domains
28:48
and click add domain.
28:49
All right.
28:51
Authorized domains
28:51
add domain.
28:52
And I think we
28:54
just need to
28:55
add our new domain.
28:55
Let's go ahead and
28:57
copy that and we'll
28:58
paste that in here
29:00
and click add.
29:01
Let's try to log in.
29:02
Cool.
29:05
Looks like it logged me
29:06
in and I have access
29:06
to all of my notes.
29:07
Let's delete the study
29:09
plan and let's log out.
29:11
Let's log back in.
29:14
Cool.
29:16
And it's still gone
29:17
and we still
29:17
have our notes here
29:18
and we have our fully
29:19
functioning app live on the
29:20
web for everyone to see.
29:22
Awesome.
29:24
So thanks for building this
29:24
note taking app with me.
29:26
This was a
29:27
lot of fun.
29:27
I actually really
29:28
enjoy using cursor.
29:29
Remember,
29:30
check down below for
29:30
more resources on cursor.
29:31
If you're new to it
29:33
and want to get started,
29:33
I'll see you guys
29:35
in the next one.
29:35
Peace.
29:36
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up