After a long, long wait, were finally gonna be building another back and project.

And this one is a ton of fun.

We're gonna build a girl short inner, which is going to have all the works.

We're gonna have a u ie a back end, a database, absolutely everything you need to get this project 100% done.

So let's get started.

Now, After you're done building this project, you're going to need some place to host it and atlantic dot net, today's video sponsor is giving you an entire free year of hosting on their servers.

And these air some powerful servers that can definitely handle this application and even much more complex applications.

All you need to do is use the link in the description below and use the code.

Kyle, when you sign up and you're getting an additional $50 on top of the year of free server usage, so make sure you check out that link down to the description of Low to not miss out on this entire year of free hosting.

Welcome back Toe Web.

Dev simplified My name's Kyle and my job is to simplify the web for you so you can start building your dream project sooner.

So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one.

And now to get started, I'm in a completely blank project so I can show you exactly what you need to do Step by step.

And the first thing we need to do to get started is open up the terminal and actually initialize this folder as an N.

P M.

Project.

So let's just drag this up.

So it's easy to see and we'll type n p m on it.

And this is going to initialize the folder for us.

We're gonna do all the default values hit, enter a bunch of times.

And if this goes you and error, make sure you have knowed installed.

I have a video on that all link in the cards and description down below.

And now our next step is to install the packages we're going to need for this project.

I'm just gonna get started with the very basic packages.

And as we run into needs for other packages, I'll introduce them then.

So since we're gonna be running an express server, which is going to have Ah mongo D B database.

We're gonna need to install packages related to express and mongo d be.

So if we just type in N p m I this will allow us to install any packages we list afterwards, and we're gonna need express.

We're also gonna need monkeys, which is for our database mongo D B.

And then we're gonna need E.

J s.

This essentially allows us to create our views are template ing language so we can make our HTML and are back and work together to send useful data down to the browser.

And there we go.

All of those were installed, and the last thing we need is our dead dependencies.

So which type in N.

P.

M I Dash, dash, save Dash, Dev and we want to install node mon, And what no demon is going to allow us to do is to make our server automatically refresh every single time we make changes.

Because otherwise you have to manually shut the server down and restart it yourself.

So with all of that done, we can open up our package.

Da Jason, You can see all of our dependencies here and let's just create a simple start script.

So we're gonna call this Dev Start and this is going to run node mon server dot Js And this is going to start up a file called server dot Js using node mon, which means it'll auto refresh forest.

So let's save that and create our server dot Js file And in here we can actually put all of the code for application.

So to get our server set up, let's just make the most basic server possible.

The first thing we're gonna need is that express library which we installed just a little bit ago.

So let's make sure that we require that library and if we run the express function, we're gonna get out of variable, which we can use to set up our entire application.

So we're gonna put that inside of app.

Then with that variable, we can call app dot Listen, we just need to pass in the port number we want to listen to.

So we're gonna use process dot e n v dot port This way, when you deploy your site, you can set the port environment variable and use that, but in development we're not gonna have that variable set.

So it's just default to Port 5000 instead.

And now we can say that.

And if we run NPM Iran Debs start, you can see that our server is going to start up and it's gonna open up on Port 5000.

Let me just drag in a browser that has poured 5000 up in.

And as you can see, we have our application open and it's saying it cannot get slash.

Essentially, we have no route defined for our index, so it's just to find a simple route.

We'll call it ap dot get this is going to be for Index.

This is going to take a function here with request and responsive variables that are being passed into it.

And in here we want to actually return some index file that we're going to create inside of a folder called Views.

Now in that folder will just create index dot e gs.

And the reason we're using dot e J s is because that's the template ing language we're gonna use.

And we downloaded that package for handling E.

J s.

So once we had that created, let's just put some placeholder text in here that says hello world.

So we can see if this works.

And on our server, we actually to set up our views to use the E.

J s view engine.

So what we can do is say act out set and we want to pass in here review engine because we're gonna be setting our view engine and we need to set this t j s.

That's the view engine that we imported and the one that we're gonna use.

And then in our app, we can just say here rez, which is our response we want to render are index file.

So we can just say index like this and if we save and refresh over here, you can see we're getting that text.

Hello world being printed out.

So we're now rendering everything in our index that E.

J s out to our browser here.

Now, the next thing to do is actually to create what we're going to use instead of our index dot t Js file.

And this index file is going to contain both a form for creating new short euros.

And it's also going to create a list of all of our current short euros that we have.

So let's get started by creating boilerplate html with this exclamation point and we hit enter.

And in order to get proper syntax highlighting in this e Js file, when we start going forward and using actual E.

J s syntax, you're gonna want to download an extension here, which is called E.

J s language Support.

As you can see at the top, make sure you have this installed and that will you properly get the syntax highlighting inside of your e Js file.

Let's just shrink that back down.

So inside of our e Js file, what we can do is actually put all of the code inside here for rendering out first that form as well as the table, which is going to contain all of our different results for the short Urals we've already generated.

So first I want to just have a title for a page.

We're gonna use an H one.

I'm just gonna call this Euro shrinker.

Then we're gonna have our form which is going to have an action which we're going to handle later and a method Bush in our case is going to be a post method.

And inside this form, we need to have an input which is going to handle our full euro and then a submit button.

So it's create a label which is going to be for our full girl and was getting some here say, full girl.

And then we're also actually just make that euro instead, and then we're going to have an input, and this is going to be a type of euro.

We're gonna give it a name here of full euro, and we're also going to give it an I D.

Which is full.

You're Oh, this is just our label is links to our input.

Now, lastly, we're gonna create a button.

We're gonna make this a submit button.

Whoops, submit.

And this button is just going to have the text of shrink.

Now, if we save, refresh our page over here, you can see we have the title label input and then our button for shrink.

And right now our form doesn't work.

But that's because we haven't set up the back and forth Now before we get onto the back end, let's actually create this show for a table, which is going to contain all of our different euros when we create them.

So it's created table, and inside here, we wanna have a header, and inside of that head of we're gonna have a row, which is just going to have three different th is for tea headings inside of it.

And the 1st 1 is gonna be far full, Uriel.

And then we're gonna have another one which is going to be for a short euro that we generate.

And lastly, we're gonna actually track how many times everything was clicked.

So we're gonna have another column which is going to be far clicks.

Then we're gonna have a body.

And inside that body, we're just gonna put a placeholder row for now.

So let's just have a single value here, which is just going to be, for example, my own website soldiers put an anchor tag here, which it has an H ref to https colon, backslash, backslash courses dot web death, simplified dot com.

And then we're also just gonna put that exact same euro as the text for anchor tag.

And if we saved that, refresh our page over here, you can see that showing up inside of our column as our full euro.

Now let's do it some more thing, which is going to be another T D.

Which is going to be for a short euro.

And we want an anchor tagging here, and this one instead is going to have in a trough, which is our shortened version.

So it's going to just say, for example, slash 123456 Whatever the short Dorial is, it doesn't really matter right now.

We're gonna use that same exact text inside of the Anchor Tech.

And if we refresh, we now have that euro, and then we're gonna have a final row in our TV, which is just going to be the number of clicks will say This one has 10 clicks.

And as you can see, this is what our table is going to look like.

Let's assume that a little bit, so it's not quite so scrunched up in that regard.

It looks a little bit better.

And now, in order to style everything inside of this of you instead of writing our own CSS, I'm actually just going to use bootstrap for this, so make sure you go to boot straps website, get bootstrap dot com, go to the download page and we're just gonna use the CD en for importing this into our app instead of downloading it locally.

So just copy this first value here for this link tag.

That's all we need.

And we're gonna paste that into the head save.

And now we have access to all of the bootstrap information which we can use to style.

Are Paige over here?

You can see it's already applied some basic styling.

So the first thing I want to do is work on styling out our form.

But actually, before we could get to styling the form, let's wrap everything inside of a class called container.

And in this container is just a bootstrap class, which allows us to have nice padding and margins and everything between the edge of our page.

So we have that container, put everything inside of it, and if we save refresh, you see that just gives us a little bit of margin and patting, which looks pretty good.

Now we can move on to style in our form.

So it's at a class here.

We're gonna use n y dash forthis is gonna add margin on top and the bottom.

So if we save refresh, you can see it just spaced our form out from our title and our table, and we're also gonna use a form in line so we can have our form in line like this when we start applying all of the rest of our bootstrap classes.

Now, the very first thing we're gonna do, which seems a little weird, is we're actually gonna hide this label and only allow it to be read by screenwriters.

So if we apply a class here which is equal, that s our only this means this will be screen reader only.

And if we refresh, you can see it's disappeared from our page.

So it'll only be read by people using screen readers and people that aren't using screenwriters just will not see it.

And that means that for input, we want to make sure we have a placeholder here which says you are Oh, and if we refresh that way, people know that this text boxes for entering in a euro also, we're gonna make this required, since we always want to make sure that they enter you, Earl.

And now we can apply some classes to this input here.

And let's just shrink down our side page.

So we have more room to work with HTML and the classes.

I want to apply our form control, and I want to apply a little bit of margin on the right of to what saved that and refresh.

Now, the last thing to do is to style this button.

We're gonna put button and button success That'll give us a green colored button.

We refresh.

You can see we have that green button there.

And if our screen size becomes large enough, then we're gonna have our form side by side like this.

It's actually just zoom out so we can see that when we have more room of our HTML and in order to make it.

So are you, Earl, text box.

Those the entire with.

We just want to apply a class of column to it.

So I'm just gonna say call here.

And if we refresh that now, force.

Is this your role to take up the full with no matter what.

Now, with that out of the way, our form is taken care of, and we don't have to worry about a rapping on to a new line.

It'll always be on the same line, and now we can work on styling at our table, which in bootstrap is very straightforward.