So in this tutorial, Siri's we're going to be creating an ever note clone, and it's going to be almost a fully functional Evernote clone.

There's going to be certain features that we're not gonna be implementing in this tutorial, such as users, although I do have another video previous video that I created where we do go over that.

So if you'd like to learn more about that, there is a link in the description below for that video, Siri's.

But in this video, we're just gonna focus on Evernote.

We're gonna be using fire base, and we're going to be using a library call to react Quill.

So I think it's time for us to go ahead and demonstrate what it is we're going to be making in this app so I can come over here and click new note.

Enter a new titles.

Call it new note.

I submitted the know, and as you can see it, select that automatically, and over here on the right, we have a text editor and we can edit the title or just call it like new note, too, and then I can come down here.

You can see it updated live, and I can go heading one.

This is a header.

And again, you can see it updates live over here.

And so I can, you know, just this is some Maur text, you know, just a show that we can have different size texts and everything.

Great.

Another note would just say test list and come in here and create a list.

You know, one, that two three agency, we can create lists.

We can make text bold.

Um, and it updates live over here, and I can go through and select each note.

I can also delete my notes and it says, Are you sure you want to delete note to a click?

Yes.

And it goes ahead and select the previous one automatically for me, and I'll delete this one as well.

And that is what we're gonna be making in this tutorial, Siris.

So I'll come over to here to Firebase.

You're gonna want to go to console that firebase dot google dot com.

Make sure you create a firebase account.

You can just go to firebase creating account.

And once you have the account, goto consul dot firebase dot google dot com and you'll be presented with this.

Go ahead and click add project and inside of here we'll just call it Evernote Clone.

And make sure you check this box and this box and click create project.

Once that finishes, go ahead and click.

Continue and you'll see this dashboard screen over here on the left click database.

Now, Fire Base has two different types of databases.

They have cloud fire store and the real time data base.

Real time data bases, their older original database and fire stores there.

Newer database.

So that's what we're going to be using when you click.

Create database.

Just make sure you click it under cloud fire.

Sore and not really time database.

So let's go ahead and click.

Create database.

Go ahead and start it in the test mode.

Click next.

Go ahead and click the, um, select the location nearest you and then done and then wait for that to finish.

Once that finishes, you'll be brought to this screen right here.

This is going to be basically a data table that shows a visual representation of your data inside of the database.

Now, if I click this rules area here, you can see that it's very similar to Java script.

It's a little different, but it's got similar syntax and you can see here says, allow Reed, right?

And what that saying is, you convey both read and write from this, no matter what.

If you're not authenticated, that it doesn't matter who you are or any of that you can read and write to this database.

So in a production environment, you're not gonna wanna have this you're gonna want have very strict access rules, and you're gonna want to set up authentication for your app.

But we're not gonna be doing any of this in this tutorial.

I do have a video where I do go over authentication, creating log in forms and sign up forms all through fire base.

I will include a link in the description for you to watch that tutorial.

Siri's, which includes those topics.

But we're not gonna go over that in this particular video, So just keep that in mind.

And so when we use and we set up our firebase within the APP itself, we're going to be exposing our a p i ke.

So if anybody were to get a hold of that.

They could just use your, um, your fire base.

So what I do is I delete my key once I'm done with the tutorial, Siri's Or just don't show anybody.

You're a P i ke either to either of those.

You'll be fine.

Just make sure you don't give away your a p i i ke to anybody.

So now that that is now that that's been said, we'd go to project overview here.

And then you go ahead and click this this little icon right here, that looks like to html brackets.

And when you click that just, ah, name this Evernote tutorial.

Leave this unchecked and click register app.

And then once that finishes, go ahead.

And I want you to copy this object right here.

Don't include the script tags.

Just copy what's inside of here.

And actually, you don't have to copy it right now.

Well, uh um, just keep this in mind.

Keep this window open.

Keep this right here, and we'll get back to this shortly.

Let's go ahead and install all of our dependencies for the project first, and then we'll paste this into our application.

So we will be using create react up in order to initialize the react application project.

So go ahead and go to this link.

I will include it in the description.

So once you get to this link, you'll see instructions on how to install create rack react app.

It's extremely simple.

And it is a Facebook tutorial on how to do it.

It's very, very short.

Very, very simple.

Go ahead and install that.

And once you do have that installed, open up your terminal window.

I'm gonna be using windows.

You can use any terminal window from either Lennox Mac or Windows to follow along.

But let me increase the font size of this really quick so you can see all of this.

Okay, that should be quite a bit better for you.

So go ahead and navigate to wherever you want your project to be, so I'm gonna be inside of my documents folder or actually drop box.

So go ahead and just navigate wherever you want your project to be, and I'm gonna say, create react ap just like that.

And then you're gonna want to put the name of the app, so to say, ever note Evernote tutorial.

And then you click Enter.

It's going to actually go ahead and install this.

Ah, this project directory tree, Um that's basically ready for you to get started on react.

So let's go ahead and wait for this to finish.

Okay?

So once that finishes, we're gonna want to go ahead and install our first dependency.

We're going to be using material.

You I for this, which is going to be a library that allows us to make styling very easy.

It's gonna handle a lot of things that just includes react components that we can use that makes things look pretty by default, essentially so that we can focus solely on react and not have to worry about writing a ton of CSS.

So let's go ahead and start.

We're gonna say NPM install at material hyphen u ie slash core.

So go ahead and install that.

And once that's done, go ahead and do NPM install at material hyphen u ie slash icons and this is going to give us a ton of icons to be able to use, which I think we're only gonna be using two icons the trashcan for delete and the pencil on paper for edit So go ahead and wait for that to finish.

Okay?

And for our text editor will be using a react quill, which is an open source library.

So we will say npm install, react, hyphen quill, Q u i l l Go ahead and install that.

And finally, we're gonna go ahead and install fire base, so npm npm install fire base.

So let that finish really quick.

All right, so that's gonna be all of our dependency is here.

So I'm gonna go ahead and clear my console and actually just type in N p m space start to go ahead and get react up and running just to make sure everything is running smoothly.

So once this pops up also, go ahead and open up my console just to see if we have any errors and we do not.

So it looks like everything installed properly.

So over here, go ahead and let's make sure we have this.

Ah, this stuff copied here.

And now that we have our firebase config copied, let's go ahead and put it inside of our app just to get that part knocked out.

So I don't have to worry about it in just a moment.

So I've got my directory opened up now and I'll go into my source folder here, and you want to open your index dot Js file?

So we're gonna want to do a quick require.

So we're gonna say const firebase is equal to require and then inside of here, we want to put inside of quotes firebase.

So a requiring firebase.

And then underneath this, we want to just go ahead and say require and then in quotes, firebase slash fire store hopes.

There we go.

Cool.

So under this, you remember we copied that stuff from fire base, so make sure you have that copied and let's go ahead and pace that here.

Now, I'm gonna change of Arctic const.

And I'm gonna get rid of these two comments right here, all right?

And what I like to do just to make it it might not actually be cleaner, but this is the way I like to do.

I like to get rid of this variable here, scared of variable, and then just take the actual object itself and paste in between the parentheses there.

That's just how I like to do it.

But you could do it either way.

So now we have firebase initialized inside of our application.

I'm saving it right now, and I'm coming over to the react up just to make sure I don't have any errors and says here it looks like you're using the development build a fire based Js sdk.

Now, this is perfectly fine.

This is saying we're using the development build, which is fine because we are in development now, we're gonna be getting this message throughout the entire tutorial so we can safely ignore this particular message.

So as you see it here in the council as we work through the tutorial, just ignore this.

It's fine.

All right, moving on.

So the first thing I I like to do is I'd like to come in here and delete all this default stuff that comes with the default react app.

So I go into ap dot Js here and inside of this return.

Actually, I'm gonna get rid of this whole thing and make it a class, so we'll come in here and say class ap extends react dot component.

And now we have a class instead of a function which the class needs to actually, um needs to implement the render function and inside of the render function, you have to return some HTML.

So for now, I'll put in a dip that just says hello, world Cool.

So I'll save that.

And let's see what we end up with really quick.

We have hello world here.

Cool.

So as most of you probably know, the way that this works is inside of the index dot Js file.

We have this app element which is represented by this AP class here because we're we're importing it right here.

And what this is doing is react dom dot rendered takes whatever's inside of here does some react magic to turn it into actual code that, um basically we write it in a react way, and then it takes that react way and turns into actual code that the browser understands.

And then it pushes it into document dot get element by I d route.

And if I come in here, you can see if I go to elements.

Do expand this scared of this, go inside a body here.

You can see there's this div here with an idea of root and everything inside of the react application is going to get injected inside of this Div called route.

So you don't actually have to.

You know, I really want you guys to understand, react.

So let's go into the public here.

And inside that index dot html, you can see that that div is actually right here with route.

So what I want to do just to kind of show you and get you really comfortable with this sort of idea is instead of call it route, I'm gonna call it, um, ever note container.

So go ahead and call his Evernote container and I want you to save it.

And I want you to take that, copy it and paste it inside of here.

So now we're injecting it inside of a difficult Evernote container instead of route, and I want you to save both of those files and come back in here and notice that it works.

Still, if you come back over here, you can see that that did has an idea of Evernote container.

So that's just to kind of get you a little bit comfortable with how react is working in that it's not entirely magic.

You can actually come in here and change some of these things.

It's not mandatory, and you can actually extend it to This is all open source.

You don't have to be afraid of react.

All right?

There's actually one more thing we need to add.

So inside of the source folder, create a new file call that helpers dot Js and inside of here, we're gonna pay some stuff, go to the source code.

The source code is going to be linked in the description of this video.