Okay.

Meeting.

Okay.

Hello.

Welcome to a very special coating trade at this ode with a slightly different looking coding train logo Fleece, um, like plants and flowers and things will start growing from here.

I'm kind of vamping here to see if people chat.

Start to say hi that the sound is working on everything, because I, uh, straight I'm on time today.

And the reason is because it's not actually me who will be presenting to you very excited to introduce to you a guest CJ from the coding garden.

The coding garden is another YouTube channel that you should definitely subscribe to if you like coating tutorials, watching them live streamed on YouTube will put links and all that stuff in the video description.

I'm sure you can find it just by typing coding garden into the search bar.

Um, CJ is an educator, a maker, and a full stack web developer.

So somebody who actually knows about proper full stack web development, which is something that I definitely did not know about.

So I'm excited to have C J here for about an hour to do a tutorial.

I mean, he'll tell you all about it.

I don't need to try to tell you about it.

I'm very I'm sure I'm gonna learn a ton watching it.

Um, So and this will be a live stream.

I am going to, uh, tiptoe off to the side and, like, sit with the laptop, looking at the chat.

So if you have questions, ask them they're all kind of compile them.

We can interrupt CJ if we need to, but always let him kind of present and then ask some more questions at the end as well.

Did I miss anything?

Can you hear Seed?

You could hear his voice.

So we're gonna do the awkward shuffle.

Now, I don't have like, um, like a professional talk show.

Kind of like coding host thing where, uh, welcome.

And I'm gonna get my microphone so I dont backs and make too much noise.

Welcome, CJ.

Okay, thanks.

So, what's then?

Um, first off, Just huge.

Huge.

Thanks to dan and the coating train and coding train community.

Yes, thank you.

And this is gonna be a lot of fun.

So the plan for today is to build a full stack application, and the idea is I'm going to build a very basic Twitter clone to demonstrate all the parts and pieces of the full stack.

So the idea is we're going to be building me our which is Twitter for cats.

Andi will have two features.

Cats can send a mu, which is like a tweet, and cats can see all the news that they have sent.

So you can see a simple animation here of what we're gonna be building.

Basically, we have a form you put in your mu, and then when you click, send it gets sent to the server, gets put in the database than the front end requests, all of them.

It all comes back and you see it all.

And we're gonna build that today from scratch.

So I have all of our objectives here.

The 1st 1 is to diagram the full stack.

So we're gonna draw a picture and talk about the different parts and pieces and how all of this interacts together.

So let's do that.

So the full stack is typically split up into two pieces more pieces than that in each piece.

But you have the front end and the back end.

What is I think that's your head.

Okay.

It wasn't Cameron.

Wait.

Um, but front and back end.

So here, I'm going to draw the front end, and then we also have the back end.

And when we talk about the front end, this is what the user sees.

So also be referring to this as the client, the client.

But this is what the user sees.

So, uh, the user is uses a web browser.

So you could think of it like it's a little box here and they type in the URL and we'll have some place to type, and they'll have a button that they can press.

But the front end is what the user actually season.

This gets loaded into a browser.

And so you could think of this on a laptop on a desktop on a mobile phone, anything that has a Web browser that is the client.

And that is the front end.

So there's also the back end, and here we have a couple different backend server.

So the 1st 1 will be known as the static file server serves server server.

And this is where all of the files that we write to run inside of a client will live on.

And I guess it's important to note that there are a lot of different ways you could build a full stack application.

But the way I'm going to build it today kind of split things up in this way.

But let me know there are a lot of other ways you could do this on on the back end.

You also might have more of a dynamic server endemic server, and today we're right of using a node.js for that.

But there are a lot of other things you could use, and specifically we are going to be using Java script for this dynamic server.

But you probably heard of PHP or C sharp or job of those different things could be running on the server here.

At the end of the day, whatever is running on here will return Jason data.

So this is we're gonna be building a Jason A P I.

So if you've heard of a P I, if you've heard the word cloud or I guess, yeah, cloud, that's really when we're talking about the back.

When you when you say it's in the cloud, it's something back in type of server.

It was good.

Cool.

So we have the quiet.

That's the front end.

We have, um, the back end.

So we will call this the dynamic server.

This is where no Jess built will be running for our static file server.

We're gonna be using something called live Server.

I believe Dan set up this to the other day on your set up, uh, ST.

So he shows how you can install that.

I'm just gonna be using it to serve up our client on dhe.

Then another part of the back end is the database, and that usually is drawn like this database.

And there are lots of different things you can use for your database.

There's metal.

Heard of sequel You might have heard of no sequel today.

Specifically, we're going to be using a no sequel database called Mongo Devi Mongo D.

And, um, you might choose a different database, depending on the application that your building.

But today we are going to be using mongo D.

B.

And really, when you build an application, you pick and choose.

Maybe what's the best type of database?

But the main idea with the database is that it is persistent storage, persistent.

That might not be how you spell it.

Store rich, but let's let's taken example.

So when you visit twitter dot com, a Web page loads and it's it's very dynamic.

There's a lot of stuff in that you have your tweets, you have other people's tweets.

You have a place where you can search and you have.

You have all of this stuff, but what really happens is when you type a euro into your browser and hit enter.

That makes a request to in this case, we'll say, a static file server.

So the moment you type in the euro, this will make a get request for some file.

In this case, it's going to request index, not HT mo and the static files for her.

Well, then respond with that file, which contains all of the HD no contents html.

And this is the code that we write and it will get loaded in the browser, and then the user will see it.

So this is kind of the first part of what's happening in the full stack.

Let's write some code.

Okay, so the first thing we'll do is set up the client side.

So in this directory here Oh, and before I forget, I did.

All of this is on get hub right now.

It's just a checklist.

But as I code, I'll push it up to get Hub.

One of the mods can potentially share this link.

I put it in the slack.

You can share it in the chat.

People want to click on it, but the first thing is will create a client folder and inside of that client folder here in the S code will create a new file and call it index dot HTM Oh, or create a basic HTML document.

The title will be Ah, twit.

Uh, our me at me Oh, twitter for cats And let's put like a little cat emoji.

There we go.

For now, I'm gonna get a little bit of this, Lincoln, The script here in the body will add a header.

And inside the header, all having each one that just says, um, same thing.

Now we're Twitter forgets.

Okay, so I have a basic HTML file.

This is what the user will see.

So in my terminal, I am currently in the client folder and here is well, run live server.

So this will start up a static file server.

And then when the browser loads, it loads that file that I created.

So if I changed that file, um, let's add more emojis cat another cat and save it live server automatically refresh, But the browser will make a get request for this file.

So let's just see it happen.

I put this you Arlen.

I hit.

Enter.

That's a get request to get the HTML, the browser receives it, parses it into the dome.

Lots of stuff happens, but ultimately this is what the user see.

So so far, we're, uh, at that first line in the diagram.

Okay?

And let's set up like a basic skeleton of a website.

So for this skeleton, I'm gonna be using this thing called Skeleton CSS eyes a very basic CSS framework.

There are a lot of other CSS frameworks out there.

Bootstrap is a really popular one or materialized.

Basically, it gives us some default styles so that our site looks good by default.

It's not like this ugly, fucked.

So let's grab this so I can just grab this CSS file and then in here.

I'll add a link to it.

There, that end, save it.

And if you go back to the browser looks a little bit nicer.

So this CSS framework automatically adds in fun and different styles to make it look a little bit better inside of the browser.

Let's add our own styles as well.

So right below here, I'm gonna add a link to Stiles Nazi SS.

And then in the folder, I'll create a new file called Stiles Nazi SS and let's just say the header.

Let's give it a class So this H one will give this a class of title and then, in our CSS will say, Title has textile line of center, and that should sent her the text.

And if we go back to the browser there is, it's in the center.

So just to talk about what's happening so far in the diagram, you'll notice that R.

H.

D mo file has a link to a CSS file and a link to another CSS file.

So what happens is the browser will load the file, and then it will see those links, and then it has to go out and request more files So let's look at the diagram here.

And so basically it first loaded the request made was made for the ht mo file.

Then it needed more things.

Basically, the browser parsed it and said, Oh, you want a CSS file from get skeleton?

Oh, you want styles?

That C S s ome or requests went out.

So there was a request here to get the styles Nazi SS.

And then the static file server, which is live server responds.

The browser takes that and then loads it in and we see some beautiful styles and they're applied to the documents.

So every single thing that's happening here is part of a request is going out to a server.

So now that the pages loaded the at this point, it's just static.

It's just sitting there.

We're seeing what we see.

It's not communicating to any servers anymore.

So what we want to do is we want to make it so that the user can type in their view and then send it off to the server.

So let's get that going here.

So we created a header.

We created the form we brought in our CSS.

Um, well, having credit form.

We will create the form, any lingering questions or anything like that.

Okay, so in here I'm gonna add a main area.

And in here, I'll add the form typically forms or what?

We used to get user input.

So if you've ever typed into a text box or something like that, it is a form.

So on this form, I want a label.

This will be for user's name, and then I'll add an input.

And this will be a text, and we'll give it an I.

D.

Of name and we'll give it a name of name and let's see what we get.

So by default, we get a nice little input box on the screen.

Let's give it some styles so built into skeleton is this class named you fool with and you'll notice that the input went all the way across.

But I don't want T to take up the whole screen, so let's add some more styles.