Original subtitles

OK, so now we're at the section where we are going to integrate Firebase into our application for mostly

authentication and a bit of storage now in order to understand what Firebase is, as well as why we

want to use a service like Firebase, I want to show you a little diagram before we write any firebase

code at all.

Weapon development is generally divided into two sections, there's front end and then there's Back-End.

Front end development consists of any JavaScript, HTML or code that comprises the application that

our users see and interact with.

So all of the code that we have written up to this point is all front end development.

This includes any of the components we've built, any of the pages we've built, any of the styling

we've written, everything that we've done is all front end development.

You can see front end development as essentially anything that the user does see or is able to see.

Back in, on the other hand, is mostly code regarding things that the user will not see.

And what is back in development?

Well, back in development generally consists of three things, at least for our intents and purposes,

with our application, there is anything related to a server, anything related to a database and anything

related to authentication.

Now, the database is generally where we store any data that is important for our application.

So what do I mean by this?

Well, right now in our application, we have this list of shop data that we use in our shop component.

Our shop component creates these collection previews based off of this shop data that has category items.

And in the category items, there are the specific items that we want to display.

Right.

These are all the items that our user is able to purchase or see.

We only have around 40 items, so it's not that big of a deal for us to store on our front end.

But if this list was thousands of items in hundreds of categories, we can see how this would be really

heavy in terms of performance for our browser.

So what we would want to do is store this on a database so that our application loads quickly.

And at the same time, it's not like at any point we want to display all 1000 of our hats, for example,

when our user navigates to our hearts page.

Nor do they need any of the information related to shoes related to jackets or whatever category if

they only want to see the hats.

Well, all of that data, those thousands of items would be stored in a database and then the server

would store the code that determines the most efficient way to request any of that data from the database.

So we on our front end, for example, a user navigates to arhats page.

They would say in our code we would write something like I want from our server, the 20 latest hats

that are available.

While our server would figure out the best way to query the database for the 20 latest hats in all of

those thousands of items that are available, it would have to figure out what our hats.

Right.

And what are the latest 20 and then what's the most efficient way to fetch that data?

That code is all back end coding, we on the front end don't generally do any of that stuff.

Authentication is the means in which our server determines that the user that is trying to access the

server or the database is who they say they are.

So if our user logs into our application and they want to request, say, all of the items that they

stored in their last session three weeks ago, we would generally store that information on our database

so that when they come back and they log in again, they would send that request to the server with

their user profile information.

Our server would then authenticate that that user is who they say they are usually with the email password,

and then they would be able to properly query the database for that stuff, because we don't want users

that aren't the right user asking for information that we don't want them to be able to have.

Right.

So one user could not access another user sensitive information that we would be storing on our database.

Firebase is generally a solution or a platform that has all of this handled for us, so we don't actually

have to write any backend code at all if we did not want to.

Now.

This course is ninety nine percent front end related, that last remaining one percent is mostly going

to cover some of the concepts of our back end so that we know what we're doing with Firebase, as well

as there's a point where we have to spin up a small server to handle our payments.

But I will show you all of that stuff later.

So definitely don't worry about that.

But we need to understand this separation so we understand where fire base ends and our application

begins and vice versa.

Firebase in itself is a great solution for us front end developers because it's created by Google,

so it handles a lot of the stuff that a back end developer would normally do for us, including efficiently

querying our database, efficiently storing our stuff.

It gives us a very easy way to do authentication, which normally to do from scratch is extremely difficult.

And it also does a lot more than what I'm covering, there's so much great things about fire base that

really helps us front end developers to get access to back end features without having to do back development.

So let's dive right in.