Study JavaScript: Full-Stack From Scratch

by birtanpublished on July 3, 2020

hello everyone if you enjoyed the ten

days of JavaScript you might be happy to

know that the complete 27-hour boasts

that course has just launched there's a

coupon link to join at the lowest

possible price in the description for

this video the remainder of this video

picks up right where the final ten days

of JavaScript video ended and this

serves as a sneak preview into the full

course I hope this video helps you get

started with node have fun and I'll see

you around if you want to learn

JavaScript full stack from scratch

you've come to the right course because

I've spent the last 14 years living and

breathing JavaScript and web development

and now I'm here to teach you everything

I know here's a quick summary of what

we're going to learn the basics of

computer programming in general the

JavaScript language itself the nodejs

environment and how to use it to power a

server we will learn about the web

browser environment and how to use

javascript to control it we will learn

what a database is in particular we'll

learn how to use the MongoDB database

system we'll learn how to relate one

piece of data to another for example

letting one user follow another user

we'll learn how to update the browser in

real time with fresh data from the

server we'll learn how to create real

time two-way communication of data we

will use it to power a chat room but you

could use the same technology to power a

simple game or just about anything we'll

learn about authentication both stateful

with sessions and stateless with JSON

web tokens we'll learn about the MVC

architecture pattern we'll learn what an

API is and then how to create our own

API and much much more

fourteen years ago when I began my

programming career

dreamed of one cohesive course that I

could start from scratch with and follow

all the way to the end in order to gain

a big picture understanding about all

the puzzle pieces fit together I dreamed

of a course that explained the why and

not just the how and over 14 years I

never did find a course like that but I

just created it now I would love to have

you come along on this journey with me

and if you're ready to launch your

career as a full-stack JavaScript

developer then I'll see you on the

inside hello everyone and welcome to the

next chapter let's take a quick look at

where we are so we've learned the basics

of the JavaScript language itself we've

also learned the basics of how to use

javascript in the web browser

environment and now our next step is to

learn how to use javascript in a server

environment but why so we need to ask

ourselves a few questions

what is a server and why do we want to

use one let's start with what is a

server so when I visit googlecom my web

browser sends off the request to the

Google server and the Google server

sends back a response with the HTML to

display this page now when I search for

something so if in the main Google field

I search for JavaScript my web browser

sends off a request to the Google server

with JavaScript as my search term and

then the Google server sends back a

response with the data needed to display

these results so what is a server well

my own oversimplified answer is that a

server is the thing that we can talk to

in order to send and receive data as a

user of an app or website we can send

requests to a server and then the server

sends back a response for now that's as

deep as we need to go in terms of what

is a server now let's move on to why we

want or need a server I would say there

are two main reasons number one

is directly related to what his server

is right communication our app needs to

be a good listener right it needs to

listen for incoming requests and then it

can send back a response or in other

words we need a way for our users to

access our app and that's the case even

if we're building the simplest website

ever even if it's just a simple brochure

website that is literally just a

headline that says hello even in that

case we still need a server that

visitors can't connect to in order to

view the page even if that server is

just serving up the file system and

sending back statically created basic

HTML files it's still a server that's

listening for incoming requests ok so

that's reason number one for why we want

a server

now here's reason number two if we want

to build something a bit more complex

than just a static read-only brochure

type of website and we want to let our

visitors actually perform actions

instead of just viewing pages we need a

server of some sort and the reason for

this is because we cannot implicitly

trust the web browser or incoming

requests let me explain why and also

just sort of what I'm talking about

for example let's imagine that we wanted

to use our bank's website to transfer

money from one bank account to another

so instead of Google com imagine right

now

I was logged in to my bank's website

well from a code perspective perhaps the

bank website would send a bit of

JavaScript to me and my web browser so

maybe they would send over an object

money transfer and you don't have to

type this out this is just for a quick

explanation there's no need to follow

along with this code but maybe the bank

server would send over to me an object

so say money transfer equals and they

would set the from account to whatever

my logged in user is right and then the

to account would be whoever I wanted to

send money to so they would probably

pull this value from the input field of

whoever's name

I bin and we could imagine there would

be a property named amount which again

would pull in the value of a user input

field of how much I want to give to

someone and then finally we could

imagine there would be a property named

message which is a place for a memo or a

brief description of the money transfer

now most people are not evil and most

people are not familiar with code and

their browsers console however what if

we were an evil or malicious user we

could log into our bank's website come

into our browser's console and we could

just change this stuff programmatically

right we could fire up our console and

say money transfer dot from account

should not be the logged in user that I

actually am it should be really rich

person Smith and the to account should

be me give me the money and the amount

should be some disgustingly large amount

and the message should be ah my money

now right now I could add that into my

web browsers memory and then if I went

back to the bank screen I could click a

button that says perform money transfer

and if the bank's server implicitly

trusted me I would now be a very rich

man

right the request would go through now

obviously that's not the world we live

in

if server is implicitly trusted you in

your requests the world would spin out

of control into complete chaos in about

two minutes the reason we have any sort

of sanity in this digital age is because

a server has the job of making sure that

you really are the person that you're

claiming to be now you might be thinking

to yourself why couldn't we just use

JavaScript to send over an if statement

to the web browser right we already

learned how to make decisions in our

code so imagine the bank assigns you a

variable when you first log in maybe let

user equal your name right and then

maybe you think we could use an if

statement and say only if the following

is true only if user equals money

transfer

dot from account right so only if this

is the case only if the user is who they

say they are then let the money transfer

go through well this line of thinking is

good this is similar to the line of

thinking that we would use on the server

side the problem is just that we cannot

rely on this on the client side or the

web browser side or the user side

because there's nothing stopping a

malicious user from simply saying well

user should equal really rich person

Smith right they could modify the user

variable in their web browser and then

this if statement would evaluate to true

or better yet a malicious user could

simply modify the JavaScript that you

send over to them and just get rid of

the if statement check or a malicious

user could just completely disable

JavaScript and their browser entirely so

getting back to reason number two of why

we want a server trust issues we need to

run this decision-making code in a

trusted environment and we can never

truly trust the users web browser so the

idea is that with a server we can write

JavaScript code we can write if

statements and all sorts of things to

make sure that it's a legitimate request

so long story short a server is really

just a place where we can write code

that cannot be tampered with or

manipulated by the user of the

application and for now that's really as

deep as we need to go in terms of why we

want or need a server now before we

bring this video to a close and start

talking about our next steps I first

want to address two common questions

that you might have right now so

question number one you might be

thinking okay sure so you could write

this if statement on the server side but

couldn't the user still just send along

a fake user value and try to impersonate

someone and the answer is yes malicious

users will try to do that however I

don't want you to worry about that right

now we are absolutely going to learn

about authentication later in this core

but I don't want you to burden your mind

with it right now don't worry we have a

lot of tricks up our sleeves on the

server side we can get creative in terms

of making sure that users are who they

claim to be for now all you need to know

is that if our app is even going to have

a chance of being secured we need to run

our verification and authentication code

in a trusted environment not in an

environment that the user is in control

of so we need a server okay so that's

common question number one common

question number two is hey Brad

what about serverless applications I

keep hearing this phrase serverless app

it's a really popular buzzword right now

there's a lot of hype surrounding it so

if an app can be serverless do we really

need a server and my answer to this

question is that it's really just a

matter of semantics serverless apps

still use servers the difference is that

instead of writing an entire server and

then pushing it up onto the internet

with a serverless

app you're just writing individual

functions and then you're handing those

functions off to a big company like

Amazon Google or IBM and then those

billion-dollar companies are hosting

your functions for you it's the same

idea though you are writing server-side

functions you are having a place that is

trustworthy and private it's just that

you're letting some other company host

or individual functions instead of you

needing to host your entire server

yourself now if everything I just said

made zero sense and you've never heard

of the phrase serverless apps that's

okay you can just forget the last 60

seconds ever happened rest assured that

later on in the course I will briefly

talk about and explain serverless apps

but for now we do not need to worry

about that and I can tell you with the

utmost certainty that whether you want

to create a traditional app or a

serverless app you are going to need to

write server-side code and in the

JavaScript universe as soon as you want

to start writing code

outside the context of a web browser you

need to learn about something named

nodejs after the web browser node is by

far the most common or popular

JavaScript environment

now node can be used for just about

anything so I don't want you to think

that it's just for creating servers that

just happens to be one of its many use

cases big picture learning about node is

going to open up so many doors for us

and it's exactly what we're going to

start learning about in our very next

lesson this is an exciting portion of

the course because when you start to

learn about node you can legitimately

call yourself a JavaScript developer so

let's keep our momentum rolling and I

will see you in the next lesson hello

everyone

in this lesson we are going to get

started with nodejs however before we

download and install node on to our

computers let's first ask ourselves what

exactly is node so very early in the

course we learned that there are

multiple environments in which we can

speak the JavaScript language and each

environment has its own unique made up

words or slang or lingo that relate to

its super powers or abilities so the web

browser is a JavaScript environment and

it's special abilities include viewing

webpages and responding to user events

like clicks and keyboard presses so on

and so forth

well node is another JavaScript

environment and it's special abilities

include things like being able to create

new files and folders on your computer's

hard drive being able to listen for

incoming Network requests and much much

more in other words the web browser can

do web browser ish things whereas node

is more open-ended node can do general

computer ish things for now that's all

we need to know about node so that's

enough talk for now let's get to the

action right now let's go ahead

and download and install node onto our

computers so we can get started using it

so follow along with me here is the

official nodejs website it's nodejs

org I will include a link to this

website in the resources for this lesson

or you can just perform a Google search

for node Jas

okay from the website we want to

download it in my case it says download

for Mac OS in your case it might say

download for Windows or something

similar now the version numbers that you

see in this video are going to be

different when you actually visit the

website yourself because node is

constantly releasing new updated

versions of the software that's ok your

version number does not need to exactly

match my version number now there are

two different download options that we

see here

one with the absolute newest latest and

greatest features and another one that

is slightly older but is super reliable

and stable and dependable either

download link will work just fine you

can't go wrong but personally I usually

recommend the long-term support version

so go ahead and click on that to begin

the download depending on the speed of

your internet connection it could take a

while but once the download finishes go

into your computer's downloads folder

and open up the install file all of the

default options and the automated

installer are a-okay so you should be

able to just click next next next

without any trouble so at this point I'd

recommend you pause the video lesson

while you go and install node and once

the Installer is complete you can come

back and resume the video

ok our next step is to make sure that

node was successfully installed to do

this we want to open up a command line

on our computer if you have no idea what

a command line is and what you're

looking at right now on your screen

don't worry don't panic that's ok I know

from firsthand experience that when you

first see a command line it can be

terrifying but if someone's guiding you

through things and holding your hand it

really doesn't need to be scary whether

we like it or not if we want to

become a full-stack developer we

absolutely need to use a command line

there's just no getting around it so the

question is how do you open up a command

line on your computer well it's going to

be different depending on whether you're

using Windows or Mac okay so on Windows

you can open up the Start menu and then

just start typing on your keyboard start

typing command prompt it should show up

in the list of programs or applications

so go ahead and open it or another way

to get to the command line on Windows is

to just hold down the windows key on

your keyboard and simultaneously press

the R key this will open up a run prompt

and click into the run prompt field and

type CMD and then push enter ok so that

takes care of Windows if you're on Mac

simply look in your Applications folder

for another folder named utilities

inside the utilities folder you will see

an app named terminal terminal is the

command line on Mac so go ahead and open

that up ok at this point everyone should

have a command line open now I want you

to type this in node and then a space

and then – or the minus sign right and

then V so node space – V go ahead and

push enter and in response your computer

should output a version number of node

if you see something similar to this

even if your numbers are different that

means you have successfully installed

node give ourselves a pat on the back if

you do not see a version number after

running node space – V and instead you

see something like unknown command or

command not found that means there was a

problem when you tried to install node

if that's the case you can try

restarting your computer and then

opening up the command line and trying

this again or you could try running

through the node installer file again or

you might need to do a bit of personal

Google research I'd recommend searching

for install node

Blanc where Blanc is your operating

system because there are unique

potential issues that are slightly

different for Windows 7 Windows 8

Windows 10 as well as the different

versions of Mac OS there's also a lot of

different personal variables as to why

note did not successfully install such

as the antivirus software that you have

running in the background or different

security settings that you have enabled

on your computer so on and so forth so

unfortunately there's no way for me to

preemptively list solutions to all of

the possible reasons as to why note

didn't successfully install however I

will say this learning how to google and

perform research is a huge part of

becoming a developer so if you were not

able to install nodes successfully on

your first try don't worry you're not

alone whatever issue you're running into

someone else has already ran into that

issue and that's the beauty of Google

and as you're digging through Google

results I want you to be on the lookout

for any stackoverflowcom results a

common joke in the programming world is

that developers get paid to Google and

find answers to the problems on Stack

Overflow okay now at this point in the

lesson I'm going to assume that everyone

has successfully installed node if

you're moving forward so let's get our

hands dirty and get our first taste of

node in the command-line I want you to

simply type node no space nothing else

just the word node and then push enter

or return by doing that we have now

entered into an interactive node

environment in other words we can start

speaking the JavaScript language and our

computer will understand us so we can

say 2+2 and push enter we see 4 this is

very similar to earlier in the course

when we first started to experiment with

the web browsers console basically right

now we are in the node console so we are

free to speak the JavaScript language we

could create a variable say let my

favorite number equal 10

push enter that gets stored into memory

and then I could say seven plus my

favorite number push enter we see 17 now

what if instead of just simple

JavaScript language features like this

we want it to leverage nodes unique

abilities and superpowers for example

what if we want to create a server and

listen for incoming network requests

well doing that with node is relatively

easy but it's going to take more than

just a single line of code like this and

if we're going to be writing more than

just single line code examples we really

should be doing our typing in a

dedicated text editing program instead

of the command line just like earlier in

the course when we moved from the web

browsers console into code pen so we

could write multiple lines of code

easily right now we're going to move

from our command line into a text

editing program ultimately the reason we

are doing this is so we can begin to do

actually interesting and complex things

with node if you're scratching your head

right now

and still not really seeing the point of

node and you're not sure what the goal

of all of this is and why node is

necessary don't worry that's to be

expected I think the bigger picture of

what's going on is going to come into

focus and become very clear over the

next several lessons trust me when we

finally do something interesting with

node and we see how that can interact

with the web browser and how the puzzle

pieces fit together you are going to

have an unbelievable aha moment so let's

keep our momentum rolling and I will see

you in the next lesson just a super

quick note at the end here to exit the

interactive node environment in your

command line you can just press ctrl C

twice or if I jump back into the node

console another way of exiting node is

just to type dot exit it's not the end

of the world if you don't exit node like

this but it should make closing

your command line window a bit easier

alright I will see you in the next

lesson hello everyone in this lesson

we're going to make sure that you have

access to a text editing program on your

computer before we worry about

downloading and installing a text editor

let's first go over why we want one in

the first place so in our previous

lesson we installed node J s and then we

learned how to access it from our

command line so if I type node I can

then start speaking JavaScript 2 + 2 you

get the idea however if we want to do

something complex and interesting we are

going to need to write multiple lines of

code so almost as if you were writing a

play or a movie or TV show you would

need to write a fairly long script well

it's the same thing here we want to be

able to write a long script or a bunch

of code and then feed that all into note

at once now the way that this is

typically done is by using a text

editing program to create a JavaScript

file on our computer's hard drive and

then we can feed that file into node now

there are many many different text

editor programs in the world and many of

them are free to use the program that I

personally use and also that I strongly

recommend is named Visual Studio code

it's also often referred to as vs code

so you can google for Visual Studio code

or as of this recording the official

website is code dot Visual Studio comm

it's completely free and completely safe

to use and it's available for Windows

Mac and Linux it's the text editing

program that I'm going to be using

throughout the course so if you want to

follow along with me step-by-step I

strongly recommend you also download and

install Visual Studio code a little bit

later on in this very lesson I will

explain why I think vs code is such a

great option however I don't want to be

dogmatic

so I don't want to force my preferences

or opinions on you there are many other

text editors that you can use for

example atom is a very popular text

editor that's also free also sublime

text is another very popular text editor

technically it's not free it's available

for purchase but you can use it for free

to evaluate it and decide if you'd like

to buy it indefinitely the point that

I'm trying to make is that there are

many many different text editing

programs out there so I don't want you

to feel bad if you really don't want to

use Visual Studio code however having

said that my opinion is that you should

give it a try because I think it's

amazing

anyways having said all of that right

now I recommend you pause this video

lesson while you download and install vs

code alright at this point I will assume

that you've had a chance to install vs

code or you already have an existing

text editor and you're fairly

comfortable with it so now let's give

ourselves a goal of creating our first

javascript file and then feeding it into

node now instead of just creating a

JavaScript file directly on our desktop

or in some random folder why don't we

create a new folder on our computer

specifically for this javascript file so

it doesn't matter where we create this

folder but for example on my desktop

maybe I will create a brand new folder

and the name of the folder doesn't

matter but I will name it first node

experiment you could name this folder

testing or pizza or unicorn the idea is

that we just created a new empty folder

and now I want to open this folder with

our text editor program so right now go

ahead and open up vs code and there are

several different ways to open a folder

in this text editor program so you can

use the top left File menu and just

choose file and then either open or open

folder or an even easier way is just in

Windows or Mac to find that new folder

that you created and you can just drag

and

drop the new folder on 2vs code so if

you're on Windows you can just drag this

folder onto the vs code program window

or if you're on Mac you can drag your

new folder onto the vs code icon in your

dog okay now once you've opened that

folder with vs code you should see a few

options right about here first of all we

can go ahead and close the welcome

screen or any sort of welcome tabs okay

and then this left hand middle menu that

we see here here we see the name of the

folder that I just opened up and if I

hover over that little tab I have a few

different options so this first icon

will create a new file within that

folder that's what I'm interested in

doing I want to create a new file in

that brand new folder so you can either

click this icon here or you can click

file new file it's up to you or you

could even just right click anywhere in

this empty space right about here and

choose new file at the end of the day

all we really want to do is create a new

JavaScript file and the name doesn't

matter

I will name it test dot J s the dot J s

tells our computer that this is a

JavaScript file so the first part of the

name doesn't matter you could name it

Pizza J s or unicorn dot J s okay after

we create that file V s code opens it up

and within this main part of the screen

we can start typing so just like before

in the code pen examples we are free to

write multiple lines of JavaScript

within this new file so why don't you

type this out and follow along with me

let's create a variable so let's say let

strawberry count equal 20 okay then

below this let's write an if statement

and say if strawberry count is greater

than 10 log out a message to the console

that says you have enough strawberries

otherwise else log out a message that

says you do not have enough strawberries

so say if parentheses curly brackets

within the parentheses for our condition

we can say if straw berry count is

greater than 10

then within the curly brackets we can

drop down and say consolelog you have

enough strawberries okay and then if

this is false if strawberry count is not

greater than ten down here after the

closing curly bracket we can just say

else curly brackets log out to the

console you do not have enough berries

okay then push ctrl s or command s to

save this file or you can just use file

save and now the moment we've all been

waiting for let's feed this file into

node right so instead of having the web

browser execute this JavaScript code we

want the node environment to execute our

code now in our previous lesson we

learned how to run node right you need

to open up your command line however

this is one of the biggest reasons why

I'm a huge fan of vs code while you're

in vs code I want you to hold down the

ctrl key on your keyboard and

simultaneously press the tilde key which

is the key to the left of the one key or

it's also the back tic key the key right

above tab so hold ctrl + the tilde key

and that opens up a command line

directly within our vs code program this

is incredibly convenient and it makes

our lives a lot easier you can also

access the command line in vs code by

looking in the top view menu and then

clicking on terminal now if I was not

using vs code I would need to open my

command line like we did in our previous

lesson right the command prompt for

windows or the terminal for mac but in

vs code you don't need to jump back and

forth between two separate programs

between your text editor and your

command line in vs code your command

line is just conveniently right here

another thing that's cool is vs code

automatically points your command line

towards the current folder that you're

working in so usually in the command

line you would need to say CD space and

then type out the directory of where you

want

point towards with vs code we don't need

to do that our command line is already

pointing towards our new working folder

so check this out

all we need to do to feed our JavaScript

file into node is down in the command

line right node and then a space and

then the name of our file so in my case

that's test J s we actually do not need

to include the dot J s so you can just

type the actual name of your file and

then push enter awesome we see you have

enough strawberries and if we come up to

our JavaScript code and change the

strawberry count to something really

small like three and I save the file and

then I come down here and run that code

again so I say node test you do not have

enough berries and again if you named

your file something different than test

J s you would not say no test for

example if you named your file pizza J s

then in the command line you would write

node space pizza really all we are doing

is passing our file into node we're just

saying hey node execute our file cool

now there's nothing very interesting or

impressive about a simple if statement

right however we now have everything we

need to really start rolling we've

installed node onto our computers we

have a text editor program and now we

know how to use the command line to feed

a JavaScript file into the node

environment so I've got some good news

this means that in our very next lesson

we are ready to use node to build our

own small simple server this is where

the big picture of what we are trying to

accomplish is going to come into focus I

am so excited to write our first bit of

real-world node code with you so let's

keep our momentum rolling and I will see

you in the next lesson

hello everyone in this lesson we are

going to create our very first server

without further ado let's jump right

into the action so go ahead and make

sure that you have the folder that you

created in the previous lesson open in a

text editing program and here we can see

that I have opened the test J's file

that I created in the previous lesson

let's go ahead and erase or delete

everything inside that file and give

ourselves a clean slate or if you wanted

to you could just create a brand new

file within that same folder okay so

we've got a clean slate what is our goal

for this lesson well we want to create a

server that listens for incoming

requests so that we can visit that

server in our web browser and have the

server send back a response that says

something simple like maybe hello world

or welcome to our web page so back in

our text editor the question is how can

we use code to create a server the

answer is that we need to use

environmental jargon so the first step

is to realize that we are writing code

for the node environment not the web

browser environment so back when we were

writing code for the web browser

environments we could use the JavaScript

language itself right the core of the

language we could say something like let

favorite number equal 7 right and that's

valid JavaScript no matter which

environment we are in however back in

the web browser if we wanted to do

something web browser ish like respond

to a click event or select an element we

needed to use special words like

remember the web browser has an object

named document and document is not part

of the JavaScript language itself it's

just a word that the web browser brings

to the table so that we as programmers

can leverage the environment that we are

in well we need to do the same thing

with node so we are in the node

environment

we want to do something no dish like

setting up a server so we need to use

nodes special words so type this out

with me HTTP and then we want to look

inside that and call a method named

create server parentheses to call the

method and just a quick note if you're

using vs code as your text editor like I

am you might notice that when you type

HTTP it gives you all of these

suggestions and if you try to type a dot

right after that it's going to use one

of the suggestions so what you can do is

type HTTP and then either hit the Escape

key on your keyboard to get rid of the

suggestions or just push the arrow keys

on your keyboard to move around a little

bit and then you can include the dot and

then create server parenthesis now HTTP

is not part of the JavaScript language

itself but just like the web browser has

the document object that we can leverage

the node environment has this HTTP

object that we're going to leverage now

we don't want the server that this

method is going to create to just float

around in outer space so instead let's

store it in a variable so at the

beginning of this line we can just say

let and then I'm going to say our app

equals but you could choose whatever

variable name you want you don't have to

use our app you could call it pizza or a

unicorn or anything okay but the point

is is that we now have this variable

that is a server and we know that the

job of a server is to listen for

incoming requests so let's tell the

server to begin listening so on a new

line I'm going to say our app dot listen

right so just like way back in one of

our very first lessons when we had a dog

object and told it to jump or we had a

cat object and told it to meow in this

case we have a

server object and we are telling it to

begin listening next what we need to do

is tell the server what exactly it

should do when it does receive a request

right

what should the server do in response to

an incoming request well that's exactly

what these parentheses upon the first

line of code are for when we call the

HTTP dot create server method we want to

pass it a function as an argument and

then the server is going to run or

execute or call that function every time

it receives an incoming request so you

could make up a name for a function here

and then down here define a function

with that matching name however since we

don't really need to call this function

anywhere else why don't we just go ahead

and create an anonymous function right

within these parentheses so I'm going to

say function parentheses curly brackets

and feel free to drop down inside the

curly brackets and actually before we

start writing the body of our function

here let's first give our function two

parameters so right after the word

function within these parentheses let's

say req which is short for request and

then let's include a comma and include

another parameter and name it our es

which is short for response technically

you could make up any two names you want

for the parameters but these names make

a whole lot of sense request and

response okay and now within the body of

our function we can leverage the request

and response objects that the server is

going to pass in to our function every

time it calls the function now we will

learn more about the request object in a

few minutes but for now all we really

need is the response object so remember

our goal for this lesson when someone

sends a request to our server we simply

want to respond by saying hello and

welcome to our website so within the

body of our function let's use the

response object

and call a method named end right we

want to end our response by sending a

little bit of text that says hello and

welcome to our website okay now before

we save this file until node to actually

run it there are two tiny details that

we need to address so first in the node

environment whenever we use a special

node word or ability in this case HTTP

we need to explicitly tell no to load or

import or require in that functionality

or that ability so even though HTTP is

part of node we still need to add a new

line of code up at the very top of our

file and say let HTTP equal and then we

tell node to load or import or require

in that ability so we just say require

parentheses and in those parentheses we

say quotes HTTP node we'll know what we

mean with this chunk of code and then we

are storing that functionality in a

variable named HTTP so then in our code

down here node we'll know what we mean

when we say HTTP okay there's only one

more detail that we need to take care of

before we save the file and take it for

a test drive down on our very bottom

line within the parentheses for the

listen method we need to pass it a port

number as an argument let's say 3000

don't worry I do not expect this number

of 3000 to make sense right now but it

will come into focus very soon okay now

let's go ahead and save this file and

then let's use the command line to tell

node to run or execute our file if

you're using vs code you can open up

your command line by pushing control and

the tilde key or you can always click

the View menu and then choose terminal

okay in the command line let's say node

and then a space and then the name of

our file so my file is named

SJS yours might be named something

different so keep that in mind but after

you type in node in the final name push

enter and now at this point our server

is up and running right now I want you

to jump over to your web browser

and let's try to send a request to the

server so up in the address bar type

this in with me

clear out the address bar and let's say

local host local host is the address for

your own computer and then we can say :

and then the port number that our server

is running on and remember we chose a

port number of 3000 so local host : 3000

push enter awesome there we see the

response from our server hello and

welcome to our website so at this point

we've accomplished the original goal of

this lesson we created a server that

listens for incoming requests and it

sends back a response well that didn't

take too long so let's give ourselves

another new goal for this lesson so with

a real-world website or web application

we know that you can visit different

URLs to visit different pages for

example a lot of websites have an about

page or an about Us page so if we came

up into the address bar and after the

3000 added a slash about and tried to

visit that URL we still see the exact

same response so let's give ourselves

the goal of sending back different

responses depending on the URL that the

visitor is trying to visit how about if

someone visits the base URL just

localhost 3000 we send back text that

says hello and welcome to our home page

and if they visit maybe slash about we

say thank you for the interest in our

company so how can we accomplish that

well let's jump back into our text

editor and this is a great time to learn

about the request object remember that

every time the server receives an

incoming request it's going to run our

function now we've already leveraged the

response Bob

that gets passed into our function right

we called response dot end to send back

this response

well now let's leverage the request

object that gets passed into our

function the request object contains a

bunch of information about the current

incoming request so if we want to be

aware of which URL the users trying to

visit all we need to do is dig into the

request object let me show you what I

mean within the body of our function

here maybe right before this response

dot end line let's add a brand new line

and say console dot log and what we want

to log is req a request and then dot and

look inside it for a property named URL

okay go ahead and save the file and then

we need to close or quit the current

instance of node that is running our old

file or our outdated file so down in the

command line push ctrl + C on your

keyboard at the same time okay that just

told node to stop running our previous

version of our code because the listen

method is open-ended or ongoing it's

just going to keep listening until we

tell it to stop listening so we stopped

our server and now that we've saved the

changes to this file we just want to

start the server back up again so just

run the exact same command node test or

whatever the name of your file is okay

now if we go back into the web browser

and if we try to visit localhost 3000

slash about and then jump back into the

command line you can see that that got

logged out to the console that slash

about so now each time a request comes

into the server our functions going to

run and we're going to see that value so

if you typed slash pizza and tried to

visit that URL you better believe that

you're going to see that in the node

console and back in the web browser if

we just visited the base URL localhost

colon 3000 we just see a forward slash

with nothing after it

now this might seem basic but this

really opens up the door to a lot of

possibilities let me show you what I

mean so back up in our code let's get

rid of this console dot log line and

then let's go ahead and cut this

response dot end line into our clipboard

so cut that okay now let's use an if

statement to send back a different

response depending on the URL the user

is trying to visit let me show you what

I mean so let's say if parentheses curly

brackets and for the condition in the if

parentheses we can just say if request

dot URL equals quotes and then just a

forward slash that would be the homepage

so within the curly brackets for the if

statement you can paste in your

clipboard and let's adjust it to say

hello and welcome to our home page okay

and then right below this if statement

let's just set up another if statement

say if parentheses curly brackets for

this condition let's say if request dot

URL equals and again that's double equal

sign to check for equality instead of

assigning a value if it equals quotes

slash about well then within the curly

brackets for that if statement paste in

your clipboard

let's send back a response relevant to

the about page say thank you for the

interest in our company okay now let's

go ahead and save the file and test it

out so down in the command line let's

quit this instance of node so ctrl C be

sure to click on to the command line

area of your screen before trying to

push ctrl C and we just want to fire the

server up again using the newest version

of our code in this file so again we

just say node test and over in the web

browser let's try it out so if we visit

just localhost 3000 hello and welcome to

our home page if we visit slash about

thank you for the interest in our come

Bini awesome now while we're at it why

don't we add a fallback so that if

someone tries to visit a different URL

the world doesn't end and our server

doesn't just sit there and hang or throw

an error let me show you what I mean

back in our text editor if neither of

these if statements is true meaning if

someone tries to visit a URL that is not

the base URL

nor is it slash about well we just want

to handle that situation so maybe right

below this second if statement let's

just paste in our clipboard or you can

just manually type it out and say

response our es dot end and say we

cannot find the page you are looking for

okay I'm going to save the file come

down to the command line click anywhere

in this command line area and push ctrl

C to stop the old server and then fire

up the latest version of our codes of

node tests come back to the web browser

so we see that our about page still

works the home page still works but if I

try to visit a bogus URL we cannot find

the page you are looking for at this

point I want you to give yourself a pat

on the back because you just created

your first server now I realize this

super basic server might not seem very

impressive but it does open the door to

all sorts of possibilities so the

question becomes what's next where do we

go from here well so far our server or

app can respond to the URL of the

incoming request but do you know what

would make our server a thousand times

more interesting if we could respond to

the value that users type in to form

fields and that's exactly what we're

going to learn about in the next lesson

we will learn how to work with user

submitted data in our server so perhaps

we could include a question on our web

page that reads what color is the sky on

a clear sunny day and then we could have

a text input field where the user can

type and then we can have a

mid button that they can click and then

we can use our server to evaluate their

answer and either send back a

congratulations response that says yep

that's the correct answer or send back a

sorry response that says nope try again

that's incorrect this process of working

with and evaluating user submitted data

is crucial to becoming a full stack

developer

however Before we jump into that next

lesson I do have an important quick note

to share when it comes to the server

that we built in this lesson I want you

to know that you are the only person who

can access or view your server remember

that's what the localhost in our address

stands for it means your specific

computer in the real world we would want

other people to be able to access our

server or application so in the real

world we would send our code our code

that creates the server we would send

that to a hosting company that company

would host our server for us and make it

publicly available and then instead of

local host 3,000 the address for our

server could be our app comm or super

awesome app comm or whatever your domain

is the big picture for right now you can

rest assured that later on in the course

we will indeed learn how to make a

server publicly available and when that

time comes you will be able to share the

address to your server with your friends

and family and they will be able to

access it and see what you built because

let's be honest sharing something that

you created with the people in your life

that you care about is the funnest

aspect of learning anything new and that

includes programming but for now we are

just getting started we are just

learning the basics so it's okay that we

are using localhost and that we are the

only ones that can view the server okay

having said that we are ready to move on

to our next lesson and learn how to work

with user submitted data let's keep our

momentum rolling and I will see you in

the next lesson

hello everyone in this lesson we are

going to learn how to receive form data

from a visitor and work with that data

in our server let me show you what I

mean by giving you a sneak peek of the

finished product of what we're going to

build together in this lesson so we see

a bit of text what color is the sky on a

clear and sunny day and then here is a

text input field now if I type in an

incorrect answer so if I say orange and

then click to submit we see sorry that

is incorrect but if I click back to the

home page and then type in blue and

submit we see congrats that is the

correct answer now this may not seem

very impressive or exciting but trust me

being able to respond to user input like

this marks a huge milestone in your

journey towards becoming a full-stack

developer right if you think about how

you log in to your bank's website or

your email or any online accounts you

have to fill out a user name field and

then you have to fill out a password

field and then you submit and then the

server decides if what you typed in is

correct or not so we're starting simple

here and just checking to see if the

user types in blue or not but we need to

learn how to walk before we can run so

how can we start building this together

where do we begin well in our previous

lesson we used the HTTP functionality of

node to set up a basic server so as

we've already seen we can technically

create a server this way but the truth

is is that you can use node to build

just about anything not just web servers

now this open-ended nature and

flexibility of node is great but in the

real world we have a specific goal right

we want to create a web server so it

makes more sense to use a solution that

is less open-ended and instead is

specifically designed for the purpose of

creating web servers and that's exactly

we're something named Express comes into

play so what in the world is Express

well let's start with their official

description or slogan and then I will

explain it so it says that Express is a

fast unup Enya nated minimalist web

framework for nodejs but what does that

mean in plain English so I would say

that Express is a bunch of pre-written

JavaScript code for the node environment

that we can leverage so Express takes

care of a thousand different details for

us so that we can avoid reinventing the

wheel and also so that we can keep our

code more organized now personally I'm

not always a fan of leveraging

pre-written JavaScript code like this

however I am a huge fan of Express

largely because of these two words that

I've highlighted here because it is

unopp Enya nated and minimalist Express

doesn't automatically do a ton for us it

doesn't babysit us so much that it

prevents us from learning and it doesn't

really force any rigid or dogmatic ideas

on us it simply provides functions or

methods that are specifically designed

for creating web servers you can think

of it like this node on its own without

express is like Legos there's all kinds

of different Lego block types some that

you'll want to use a bunch that you will

not need to use and you can use these

Lego blocks to build anything on the

other hand if we use Express we are

still using node but Express gives us

new Lego block types that were

specifically designed to be used to

build the one thing that we're trying to

build a web server if that metaphor

didn't make any sense that's okay

let's keep things moving but before we

move on I do want to let you know that

Express is not some small seldomly used

framework so by us using Express I'm not

forcing some odd opinion on you Express

is absolutely the industry standard when

it comes to creating web server

with node in the real world you are

going to run into express all over the

place to give you a frame of reference

just in the last week alone Express has

been downloaded over five million times

so at this point the question becomes

how do we use or download Express well

we actually do not download anything

from the Express website instead let's

jump back to our text editor or more

specifically jump back to our command

line so I'm using vs code so I can just

click view and then terminal and then in

your command line I want you to run the

following command n pm and then a

space and then install and then a space

and then Express now before I push enter

to actually run that command I want to

explain what's going on here so first of

all what is n pm well when you

installed node on your computer it

automatically installed something else

named NPM these letters stand for node

package manager for now we can think of

NPM as a giant grocery store of

pre-written JavaScript goodies that we

can leverage right so for example if you

were baking a cake in real life you

probably are not creating your own flour

from wheat instead you're probably just

going to the grocery store and picking

up a bit of flour so NPM is the

centralized place where we can grab all

sorts of pre-written JavaScript goodies

or packages right node package manager

and then the second word here is install

we want to install something what do we

want to install Express that's the name

of the package that we are interested in

so let's go ahead and push enter to run

the command give it a few seconds and

now you'll notice that in the left-hand

sidebar NPM automatically created a new

folder for us named node modules and if

we look inside that

older and if you look through this list

you'll see aha Express if you're

wondering why NPM downloaded all of

these other packages aside from Express

is because Express depends on these

other packages to be honest there's

never really a need to actually open the

node modules folder and look at all the

different packages

I'm only doing that to show you that NPM

successfully downloaded the package for

us you'll also notice that NPM created

this new file named package lock JSON

for now we do not need to worry about

this file later on in the course

we will learn more about it before we

move on I do want to let you know that

when you run an NPM install command NPM

is going to create these files and

folders for you in whatever directory

your command line is currently pointing

towards remember in my case I created

that folder on my desktop named first

node experiment and that's the directory

that my v/s code command line is

pointing towards but if you're not using

vs code and you're using a standalone

command line that's just something I

want you to be aware of okay now moving

on we have successfully used NPM to

download or install Express so now let's

begin using Express in our code so

within my test dot J's file the file

that we've been writing all of our code

in so far I actually want you to select

everything and delete it we want a

completely brand-new clean slate in this

file this time around we are going to

create a server using Express so things

are going to be a little bit different

now just to jog your memory remember

that our goal is to create this

application that receives the user input

and then we evaluate whether they typed

blue or something else okay so back in

our text editor our first step if we

want to leverage Express is to import or

include or require in Express so type

this out with me and then I will explain

it so say let Express

equal require and then parentheses

inside the parentheses quotes express

now this syntax is identical to when we

said let HTTP equal require HTTP the

difference here is that Express is not a

built in part of node meaning before we

wrote this line of code we needed to use

NPM to actually go out onto the internet

and download Express for us so when we

say require in the express package node

we'll know to look inside a folder named

node modules and it will know where to

look okay so this line of code gets

expressed ready now we can actually

begin leveraging Express and that's

exactly what we're going to do in the

next part of this lesson so with this

first part of the lesson coming to a

close you'll know that you're on track

if you ran the NPM install Express

command and it created a node modules

folder in your project folder as long as

you've got that you're good to go you're

right on track so let's keep things

rolling and begin writing code to

actually use Express and to get to that

I will see you in the next part of this

lesson hello everyone welcome to part

two of this lesson let's pick up right

where we left off in the first part of

this lesson we used NPM in the command

line to download Express and up in our

file we've written this line of code to

get Express ready now we can actually

begin to write code that uses Express to

build a server so let's create a new

variable so let and then you can name it

anything you want but I'm going to name

it our app and let's set it to equal and

then just call Express so this will

create or return an express application

or server right that's leveraging that

pre-written JavaScript code that we

downloaded and now we have a server that

lives in this variable named our app so

now let's tell our server to begin

listening

for incoming requests so on a new line

we can just say our app and then dot and

call the listen method and let's listen

on port 3000 okay and then right above

this listen line let's add a new line to

tell our server what it should do if

someone sends a request to our home page

so let's use our our app variable and

then call a method so dot and the method

is named get I will explain what the

word get means in this context a bit

later on in the lesson but for now all

we need to know is that we give it two

arguments so we could say a comma B as

placeholders the first argument is the

URL that you want to be on the lookout

for so let's just say quotes and then a

forward slash this represents the

homepage or base URL alright and then

the second argument is a function that

express is going to run anytime someone

sends a request to this URL so instead

of this placeholder B let's write an

anonymous function so function

parentheses curly brackets and then drop

down inside those curly brackets when

express calls this function it's going

to pass it two arguments

so inside these parentheses let's

include two parameters our EQ comma our

es okay now within the body of our

function here what do we actually want

to do well when someone sends a request

to the home page URL in response we just

want to send back a bit of HTML that

would create this page with this text

and form field so back in our code

within the body of our function we can

use the response object from express and

then look inside it with a dot and then

call an express method named send and

what do we want to send well instead of

just simple quotes for a string of text

let's actually use back ticks remember

this is the key to the left of your one

key or right above your tab key and in

between the back ticks

we are free to break down onto separate

lines like this you don't have to do

this I'm doing this just to stay

organized because I think HTML is easier

to read for the human eye if it's on

separate lines so now we can just start

writing HTML let's create a form element

so an opening form tag closing form tag

inside that form why don't we create a

paragraph and inside the paragraph we

can say what color is the sky on a clear

and sunny day maybe right below that

paragraph let's create a form input

field that the user can type into so

just create an input element input does

not need a matching closing tag but on

the opening input tag let's give it a

name so name equals and then quotes and

let's say sky color I just made this

name up of sky color it doesn't matter

it could be unicorn or pizza or anything

okay let's also give this input an

attribute named auto-complete and set

that to off you don't need to do this I

just don't like the annoying pop-up auto

suggestion feature in the browser okay

and then right below the input element

let's create a button so the user can

click on it to submit the form so

opening button tag closing button tag

and we can say submit answer okay now

before we save the file let's address

the opening form tag let's give it a

couple of attributes let's say action

quotes and let's say forward slash

answer okay and then after those quotes

let's give it one more attribute named

method and set that to equal quotes and

say all capital post post-911

slash answer or what method equals post

means don't worry we will circle back to

that in just about a minute from now for

the time being let's go ahead and save

this file and then come down into the

command

and take it for a test drive so let's

run the command node test or whatever

your file is named push enter and then

if you jump over to your web browser and

visit localhost 3000 you might need to

refresh the page but you should see

something that looks almost identical to

this now here's where things get

interesting let's try to fill out and

submit the form fields right so click

into the field doesn't matter what you

type but just go ahead and submit the

form and we see some good news and some

bad news

the good news is if you look up in the

URL or address bar our our form

redirected us to a slash answer URL that

means that we typed out the HTML for

that form correctly and as you might

have guessed this is where the slash

answer comes into play whatever you set

as the action for an HTML form well

that's the URL that the browser is going

to send the form results to now I just

randomly chose the word answer here but

there's nothing special about that you

could have set this to pizza or a

unicorn or anything okay so that

explains the action attribute but what

about the method attribute what in the

world does method equal post mean well

this controls the type of request that

the browser is going to send to the

server in the land of the internet and

HTTP requests there are actually many

different types of requests but for now

in the context of this lesson we really

only need to be aware of two different

types of requests a get request and a

post request so in your web browser when

you visit a URL so if I typed in

googlecom my browser just sent a get

request to the Google servers or if I

clicked on one of these navigation links

at the top of Google like if I clicked

on there about link to go to the about

page my browser sent a get request to

that about URL so when you're surfing

the web a get request is sort of the

standard type of request if you manually

type in a URL or if you

click on a traditional navigation link

it's a get request you're saying to the

server you want to get a bit of

information so if I go back to local

host : 3000 my browser sends a get

request to the server however if I fill

out this form and then tried to submit

it my browser not only wants to get

information about that new URL of slash

answer but it also needs to send along

its own data to that URL right it needs

to send along whatever I typed into the

form fields so it needs to send that

data or in other words it needs to post

that data hence the word post so if I

submit this form we see cannot post to

slash answer and that's because we never

told our Express server what it should

do in response to receiving a request to

the slash answered URL now before we

worry about actually evaluating the

users answer let's first make sure that

we actually understand the difference

between a get request and a post request

trust me I've seen many different full

stack development courses and I feel

like they always gloss over this

difference and it's usually confusing

and a bit blurry so let's run through a

quick exercise to make that difference

between get and post crystal-clear back

in our code perhaps this method named

get right here is starting to make a bit

more sense we are telling our app what

it should do if it receives a get

request to this URL so let's do this

let's scroll down to the bottom of this

code and maybe right above this listen

line let's add a new line and say our

app and then instead of dot get let's

say dot post so we are going to tell our

app what it should do if it receives a

post request to the slash answer URL

okay just like with the get method we

want to give the post method a second

arguments of comma and then we include a

function that express will run in

response to this request occurring so

after this comma

include an anonymous functions function

parentheses curly brackets inside the

parentheses for the function include the

parameters R EQ and re s inside the body

of our function let's just send back a

bit of text that reads thank you for

submitting the form so we can use the

response object and call the send method

a bit of text thank you for submitting

the form okay now before we save this

and test it out I want to do something

to make the difference between a get

request and a post request crystal-clear

what I want you to do is select these

three new lines of code that we just

wrote copy them into your clipboard and

then right below this but before the dot

listen line just paste in your clipboard

so duplicate it and on this new copy I

want you to change this word post to get

so on the second copy it's our app dot

get so if someone sends a post request

to this slash answer URL this makes

sense but if someone sends a get request

to that same URL let's do this instead

let's just send back a bit of text that

says are you lost there is nothing to

see here

okay at this point let's go ahead and

save the file and then test it out in

our browser so let's come down into the

command line and press control C to stop

the old server and then let's just run

node test to fire up a new copy of the

server with our latest code all right

and then back in the browser if I just

go to localhost 3000 and fill out the

form submit thank you for submitting the

form so this is in response to the post

request to slash answer however if I go

back to the home page and then up in the

URL address bar if I manually type in

slash answer that is a get request so

that's why we see are you lost there is

nothing to see here

so hopefully this illustrates the

difference between a get request and a

post request a get request happens when

you type in a URL

or you click on a traditional navigation

link a post request typically happens

when you submit a form right when the

user wants to send or post a bit of data

to the server so even though in both

cases the URL ends with slash answer our

server is able to respond differently

depending on whether it's a get request

or a post request all right so now that

we have at least a very general

understanding of what a post request is

let's get back to the actual task at

hand so when someone submits the form we

don't want to just say thank you for

submitting we want to actually evaluate

their answer and tell them if it's

correct or incorrect right and we are

asking them what color is the sky on a

clear and sunny day so the question

becomes how can we access the data that

the user submits from within our server

well the good news is that Express makes

it very simple so let's jump back into

our code and within the our app dot post

area right this is what's going to occur

when someone submits the form let's

actually get rid of this response dot

send line so now we just have an empty

body of the function because before we

send back a response we need to decide

if they typed in the correct answer or

not so we know that in JavaScript we

have a tool to do just that and that is

the if statement so let's say if

parentheses curly brackets inside the

curly brackets let's drop down right

after those curly brackets we can say

else new set of curly brackets okay and

let's fill in the condition so in the

parentheses right after the word if

let's say if X equal equal sign blue now

I just typed in X as a temporary

placeholder so now the million-dollar

question is how do we actually access

the user's typed in value here well

instead of the placeholder X get rid of

that and let's say our EQ for request

this is the request object that express

passes into our function

which contains all sorts of information

about the incoming requests so within

our if statement we can say if re Q dot

body dot sky color equals blue so the

request object and then body is the body

of the post of what they're sending it's

the main meat and potatoes and then we

are looking inside that for the sky

color property because in HTML form

could contain multiple fields so we need

to specify which specific field or value

we are interested in if you're wondering

where this name sky color came from

remember that this will be exactly

whatever you typed in for the input name

when we were building the HTML for our

form okay so if this evaluates to true

then the user typed in the correct

answer so within our if statement curly

brackets let's just send back a congrats

message so response dot send I'm going

to include back ticks so I can drop down

onto multiple lines and in between the

back ticks let's just send an HTML

paragraph that says congrats that is the

correct answer and then maybe right

below the paragraph let's include an

HTML link that they can click on to go

back to the home page so a for anchor in

the middle let's say back to home page

and on the opening a tag let's give it

an H ref and then let's just say forward

slash to represent the home page ok but

if the user types in something other

than blue that's incorrect

so we need to fill in this else part of

our code so to save a bit of typing

let's just copy and paste these lines

right here from the start of our es to

the end of the closing parenthesis for

the send so I'm just going to select

that and then copy it and then in the

else brackets I'm going to paste in my

clipboard this time around we just want

to change the message that's in the

paragraph so this time we'll just say

sorry that is incorrect all right now

before

we save our file and test it out we need

to do one more thing by default out of

the box Express actually will not add

the user's inputs to the body object

that belongs to the request object so in

order for this code that I'm selecting

right now in order for this to work we

need to tell Express to enable that

feature so do this with me scroll up to

the very top of our file and right below

this line where we say let our app equal

and then we call Express right below

that let's add a new line and let's just

say our app dot use and now the rest of

this line of code is not going to be

educational in the slightest this is

more of boilerplate code that you would

find on the Express documentation

website and then you would just copy and

paste it and include it in each of your

new express projects so this is not

something that you need to memorize but

let's say Express dot URL encoded

parenthesis to call that method then we

give it an object so curly brackets

inside those brackets we include a

property named extended and then colon

and set it to false you might need to

pause the video lesson for a minute to

type this in with me but again I'm not

going to explain it because this is just

boilerplate code and it's not

educational all it's doing is enabling

that feature in Express so that the

users input is easily accessible from

the request body object okay at this

point let's go ahead and save our file

come down to the command line stop the

old server fire up the new server let's

go back to the browser i've refreshed

the home page and type in something

other than blue submit sorry that is

incorrect but if i go back to the home

page and type in blue congrats that is

the correct answer

now you might be thinking to yourself

what if someone types in all capitals

blue or just the first letter

capitalised we see sorry that is

incorrect even though that is the

correct answer

so really quick to make our code

case-insensitive instead of

case-sensitive all we need to do is come

into our if statement and right after

the request body dot sky color just say

dot to upper case parentheses to call

that method so whatever the user typed

in will be converted to all capitals and

then we can just check to see if that

equals and then for here we can just say

all uppercase blue so let me save that

and then restart the server jump back

into the browser if i type blue or maybe

leave the e lowercase just to really

prove a point and submit congrats that

is the correct answer and that's

actually going to bring this lesson to a

close in our next lesson we are going to

do two things number one we will review

why this example app was so important

and number two we will identify the

missing ingredient that is going to let

us create more advanced applications

let's keep our momentum rolling and I

will see you in the next lesson

hello everyone this is sort of a bigger

picture video we are not going to be

writing any code instead in this video

we are going to answer three questions

so number one why was the app that we

built in our previous lessons so

important number two what is the missing

ingredient that will let us build more

advanced apps and finally number three

what are we going to be doing for the

remainder of this course let's start up

at the top with number one and ask

ourselves why was this application that

we just built so important well it's

because we are now at least a little bit

familiar with the process of receiving

an incoming request making a decision

based on the user's input and then

sending back a response now

understanding this basic cycle of

request and response request and

response is insanely powerful because

that's really all any application does

the real question becomes what do we do

in between the request and response so I

want you to think of a sandwich

typically the most interesting part of a

sandwich is whatever is in between the

bread so if we think of the incoming

requests as one piece of bread and the

response that our server sends back as

the other piece of bread that would mean

that the peanut butter and jelly or the

meat of our sandwich is our if statement

that checks the users sky color value

now granted that's a pretty boring and

simple sandwich that we made but that's

not the point the point is that we now

know how to make a sandwich at all

that's huge now we just need to learn

how to put more interesting ingredients

into our sandwich which brings us to the

second question of this video what is

the missing ingredient that will let us

build more interesting or advanced

applications well if we look at our

course overview we are now at least a

little bit familiar with the first three

items so as you can probably guess the

missing ingredient is

MongoDB technically the missing

ingredient is any database system but in

this course we are going to be using

MongoDB in particular now before we

worry about what a database is let's

first look at the big picture so the app

or server that we built in our previous

lesson can read the users input right we

were able to determine if they typed in

blue or not but as soon as the server

sends back its response that data that

the user typed in and submitted is gone

our server does not remember it now for

certain simple applications that's okay

but for most complex applications we

need to have some sort of permanency

right eventually we are going to want to

remember or store the users data and

this is where databases come into play

so for example what if instead of asking

the user what color is the sky what if

instead we were asking them to register

for a new account so they would need to

enter a username and a password well we

would want to permanently remember those

values that they choose so that we can

reference them the next time they try to

login that's just one example there are

millions of examples databases are

everywhere anytime you post a comment on

Instagram it's getting saved into a

database or anytime on Twitter you send

out a new tweet that's being saved into

a database really anything you do on the

internet that is permanent likely

involves database now instead of us

learning about databases in a cold

soulless academic isolated vacuum we are

going to learn about them within the

holistic context of creating

applications to be more specific full

stack JavaScript applications which

segues nicely into the third and final

question of this video what are we going

to do for the remainder of this course

well aside from a few bonus or extra

credit topics at the very end of the

course we are going to spend the rest of

our time together building two

applications let's call them app number

one and app number two app number one is

small unorganized and messy and

oversimplified on the other hand app

number two is big organized and very

real-world now you might be wondering

why we're going to build two apps

instead of just one right you might

think why not just skip the small

unorganized project and just focus all

of our effort on the big organized

project right away well trust me there

is a method to my madness so right now

our focus is on learning the very basics

of a database however if we jumped

straight into app number two we would

need to worry about things like

templating engines user registration

user authentication security error

handling how to keep our code and files

organized and much much more trust me we

don't want to deal with all of that in

this moment so for the time being we

need a project that is complex enough to

need permanency in a database but simple

enough that we don't overwhelm ourselves

with all of these topics on the screen

right now that's actually my biggest pet

peeve with other courses and instructors

they structure their example projects in

a way to where you're being introduced

to ten new topics at once and you just

drown in a sea of new topics all

fighting for your brains horsepower at

the same time so the idea in this course

is that app number one will get us

comfortable with the big picture the

basic mechanics of building a full stack

app and then once we've absorbed some of

that and some of it becomes second

nature we can move on to app number two

where we do worry about real-world

complications and best practices so on

and so forth now really quick right now

I want to show you a sneak peak of both

app number one and app number two just

so you know what to expect so here is

app one and this is the finished final

product that we are going to be building

together it's a very simple to do app

and you can see there's a text field

here and if i type in feed the dog and

then

to push enter or click the blue submit

button it adds it down here and let me

have a few more items maybe pay

attention to the cat and maybe buy

fruits and vegetables okay so now I've

got this list of items and each item has

two different actions you can edit it or

delete it so if I click Edit on feed the

dog this little pop-up appears and I can

type something new and I can say feed

the dog maybe add the word today at the

end of it push okay you can see it gets

updated and then obviously I'm free to

delete any of the items I want so if I

want to delete by fruits and vegetables

just click delete we see this little

pop-up do you really want to delete by

fruits and vegetables permanently yes I

do so click OK and it's gone now the

whole point of this application is that

our list of items is being permanently

stored in a database so even if I closed

my web browser and then came back and

revisited this app maybe a year or two

from now this data these items would

still be here waiting for me or better

yet I could step away from my computer

and maybe use my phone or tablet and my

data would still be available to me

because instead of just localhost we are

also going to learn how to push this app

up onto the internet so you can share it

with your friends and family so in the

address bar if I instead visit this URL

because our data and database lives in

the cloud you can access it from any

device so this is pretty fun you will

get a URL that you can share with your

friends and family this is just my

example temporary URL you will receive a

new unique URL for yourself and then you

can see them add new items to the list

big picture there's not a whole lot

going on with this app but it is great

practice of learning how to stitch

together our three environments the web

browser nodejs for the server and Mongo

DB for the permanency or database layer

okay so that's a review of app number

one that we are going to build together

now let's take a look at the more

complex app number two so this

what the home page looks like if you are

not logged in it shows you a

registration form to sign up for a new

account if you try to sign up for a

username that already exists that

someone has already used you get a

real-time feedback message that username

has already taken so if I add unique at

the end of it

good to go if you add something that is

not a valid email address you get a

warning in real-time you get the idea

now instead of creating an account in

this moment let's just log in to an

existing account to show you around up

in the header you can log in as soon as

I sign in you can see the home page

looks very different by the way this is

a journal or diary type of application

so you can see the home page now that

I'm logged in reads the latest from

those you follow this is essentially a

very basic social network type of

application these are articles or

journal entries written by the people

that I follow so I can see this one's

titled destroying furniture is fun

written by Kitty doe so if I click on

that here is their article and I can

even click on their name to go to their

profile up in the top right menu bar I

can click on my own circle to go to my

own profile so I have three posts I have

one follower I'm following two accounts

we can click on that you can see I'm

following barks-a-lot and Kitty Doe also

back up in the header I can click on

this icon to search for the content that

I'm interested in so if I search for the

word furniture in real time we get

search results so we see destroying

furniture is fun that existing article

by Kitty doe if I search for something

that's going to return multiple results

like the word post there we go because I

use that word in my title you get the

idea let's close this live search

results feature I can click on this

green create post button to obviously

create a new post or article obviously a

user is able to edit or delete their own

existing articles ok changing gears if

we look up in the header we can see a

chat or conversation looking icon if you

click that it opens a chat box connects

you to the chat room and this is not a

one-on-one direct mess

using inbox system this is more of an

old-school traditional public chat room

so I can type in a message and say hello

and any and all users that are logged in

will be placed into this same chat room

with me in the real world the public

chat room like this would probably just

be taken advantage of by weirdos and

creeps and malicious users but in the

context of this course I think it's a

fun programming exercise so I'm logged

in as the Brad user in this browser but

I actually have a secondary browser in

this window I'm logged in as the kid IDO

account so if I connect to the chatroom

here I can say meow and back in this

window you can see that that message

appears again this is just a fun

programming exercise to see what a

server can really do being able to have

real-time to Direction communication of

data like this is a lot of fun to setup

okay and then finally if I jump back to

the home page of the application

remember this is my personalized feed

because I'm logged in however if I use

this button in the top right to sign out

you can see the home page now correctly

treats me as if I'm a guest alright and

that concludes the sneak preview of the

finished product of app number two that

we are going to build together in this

course now to bring this full circle

what do a penumbra to an app number one

have in common well they both use a

database to store data permanently in

the case of this simple app number one

that's just the to-do list items in the

case of the more complex app number two

the database is storing the user names

the passwords the article posts the

relationships of which users are

following which other users so on and so

forth so where do we go from here well

in our very next lesson we are going to

begin learning about databases in

particular a system named MongoDB and as

soon as we learn even just a little tiny

bit about MongoDB we can begin to create

this to-do list app together I'm super

excited because this

the point in the course where we can

finally begin to build real meaningful

fun applications we've eaten enough of

our metaphorical broccoli we worked

through the ten days of JavaScript to

understand the programming language

itself we learned a bit about the web

browser as a JavaScript environment we

just learned a little bit about nodejs

and how it can be used to create a

server and what the whole point of a

server even is and now finally we just

need to fold in a little bit of

understanding of what a database is and

we will be off to the races so let's

keep our momentum rolling let's get

excited for databases and I will see you

in the next lesson to get immediate and

lifetime access to the full 27 our video

course you can find a coupon link in the

description for this video thank you so

much for watching and take care

[Music]

Related Videos

Be the first to comment “Study JavaScript: Full-Stack From Scratch”

Your email address will not be published.

There are no comments yet.