Up next in 10
Build a Next.js Firestore Blog Post CRUD App Using react-quill WYSIWYG Editor in Browser
Dec 22, 2025
Check the full description to find both links for payment in inr at stripe or usd at paypal all links are there:
Buy the full source code of the application at Paypal in USD Currency here:
https://procodestore.com/index.php/product/build-a-next-js-firestore-blog-post-crud-app-using-react-quill-wysiwyg-editor-in-browser/
Buy the full source code of the application at Stripe in INR Currency here:
https://buy.stripe.com/00g2bsaVrcx2czSfDE
Show More Show Less View Video Transcript
0:06
Uh hello friends today in this tutorial
0:08
we will be building a current kind of an
0:11
application inside uh fire store using
0:15
the nextjs
0:17
framework. So basically you can see that
0:19
this is a visic editor here. Basically
0:22
it's a rich editor where you can add
0:24
post, delete post, update post and also
0:27
read all the posts which are present
0:28
inside the fire store database. So you
0:30
can see this is our database and here we
0:32
are storing all the collections out
0:34
there. This is a collection. This is a
0:35
table which is called as notes. So here
0:38
we are storing all the blog post. So
0:40
let's suppose inside my front end which
0:42
is nextjs I add click this button of add
0:45
new button. So you can see this will be
0:48
the input field will be there which is
0:50
enter the title. So if I enter any sort
0:53
of title here.
0:57
So this is the blog post title here guys
1:00
you can see that
1:02
and inside the description let me paste
1:06
it. And here we can change this to
1:09
heading one like this. This is a VCI
1:12
editor. So it's a rich editor. We can
1:14
also
1:16
have uh just make this text this text
1:20
only bold as well.
1:23
And this text I will make it itallic
1:26
like this.
1:28
And this text I will make it underline.
1:32
So you can see all these operations you
1:34
can perform it. You can uh bold any sort
1:36
of text, you can underline it, you can
1:39
change the italic and also you can
1:41
insert the link as well. So click on
1:45
this.
1:47
Just put this
1:53
simply say click on this link to go to
1:58
Google. So also you can link it as well.
2:01
So if you see here, you can go to any
2:03
link here. https let's suppose
2:05
google.com. Click on save.
2:08
So this is now a link here basically.
2:11
Now you can see it's underline here.
2:12
It's is in blue color. And also here
2:17
similarly we can have
2:20
ordered list as well like this.
2:25
And similarly we can have unordered list
2:27
as well like this. So then we can
2:30
quickly uh simply save note. Save this
2:32
note here. And now if you refresh it now
2:35
this is the title of the blog post that
2:37
you can see here it is inserted. If I
2:39
check the database of fire store and if
2:42
I refresh here basically
2:46
if I refresh my back end of firebase you
2:50
will now see a newly created blog post
2:54
will be inserted here. If I check here,
2:56
you will now see basically this is a
2:58
note description H1 tag. K Williamson is
3:02
the captain. You can see paragraph
3:03
paragraph then you can see. So all this
3:06
is converted to HTML and it is
3:08
successfully inserted to the fire store
3:11
database. So if I click any of the
3:14
individual if I click on this blog post
3:17
guys. So on the right hand side you will
3:19
now see this will show here. But
3:21
whatever we have previously written, you
3:23
can see in the live review it is showing
3:25
you Kane Williamson the captain. You can
3:28
see this will be in the bold text. So
3:32
this is a link here guys. If I click to
3:33
this link it will redirect me to
3:35
google.com. This is your ordered list
3:38
unordered list. So basically it's a kind
3:40
of a blog that we have created. So it's
3:44
a blog that we have created using the
3:45
visick editor. So you have seen these
3:48
visic editors guys inside WordPress as
3:51
well. So basically if you build your own
3:52
website you have called as vivic rich
3:57
text editor. So let's suppose I want to
3:59
add a new blog post on my website. So
4:01
again I see this vivic editor guys you
4:04
can see bold italic all that stuff is
4:06
available. So similarly we are
4:08
integrating this inside our own
4:10
application which is uh this you can see
4:13
here vis editor and for including this
4:15
guys we are using a library called as uh
4:18
if you all know this library react coil
4:21
react coil is a library which we are
4:23
using here react-
4:26
quill this is a library guys it's a very
4:29
good package which is available for
4:33
wrapping this editor which is quil rich
4:37
text editor. So, Quill is the name of
4:40
the text editor. So,
4:45
so this is the text editor we have. So,
4:48
it is available for any language
4:50
Angular, ReactJS, Vue.js, JavaScript.
4:52
It's a powerful rich text editor. So,
4:55
specifically in order to include inside
4:57
NextJS and ReactJS application, we have
4:59
this library React Quill. So, you can
5:02
check out this rich rich text editor
5:04
guys. It's very popular opensource. It's
5:07
it is not a paid text editor. You can
5:08
download this on inside your computer.
5:11
So in this way we are doing this stuff
5:14
and the rest of the operations if you
5:16
want to update it you can click the edit
5:19
button. If you click the edit button you
5:21
can change the title to any title of
5:23
your choice. You can also change here
5:25
like this.
5:30
After updating it you can click the
5:32
update note button. If you click it, it
5:35
will refresh. And now you can see your
5:37
title is changed, your description is
5:39
changed, all that stuff is changed. And
5:41
now if you want to delete it,
5:44
you can simply click the delete button.
5:46
So it will delete it your note
5:49
also. You can delete this note as well.
5:51
So So no note is present right here
5:54
guys. If you check here, nothing is
5:56
present here.
6:04
So no document is present here. So we
6:07
need to create a notes collection or
6:10
table. So inside this ID will be
6:13
automatically generated and note title.
6:17
Here we can give anything here. We have
6:20
just two two fields out there. No title
6:23
and no description. That's it.
6:26
So if you click save this so one
6:29
document will be inserted here and if
6:31
you now refresh your application it will
6:33
definitely work here. So it will show
6:35
this will now see.
6:44
So this is a title and this is a
6:46
description. So that's it.
6:48
So in this way guys you can do this
6:50
stuff very simple. We will try to build
6:52
it from scratch. If you are watching it
6:54
for the very first time then please hit
6:55
the like button subscribe the channel as
6:57
well if you're watching it for the very
6:59
first time. So
7:02
please hit the like button subscribe the
7:04
channel as well if you're watching it
7:05
for the very first time.
7:11
So let's start building this application
7:13
guys from scratch. So the very first
7:16
thing we will do is that we will go to
7:18
our
7:20
so let me just give you the full source
7:22
code guys. So for in for this
7:25
application I have written a complete
7:27
blog post on my tutorial website
7:28
codingsure.com. So here you will find
7:31
all the source code step by step. So in
7:34
the live chat let me give that source
7:36
code to you.
7:38
So if you want the full source code you
7:40
can here go to this link here and
7:43
basically get all the source code and
7:45
follow along with the video. Let me pin
7:47
this message right here at the very top.
7:50
So now first of all guys what we will do
7:52
is that we will go to the project
7:54
directory and simply here
7:59
we will make a new directory here which
8:02
is react editor
8:06
sorry react block. We will cd into this.
8:10
And now we will make a new next app here
8:15
which is react block.
8:20
So this will create a new nextjs project
8:23
guys inside this directory. So react is
8:26
necessary for nextjs as you all know
8:28
basically.
8:31
So it will install this. So simply wait.
8:34
It will hardly take six to 7 seconds for
8:37
installing this.
8:40
So now it is just installing it.
8:48
So now it has successfully installed it
8:50
guys. So we can simply go into the
8:52
folder which is react block.
8:58
So we can now open this inside visual
9:00
studio code text editor. So basically
9:02
this is your brand new nextjs project
9:04
guys. So we can now open this and for
9:07
doing this we need to install some some
9:08
dependencies. So first of all we will
9:10
install this dependency. We we'll be
9:13
using SAS for this tutorial. So you need
9:15
to install SAS and also we will install
9:18
react coil library which is this library
9:22
in order to connect to Vivic editor. So
9:25
just go to the command line and simply
9:27
type this command npm SAS s a s and then
9:31
react-q
9:34
and thirdly we also need to install
9:37
firebase. So install this three
9:40
dependencies guys which will be
9:42
necessary for this project which is SAS
9:44
react and firebase. So this will hardly
9:48
take 5 to 10 seconds and it will install
9:50
these dependencies inside your project.
9:53
So,
9:58
so now you can see it is successfully
10:00
installed it. So, now we can in start
10:02
your server npm rundev. So, this will
10:05
start this at localhost 3001. So,
10:12
so this is our brand new nextjs app
10:15
guys. You can see that this is a welcome
10:17
screen. And
10:20
now we need to first of all configure
10:24
the fire store database guys. So just
10:26
create a new Google account and simply
10:28
go to your Firebase project settings and
10:32
simply you need to create a add new add
10:34
new app button here and when you click
10:37
your add app button you will get these
10:39
instructions basically.
10:42
So this is a newly created app web app
10:46
and you will get this Firebase config
10:48
object. So this object will be unique
10:51
for you guys. So don't copy my object.
10:53
So inside your root directory you will
10:55
create a file which is firebase
10:57
config.js.
10:59
So this is a file that we have created.
11:01
So,
11:04
so now inside this file guys, first of
11:06
all, you need to
11:10
import
11:11
the initial app initialize
11:17
function initialize app function from
11:19
Firebase / app
11:22
and also we need to get the fire store
11:25
reference. So, get fire store and this
11:28
needs to be imported from Firebase/
11:31
fire store
11:33
like this. So now basically we will
11:35
import this firebase config object guys.
11:38
This will be different for you. So don't
11:40
copy my details here.
11:43
And also at last we need to export two
11:45
com uh variables which is app. So here
11:48
we will initialize this app pass in this
11:50
Firebase config
11:55
object here. So next we need to also
11:57
export our database
12:01
fire fire store database. So in order to
12:04
connect it we will say get fire store
12:06
and pass this app reference. That's it.
12:09
So this completes the coding inside this
12:11
file guys you can now close this file.
12:13
Simply close it. And now inside you can
12:15
need to move to your pages directory and
12:17
inside your homepage. And here we don't
12:20
need anything here. Simply you need to
12:22
delete all this stuff.
12:26
You don't need the footer like this. So
12:29
here you can change the title that next
12:31
JS
12:33
uh blog post CRUD app in fire store.
12:38
So this is meta tag link tag. So this
12:42
image we don't need.
12:47
So,
12:50
so inside this guys we will be
12:54
if you see we need to make two
12:55
components for showing the blog post
12:58
details and also for adding it.
13:05
So I have given all the source code in
13:07
the description of this live stream. So
13:10
first of all what we need to do is that
13:12
uh
13:15
let me see
13:19
so some comments are there let me know I
13:22
DSH amp is there 221 is there so keep
13:25
watching this tutorial guys please hit
13:26
the like button subscribe the channel as
13:28
well and uh if you see here I have have
13:32
this
13:35
index dot js file
13:44
Yeah, there is a
13:47
so this is the file I require.
13:52
So basically guys here what we will do
13:54
is that we will simply paste it here
13:57
inside this.
14:00
So here what we are doing guys you can
14:02
now see uh let me show you from scratch.
14:13
So you can see that uh
14:16
after this uh head section let me tell
14:20
you what we are doing right here. We are
14:23
basically uh let me delete this. First
14:26
of all, we will make this component
14:28
which is called as note operations. So
14:31
basically this note operations will take
14:33
this function which is single note. So
14:36
we need to now make this function here
14:37
at right here at the very top which is
14:41
get single note and basically we will
14:44
pass the id to this function. So now we
14:49
will be having a which is id set id and
14:53
uh we will use the use state hook and
14:55
initial value will be null
14:58
and here inside this function we will
15:00
call this hook function and we will
15:03
initialize this id.
15:06
So,
15:09
so we will create this reacts component
15:12
guys which is note operations and we are
15:14
passing
15:15
this function as a property. You can see
15:17
that this is a function here. So,
15:19
basically we are passing this function
15:20
as a property. So, this will be called
15:23
as get single note. So now inside your
15:25
root directory you need to create a
15:27
components folder and here you need to
15:29
create your first component which is
15:32
note operations. from from the name
15:35
itself it would perform all the
15:37
operations CRUD operations such as
15:39
create, read, update, delete. So it's a
15:42
functional component. So basically we
15:44
will simply say here export
15:47
default function note operation. So we
15:51
will not require this line.
15:54
So right here guys what we need to do is
15:56
that first of all we will have a simple
15:58
form where we will show the form to the
16:00
user so that they can insert some blog
16:03
post inside our firebased fire store
16:06
database. So right here basically in
16:09
order to show this
16:13
uh we will have a simple form.
16:22
So
16:25
right here guys basically we will have a
16:28
a div and which will have a class name
16:32
of
16:34
styles dot input container. So we will
16:37
be writing the styles later on guys
16:39
inside our styles folder. If you see
16:41
here we have the styles folder. We will
16:43
create a new SAS file for this. So for
16:45
now simply write the styles.input
16:47
container. And right here guys we will
16:50
have a simple input field of input
16:54
and we will be giving a class name once
16:56
again to this styles doinput
16:59
and placeholder will be simple
17:03
simply we will say here enter the title
17:08
and then
17:10
that's it. So here guys we need to
17:12
import the
17:15
styles here which is
17:18
so right here inside the styles folder
17:20
guys you need to create a file ever
17:24
module dosas
17:26
this will be a SAS file guys so
17:28
basically
17:30
just do it
17:33
and inside now inside your components
17:35
folder you can import this at the very
17:38
top import styles
17:41
from
17:43
our styles folder.
17:48
Sorry. Uh dot dot
17:51
slash dot dot slash.
17:56
So where have
17:59
we have created this? Let me see inside
18:02
our components folder. So,
18:09
dot dot
18:17
let me see dot dot styles
18:22
error note
18:26
module dots. This is a file here.
18:33
note operations doc CSR.
18:40
So after this guys uh basically here we
18:44
will also have some hooks variable. So
18:47
right here inside this component. So
18:49
basically here we will have here
18:53
first of all for the note title
18:58
there will be a function to set that
18:59
title. So set note title.
19:03
So initial value will be use state we
19:05
will again use will be empty by default.
19:08
Same goes for the description for the
19:10
node description
19:14
set node description
19:18
initial value will be empty
19:23
like this guys you can now see
19:27
and we will be storing all these blog
19:29
post guys inside a array. So we will
19:31
simply call this as notes array
19:34
and uh function will be set nodes array
19:39
and
19:41
initial value will be an empty array. So
19:43
basically like this.
19:52
So basically guys if you see here inside
19:54
our index.js we are passing this
19:58
function as a property. So get single
20:00
note. So right here inside this so this
20:03
will
20:04
be passed you can see we are passing
20:07
this function as a property. So get
20:09
single note. So here what we need to do
20:12
is that here we need to assign the value
20:15
here which will be nothing but simply
20:17
this uh uh note title
20:24
and also now we will have the second
20:27
field for the description. So basically
20:30
here we will
20:36
so here we will have for the description
20:40
we will have a
20:43
if you clearly see here we will have a
20:45
class name
20:48
which is called styles do react.
20:53
So basically here guys we need to embed
20:54
that vis text editor. So we can include
20:58
this react quill. So it will be imported
21:01
right here at the very top from react
21:03
quill. You can now see. So this text
21:05
editor guys basically take some options.
21:07
The value it will take automatically
21:09
from that hook function which is node
21:12
description. That's it.
21:16
And now we will be attaching the
21:17
onchange as well guys. So whenever the
21:19
value changes here inside this input
21:21
field. So this automatically execute
21:23
this function which is e parameter will
21:26
be passed as event. So here we will call
21:28
this hook function which is set node
21:30
title is equal to e.target dot value.
21:34
That's it. Similarly we will assign this
21:37
on change to this also which is onchange
21:41
and here we will be calling this
21:44
function which is add description. So
21:47
this function we will call which is a
21:51
custom function and after this guys we
21:53
will have a simple button
21:56
which will simply say save note
22:00
and uh we will also give it a class
22:03
name. So this class name will be styles
22:06
dot save button and also we will be
22:10
attaching a on click to it. So when we
22:12
click this button we need to insert the
22:14
data inside the fire store database. So
22:16
we will create this function which is
22:18
save note. So now we need to create
22:20
these functions here right at the very
22:22
top guys. So the very first function we
22:24
will create is this save note which will
22:26
actually save the note.
22:31
So save note this will be an arrow
22:33
function.
22:35
The next function we'll create is this
22:37
uh
22:40
uh add description
22:42
which will again be a arrow function. So
22:44
whenever the value changes of this visic
22:46
rich text editor the value will be
22:48
passed here like this. So we can now set
22:51
this value set the node description to
22:55
the value. That's it.
22:59
And uh after this guys what we need to
23:02
do is that inside this uh
23:07
save note we need to insert the data
23:14
to fire store database. So for
23:16
connecting to the fire store database
23:18
guys we need to first of all get the
23:20
instance of the database. So we can
23:23
declare a variable here right at the
23:25
very top DB instance and here we will
23:28
get the collection. So collection will
23:29
be imported from firebase/f fire store.
23:32
So the collection we will pass the
23:35
database first of all database will be
23:37
coming here. You can now see
23:41
uh we'll be coming from firebase config.
23:44
So you will see in fire inside firebase
23:46
config we have uh exported this variable
23:50
which is database. You can see here. So
23:54
database is connected. You can see it is
23:56
coming from this Firebase config. So now
23:58
we need to give the collection name. So
24:00
collection name is nothing but the table
24:02
name. You can give any name of your
24:04
choice. But I will give here let's
24:06
suppose blog post.
24:10
Blog post. So now just go to your editor
24:14
guys. So go to your fire store database
24:16
and simply you need to create this uh
24:19
collection.
24:20
So just delete your existing collection
24:22
which is notes.
24:26
Just delete it and simply click on start
24:29
collection and simply give the
24:32
collection name which is blog post.
24:33
Click next and this will automatically
24:36
generate it and this will be node title.
24:40
This will be a string.
24:43
Uh can have anything.
24:46
This will be node description.
24:50
This will be a string also. So click
24:52
simply click save. So now your
24:54
collection has one record here which is
24:57
note title and description. So now now
24:59
we can put this collection name here. So
25:02
now we inside this save node guys we can
25:05
call this simple method which is add
25:07
document
25:09
which is there inside fire store to
25:11
insert a new document. So here we will
25:13
pass the DB instance put a comma and
25:15
then we need to pass the data which we
25:18
need to insert into the document. So
25:20
this will be no title which will be
25:22
equal to the node title
25:25
and node description
25:27
is equal to node description. So you can
25:30
see this is the same column name that we
25:33
are writing here. If you clearly check
25:35
here if we have defined these column
25:36
names inside fire store database this
25:39
needs to be same no title no
25:41
description.
25:45
So now basically this will return a
25:47
promise we will handle this by dot then
25:51
and this will return a call that
25:53
function. So basically here we will
25:54
clear out the entries by setting set
25:57
node title to once again empty. Set node
26:00
description to what's once again empty.
26:03
And that's it.
26:08
And now basically if you refresh it guys
26:11
hopefully if I go to localhost 3000.
26:15
So basically it will tell me that styles
26:17
is not defined. So now you need to
26:19
define these styles guys. So inside your
26:23
this file here, we need to uh define
26:26
these styles. So this video is not about
26:30
CSS but uh uh let me just write it if
26:35
you want to this we are importing some
26:38
custom fonts here of Google and then we
26:42
have these variables guys for the
26:44
coloring scheme. So this is very much
26:46
useful inside SAS. You can define your
26:48
own colors as well. Anytime if you want
26:50
to change it, you can simply change the
26:52
variable.
26:54
And then you have to give container
26:58
class a simply a display flex width of
27:03
30 area.
27:05
You will style your button input field
27:07
like this. This is a save button.
27:14
So I will not write it guys. Simply
27:15
paste it just to save some time because
27:18
this video is not about SAS or CSS.
27:22
Simply just write this now you will see
27:24
if you refresh it.
27:26
So it is saying that styles is not
27:28
defined. Oh sorry I think inside our
27:32
root component root page we haven't
27:34
imported this. So we need to import this
27:42
uh styles
27:46
which is
27:48
home module
27:50
dot CSS. I think this is the name here
27:53
of the file home module. CSS. So if you
27:56
now refresh it.
28:11
So if you check here, if you're watching
28:14
it for the very first time guys, then
28:16
please hit the like button, subscribe
28:17
the channel as well. So if I clearly
28:20
check here inside my
28:26
index.js.
28:47
So we need to copy this file. Sorry, not
28:50
the home one. So simply copy this one
28:53
which is evernote module dots. This is a
28:56
file here. So it contains this container
28:59
class. You can see that. So now if you
29:02
refresh it hopefully this time.
29:06
So it is saying note operations is not
29:08
defined. So we need to include that
29:10
component. So right here.
29:20
So note operation
29:24
is defined here. So
29:29
it is saying that document is not
29:31
defined.
29:38
If you see here if I
29:42
note operation
29:48
uh so get single
29:55
I think some error has taken place which
29:57
is operation
30:08
Let me rename this to note operations.
30:28
So why it is saying this?
30:36
So it is saying that document is not
30:39
defined.
30:55
Uh let me paste that code guys. I think
30:58
I'm just doing some mistake inside the
31:00
index.js.
31:14
Let me paste it here.
31:18
paste this code here like this. So,
31:25
so we are passing this as a property.
31:28
So, here let me delete this one. So,
31:30
note operations we are calling it.
31:37
So hopefully if I refresh it now
31:45
can't resolve the component which is not
31:48
operational.
31:51
Sorry here we need to import rename this
31:53
to note
31:55
operation sorry note operations like
31:58
this.
32:00
Just do it like this.
32:04
Import
32:11
note operations for components. Note
32:14
operations.
32:31
So now note operations.
32:42
What is this error? Is the document is
32:44
not defined.
33:07
Uh, let me see guys. Uh,
33:10
I think I'm making a silly mistake out
33:13
there.
33:18
Oh, I think I haven't included the SAS
33:21
module here. So, that's the problem,
33:24
guys. I think
33:32
SAS.
33:38
So if I just rename this to CSS guys,
33:41
don't SAS here. Let me just rename this
33:42
to CSS.
33:44
So,
33:50
let me change the
33:53
color to black
33:57
and color to
34:15
I think it is doing it because of
34:22
the SAS here.
34:29
So remove this. So now this is a CS CSS
34:32
file here. So we can simply include the
34:34
CSS file. Just change it to CSS. And
34:38
also here also.
34:42
So if you refresh it.
35:08
So let's start this application once
35:10
again. So it is running on local host
35:13
3000. So it is successfully compiled.
35:22
So basically it is saying that it is a
35:24
server error. So
35:29
oh
35:34
I made the dumbest mistake guys. You can
35:37
now see this needs to be in the pages
35:38
directory. this components I have
35:40
initialized it inside outside outside
35:43
you can now see we have initialized this
35:45
components to be outside so that's not
35:47
the way you need to create this
35:50
components folder inside the pages
35:52
directory so you need to do like this
35:55
this was the mistake that we are doing
35:56
here so just no details for js
36:07
that's the thing guys that we are doing
36:09
it.
36:22
So that's the thing that we are doing
36:25
guys.
36:30
So just replace it with
36:37
just rename it to SAS guys. So now this
36:39
file will definitely work.
36:43
There was no error with the SAS. It was
36:45
just this problem. We need to delete
36:47
this folder here. Just delete it and go
36:51
to index.js JS and simply here also
37:03
include this file. So now hopefully guys
37:06
this will now work if you refresh it.
37:12
So it is saying that can't resolve note
37:15
operations.
37:17
Let me see
37:20
just delete this line and include this
37:24
remote operations. So now you can see it
37:26
is included this
37:30
can't resolve Firebase config
37:34
Firebase config
37:40
Firebase config sorry
37:49
like this
37:51
hopefully guys not
38:13
Let me just say here hello world.
38:22
Why this is showing me document is not
38:24
defined. I
38:28
so someone watching here guys in the
38:29
comment section can you tell me why it
38:31
is showing me document is not defined
38:33
every time because I moved this folder
38:36
if you see here that was a problem. We
38:39
need to define this components folder in
38:41
the pages directory which is node
38:42
details.js.
38:44
So right here.
38:53
Oh, sorry.
38:57
Not operations.
39:00
Why I'm doing silly mistakes? Now here
39:05
this is note operations. I was doing it
39:08
note details.
39:11
So
39:15
now if you reload the page guys,
39:16
hopefully this time
39:37
So nothing is present here. Let me write
39:40
something here.
39:44
So now it is working here as I include
39:47
this component which is
39:52
note operations
40:00
export default
40:02
function note operations.
40:29
Note operations is not defined.
40:34
Go.
40:45
I've defined a hello world. Yes, we can
40:49
now run this. Now see
40:52
at last we can run this now guys. So we
40:54
need to pass this attribute to this.
41:00
So we need to pass it
41:04
get single note. So get single note this
41:08
function we will pass it as a property.
41:10
So now basically we will paste it
41:14
guys.
41:17
So here we will paste our
41:22
uh simply we will paste it
41:38
inside this div basically here we will
41:40
paste the form that we written
41:42
previously guys. So this will be input
41:45
field out there.
41:48
Set node description is not defined.
41:54
This needs to be set
41:57
node description. This needs to be node
41:59
description.
42:01
This needs to be
42:06
update note. We don't need to write
42:08
here.
42:14
We just refresh it now. Hopefully guys
42:15
it is working now.
42:26
So this is your title field guys you can
42:28
now see. So basically we need to import
42:31
this styling. We need to also import the
42:34
styling. soon.
42:52
I think is it is for the edit button
43:00
array. This is not operations. This is a
43:03
file that we need to save.
43:05
I'm full confusion in this video guys.
43:08
Sorry for this.
43:10
This needs to be this not this.
43:17
Let me paste it.
43:21
Format this document. So
43:26
it is saying some error is there.
43:34
So add description is not defined.
43:37
Sorry, this needs to be
43:42
add description. This is to be mode
43:44
description.
43:50
So if you
43:52
have this now
44:01
document is not defined.
44:06
Sorry.
44:20
So, hit the like button guys. Subscribe
44:22
the channel as well if you're watching
44:24
it for the very first time.
44:27
I will make sure that I complete this
44:29
app.
44:31
So basically there is so much errors out
44:33
there. I
44:49
think. Let me surround this.
45:05
So refreshing now.
45:20
Just let me see guys now. Let me
45:26
delete this. Delete this.
45:33
and also delete this.
45:39
So basically here we will have a simple
45:41
button.
45:43
Basically it will say that add a new
45:45
note.
45:54
So there's no options.
46:06
So let me paste it once again. So I
46:09
think what we are doing right here uh
46:13
here we are looping through we are
46:14
displaying all the notes. So we we will
46:17
do it later on. And this is the
46:21
few.
46:32
If I refresh this page,
46:36
document is not defined.
47:04
Let me search this error guys. Why this
47:06
error is taking place so much? Document
47:08
is not defined.
47:40
Uh let me move on to this project guys.
47:43
So uh let me open this
47:48
uh
47:52
uh let me start this project which was
47:54
working early on. So npm rundev
47:58
and let me start this. So you can see
48:00
local host 3001. So it has started this
48:03
at
48:16
so if you go to localhost 3001 guys. So
48:18
this was the previously working
48:20
application. Now you'll see that. So,
48:44
so if you check the database,
48:49
so that is not working because we
48:51
changed the database name here. So
48:53
that's why it is not working. So if you
48:55
change this database name to blog post.
48:58
So now this will work. If I refresh it.
49:01
So basically uh it is saying that single
49:04
note not title.
49:16
So here you need to change it. here
49:19
which is blog post. This is the
49:22
collection name. So if you refresh it
49:25
now
49:28
so this will display this now you can
49:29
see that.
49:33
So basically what we need to do is that
49:35
here
49:38
we will
49:39
we delete this node details section here
49:43
and start from scratch. So we were
49:44
there. If you see here,
49:47
we were there. Here
49:53
we have successfully created this form
49:56
here. If you clearly see here,
50:03
let me delete this.
50:14
So we have that form guys. So let me
50:16
also delete this.
50:19
We have written this function save note
50:21
which will actually insert the data
50:22
inside the fire store database and also
50:24
this add description.
50:26
So now we have this hooks variable. So
50:29
right here we have this database guys.
50:31
So we change the name is blog post which
50:34
is the collection name. So right here
50:37
guys, if I now refresh the page, it is
50:40
saying that
50:43
uh fail to read source code from
52:01
So I think it is coming because of
52:07
inside this file. You can now see we
52:09
also need to delete this
52:15
like this.
52:17
So inside note operations we will
52:23
delete this. Delete this.
52:41
So up till now we have this. Now guys if
52:44
you see clearly see here let me change
52:46
this to blog post the collection name.
52:54
Let us
53:01
so react. Not cool.
53:32
So if you're watching it for the very
53:34
first time guys then please hit the like
53:36
button subscribe the channel as well.
53:42
So two people are watching the stream.
53:44
So first of all hit the like button
53:46
subscribe the channel.
53:52
Okay.
54:27
Imagine
54:38
not using TypeScript. No, I'm not using
54:40
TypeScript here. It is just uh
54:44
JavaScript. But sometimes it can create
54:47
some problems while live coding it.
54:50
Early on I developed this project, no
54:52
problem was there. But now all of a
54:54
sudden problems occur. So you can't say
54:57
in live coding errors can display. So
55:00
note operations. Let me copy this code
55:02
here and paste it.
56:02
So now hopefully guys now you can see
56:04
that.
57:34
So if you're watching it for the very
57:36
first time guys then please hit the like
57:37
button subscribe the channel as well. So
57:40
basically
57:42
let me see.
57:49
So now let me paste this whole code
57:51
here. And now if you
58:00
So there is a button add new note here.
58:03
So if you click this button it will
58:05
toggle this text editor. So here you can
58:08
enter the title, enter the description.
58:10
So here for this you need to change the
58:14
collection name which is a table name to
58:16
blog post because inside our Firebase
58:18
store we have created this collection
58:20
which is blog post. So right here guys
58:22
what we need to do is that if you see
58:25
one collection will be displaying here.
58:27
You can now see this is a collection. If
58:30
you click it
58:32
click
58:34
save note.
58:37
So one collection will be again be
58:38
added. You can now see.
58:41
So this is per perfectly working here.
58:43
If I click anything here if I make it as
58:46
heading click again save note. So our
58:49
collection is now inserted. So now if I
58:51
check the fire store database three
58:53
records would be present right here. So
58:55
you can see that.
58:59
So
59:01
we now see we are calling this function
59:04
save note you know to add a new record
59:06
inside the fire store. This returns a
59:08
promise and now to fetching all the
59:11
notes when we load load the page for the
59:13
very first time. If you see when the we
59:15
load this all these records are
59:17
displaying it. Here we are using the get
59:20
notes method here. So it will call this
59:23
methods get docs. You can see it is
59:25
available. Get docs is a function which
59:28
is from fire store.
59:31
And here we are passing the database
59:33
reference and then it returns a promise
59:35
and we are calling this method get set
59:37
nodes array. So we are looping through
59:41
you can see we are saying data dot docs
59:43
do map for each item we will be
59:46
displaying that item here
59:50
and right here in the bottom position we
59:52
are displaying this we are calling node
59:54
stap.
59:55
So we are returning this.
1:00:29
So this is for the adding and the
1:00:31
showing of the blog post guys. Now we
1:00:34
will have a second component which will
1:00:36
be actually responsible for
1:00:39
note details. So it will actually show
1:00:42
the details of the
1:00:51
so you can make export default function
1:00:53
mode details.
1:00:56
So here inside your component we can
1:00:58
include this. So
1:01:05
so simply include this. So here we will
1:01:08
be passing the ID to it. So we will pass
1:01:12
the ID
1:01:17
to this component. That's it.
1:01:20
That's a property.
1:01:41
put it like this. So this will be having
1:01:44
this as a property guys. So inside this
1:01:47
it will receive it as a props object.
1:01:53
So first of all guys uh basically
1:02:04
so inside this we will again have the
1:02:07
same
1:02:11
I think more details we need to
1:02:38
So if you're watching it for the very
1:02:40
first time guys then please hit the like
1:02:41
button, subscribe the is full.
1:03:48
I think here we need to change the
1:03:51
collection name which is blog post.
1:03:58
So now you can see we have these buttons
1:04:01
out there. If you click any of this,
1:04:08
click edit.
1:04:31
So if you want to see my subscribers
1:04:33
guys, how many subscribers have I
1:04:36
increased here?
1:04:40
Let me show you.
1:04:48
I'm really tired guys. So I can't code
1:04:51
now. So
1:04:54
I've shown you the application. So you
1:04:56
can hit the like button, subscribe
1:04:59
button.
1:07:44
Hey,
1:07:52
hey, hey.