Learn JavaScript: Full-Stack From Scratch

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 node.js 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 google.com 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 node.js 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 node.js 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 node.js website it's node.js 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 stackoverflow.com 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 console.log 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 node.js 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 p.m. 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 p.m. 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 google.com 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 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]

Channel: LearnWebCode

Views: 97,048

Rating: 4.9459276 out of 5

Keywords: javascript, 10 days of, full-stack from scratch, learn

Id: WTOnKNjiPWU

Length: 99min 41sec (5981 seconds)

Published: Thu Aug 01 2019