Build a Full Stack Twitter Clone with Coding Garden

yes I muted myself okay okay hello welcome to a very special coding train episode with a slightly different looking coding train logo FLE some like plants and flowers and things will start growing from here I'm kind of damping here to see if people would chat start to say hi that the sound is working and everything because I'm straight I'm on time today and the reason is because it's not actually me who will be presenting to you I'm very excited to introduce to you a guest CJ from the coding garden the coding garden is another YouTube channel that you should definitely subscribe to if you like coding tutorials watching them live streamed on YouTube will put links and all that stuff in the video description I'm sure you can find it just by typing coding garden into the search bar CJ is an educator a maker and full stack web developer so somebody who actually knows about proper full stack web development it's just something that I definitely do not know about so I'm excited to have CJ here for about an hour to do a tutorial I mean he'll tell you all about it I don't need to try to tell you about it I'm Varrick so I'm sure I'm gonna learn a ton watching it so and this will be a live stream I am going to tip toe off to the side and like sit with the laptop looking at the chat so if you have questions ask them there I'll kind of compile them we can interrupt CJ if we need to but otherwise we'll let him kind of present and then ask some more questions at the end as well did I miss anything okay can you hear see if you can hear its voice so we're gonna do the awkward shuffle now I don't have like I'm not like a professional talk show kind of like coding host thing where welcome and then I'm gonna mute my microphone so I don't by accident make too much noise welcome CJ thanks so much then first off just huge huge thanks to Dan and the coding train and coding trained community yes thank you and this is gonna be a lot of fun so the plan for today is to build a full stack application and the idea is I'm going to build a very basic Twitter clone to demonstrate all the parts and pieces of the full stack so the idea is we're going to be building me our which is Twitter for cats and it'll have two features cats can send em you which is like a tweet and cats can see all the Mews that they have sent so you can see a simple animation here but we're gonna be building basically we have a form you put in your mu and then when you click send it gets sent to the server it gets put in the database then the front-end requests all of them it all comes back and you see it all and we're gonna build that today from scratch so I have all of our objectives here the first one is to diagram the full stack so we're gonna draw a picture and talk about the different parts and pieces and how of this interacts together so let's do that so the full stack is typically split up into two pieces more pieces than that in each piece but you have the front end and the back end what is I think that's your head but uh front end and back end so here I'm going to draw the front end and then we also have the back end and when we talk about the front end this is what the user sees so I'll also be referring to this as the client the client but this is what the user sees so the user is uses a web browser so you could think of it like it's a little box here and they type in the URL and they'll have some place to type and they'll have a button that they can press but the front end is what the user actually sees and this gets loaded into a browser and so you can think of this on a laptop on a desktop on a mobile phone anything that has a web browser that is the client and that is the front end so there's also the back end and here we're gonna have a couple different back-end servers so the first one will be known as the static file server sir server server and this is where all of the files that we write to run inside of a client will live and I guess it's important to note that there are a lot of different ways you could build a full-stack application but the way I'm going to build it today kind of splits things up in this way but letting me know there are a lot of other ways you could do this and on the back end you also might have more of a dynamic server dynamic server and today we're going to be using node.js for that but there are a lot of other things you could use and specifically we are going to be using javascript for this dynamic server but you've probably heard of PHP or C sharp or Java those different things could be running on the server here at the end of the day whatever is running on here will return JSON data so this is we're going to be building a JSON API so if you've heard of API if you've heard the word cloud or I guess yeah cloud that's really when we're talking about the back when you when you say it's in the cloud it's it's some back-end type of server cool so we have the client that's the front end we have the back end so we will call this the dynamic server this is where nodejs build will be running for our static file server we're gonna be using something called live server I believe dan set up this the other day on your setup stream so he shows how you can install that I'm just gonna be using it to serve up our client and then another part of the backend is the database and that usually is drawn like this database and there are lots of different things you can use for your database there's meta part of sequel you might have heard of no sequel today specifically we're going to be using a no sequel database called MongoDB and you you might choose a different database depending on the application that you're building but today we are going to be using MongoDB and really when you build an application you pick and choose maybe what's the best type of database but the main idea with the database is that it is persistent storage persistent that might not be how you spell that storage but let's let's take an example so when you visit twitter.com/anncheno type a URL into your browser and hit enter that makes a request to in this case we'll say a static file server so the moment you type in a URL this will make a get request for some file in this case it's going to request index.html and the static file server will then respond with that file which contains all of the HTML contents HTML and this is the code that we write and it will be loaded into the browser and then the user will see it so this is kind of the first part of what's happening in the full stack let's write some code okay so the first thing we'll do is set up the client-side so in this directory here oh and before I forget I did all of this is on github right now it's just a checklist but as I code I'll push it off to github one of the mods can potentially share this link I put it in the slack you can share it in the chat people want to click on it but the first thing is we'll create a client folder and inside of that client folder here NBS code will create a new file and call it index.html I'll create a basic HTML document the title will be to it Oh now our meow or Twitter for cats and let's put like a little cat emoji there we go for now I'm going to get a little rid of this link in the script here in the body will add a and inside the header I'll have an h1 that just says same thing now we're Twitter for cats okay so I have a basic HTML file this is what the user will see so in my terminal I am currently in the client folder and here is well round that live server so this will start up a static file server and then when the browser loads it loads that file that I created so if I change that file let's add more emojis cat another cat and save it live server automatically refresh but the browser will make a get request for this file so let's just see it happen I put this URL in I hit enter that's a get request to get the HTML the browser receives it parses it into the dome lots of stuff happens but ultimately this is what the user sees so so far we're at that first line in the diagram okay and let's set up like a basic skeleton of a web site so for this skeleton I'm going to be using this thing called skeleton CSS is a very basic CSS framework there are a lot of other CSS frameworks out there bootstrap is a really popular one or materialized basically it gives us some default styles so that our site looks good by default it's not like this ugly font so let's grab this so I can just grab this CSS file and then in here I'll add a link to it throw that in save it and if we go back to the browser looks a little bit nicer so this CSS framework automatically adds in fonts and different styles to make it look a little bit better inside of the browser let's add our own styles as well so right below here I'm gonna add a link to styles CSS and then in the folder I'll create a new file called styles dot CSS and let's just say the header let's give it a class so this h1 will give this a class of title and then in our CSS will say title has text-align:center and that should Center the text and if we go back to the browser there is it's in the center so just to talk about what's happening so far in the diagram you'll notice that our timo file has a link to a CSS file and a link to another CSS file so what happens is the browser will load the file and then it'll see those links and then it has to go out and request more files so let's look at the diagram here and so basically it first loaded the request made was made for the HTML file then it needed more things basically the browser parsed it and said oh you want a CSS file from get skeleton oh you want styles that CSS so more requests went out so there was a request here to get the Styles CSS and then the static file server which is live server responds the browser takes that and then loads it in and we see some beautiful styles and they're applied to the document so every single thing that's happening in here is part of a request that's going out to a server so now that the page is loaded it the at this point it's just static it's just sitting there we're seeing what we see it's not communicating to any servers anymore so what we want to do is we want to make it so that the user can type in their mu and then send it off to the server so let's get that going here so we created a header we created the form we brought in our CSS well we haven't created for him we will create the form any lingering questions or anything like that okay so in here I'm gonna add a main area and in here I'll add the form typically forms are what we use to get user input so if you've ever typed into a text box or something like that it is a form so on this form I want a label this will be for the user's name and then I'll add an input and this will be of text and we'll give it an ID of name and we'll give it a name of name and let's see what we get so by default if we get a nice little input box on the screen let's give it some Styles so built into skeleton is this class named you full width and you'll notice that the input went all the way across but I don't want it to take up the whole screen so let's add some more styles let's call this form let's give it class like you form and in here and the styles I'll add a new one from you form let's say the width is like 50% and it has margin:0 and auto so it should center there we go so our form is like a nice and center on the screen and that's for the name and then we also need a text area for them you okay so the four here will be call this content and will say this mu the ID will be content the name will be new sorry content and instead of an input we want a text area and that gives us an area where they can type in their content as well okay last thing we need is a button so that they can submit this form and send the data to the server so we'll just say send your you input nice little cat in there like that we get a nice little button another thing built in to skeleton is this button primary class and we'll give it a nice blue color so let's make this button - primary let me get a nice little button we can click cool so we have this form the user can type in here but now we actually want to send this data somewhere but let's look back at our checklist so we created a form we have name we have content we've listened we've setup full width and all the inputs but now we actually need JavaScript to listen for when this form is submitted so here's what I'll do I'll create a new file let's call this client jeaious I'm gonna be creating other JavaScript files so just to make sure we're clear as to where we are when we're working on them I'm gonna call this one the client a Jas and I'm gonna go ahead before I forget we'll add a script at the bottom here that will bring in our client dodges and just to make sure it's working let's just log hello world and back to the browser open the dev tools and it is working we get to the hello world log cool so now we actually want to listen for when the user clicks this button so that way we can grab all of the day that's in the form so first thing I'll do is get a reference to the form by using document document dot query selector and then with query selector you can pass in any valid CSS selector to choose some element on the page so in this case I want to select this form so a valid CSS selector for that is just a fascinating form and that will give me the form so part of our objectives were to differentiate between client-side JavaScript and server-side JavaScript anytime you see document that is client-side JavaScript because we're actually interacting with the webpage with the thing that the the user is interacting with so we have the form now we want to listen for when the user clicks submit so we're gonna add an event listener for the submit event we'll get access to the event and then for now let's just logout form' was submitted cool let's see what happens so my name is CJ my Mew is hello world world go and you'll notice it tried to log but then the page refreshed and you'll notice the URL changed here so by default when a form is submitted the browser automatically tries to send the data somewhere but we don't want that we want to stop it from happening so that we can handle it with JavaScript and for this we can do prevent default and now that we're preventing the default action the data won't go anywhere we're basically telling the browser oh now we want to do this with JavaScript so here let's try to log form submitted and then hello world we click Submit and it says form submitted cool so we've tapped into when the user clicks this button now we actually want to grab the data from the page so to do that I'm going to use form data so form data is built into the web browser and it works by passing in a reference to the forms because I already have this form variable we can pass it in here to form data and now we can grab some of the the user input from the page so specifically if I want to grab the name here because I have the name set up as name I can say let's say name is equal to form data yet and pass in a m-- and if I also want the content I set up the name here to be content so I can say content is form data get content and now I have what the user typed into both input boxes and so let's just create an object called mu and inside of it I'll have the name and the content and let's just log it out them you cool so now when the form is submitted we should see an object hello world so we have the object but remember we're still on the client side we haven't actually interacted with our dynamic server just yet so let's go back to our checklist we are listening for the submit I guess one thing we'll do is when the form is submitted we want the user to know that something is happening like the data is going somewhere so I'm actually going to show a little loading image so I have this loading Jif here and we put it in the client and in the HTML I'm going to have a div right below the form let's just give this a class of loading and inside of here I'll have an image its source will be loading dock jiff and by default it should like show on the page there it is but I want to like Center it first so in my CSS I'll say loading actually let's just give it the same 50% width as the meu form so that way it should automatically pop up in the middle almost good enough for me so the this is showing automatically when the page loads but I actually want to hide it the moment the page loads and then only show it whenever we've submitted the form so let's grab a reference to it so I'm going to call this the loading element this will be document query selector and we need to pass in some selector to get access to this div in this case I can tell it to grab the element with the low class and when the page loads I'm just going to hide it so to do that I can access its style so loading element style and set its display to none okay and so now when the page loads the loading actually hides but what we want is when we submit the form we will hide the form and show the loading so here's what I'll do I'll set the loading to be displayed and then I'll set the form to be hidden okay so my name is CJ my name is hello world and then when I click Submit we're logging into the console we're showing this loading image but now we actually need to send the data somewhere someone is giving me a tip you all is saying Center the gist with text align Center on the container let's do it so in here well actually I specifically want to say loading has text-align:center yeah thanks actually I just turned my mic back on a couple interesting questions notice you using using query selector and somebody at somebody asked well why don't you use on click or I know there's like document dot get element by etc can you talk a bit about why you'd use a query selector definitely so ultimately what I want to do with this line of code is select some element on the page so there are a lot of different ways to do it there's get element by ID there's get elements by class name you get on once my tag name there's if you've ever used jQuery it's just like dollar sign and putting the selector you want in there I mainly use this because it's convenient like I know what specifically what selector to use to select it but at the end of the day this is just grabbing an element on the page so you can use whatever you're comfortable with cool that's a good question other ones one person asked does use I you know for I think they were referring to this is Ahmad in the chat as does using a framework affect performance and I think that was referring to the CSS framework so like it is a big thing to load does it make the page run slower or their considerations they're definitely so I wouldn't say it makes the page run slow but there will be a little bit of time before the styles will kick in because the browser does have to download the CSS file but once that's downloaded the CSS file and it's up and going you're good to go there and a mental note I don't think we need to do this now but people are in love with your color themes I noticed you're the console in the browser was like a dark theme so maybe you a little bit at the end maybe you could show us like what fonts theme settings and so I totally glossed over this so on my channel I talk about UJS I talk about react to talk about a love a lot of other front-end frameworks and right now I'm doing all of this with what we call vanilla JavaScript meaning I mean I haven't add any added any JavaScript libraries really to just show how all this stuff is done manually but typically I'll use something like View jeaious which which fits in here on the diagram will kind of show where specific technologies fit in and if you have any questions about like where does this technology live throw that in the chat and we can put it in the diagram to okay let's look at our checklist we're hiding the form we're showing the loading we got the data form where we've logged it and now we have completed two objectives we have gotten user input on the client and we have hidden and shown elements on the client so this is typically how we get user input when you're dealing from some sort of form and when you're dealing with vanilla JavaScript just manipulating the display property of style is how you hide and show something so we're doing that now we move on to the backend so before and the code that we just wrote click into the chat you have to click back into the OBS oh this is this is me over here so the code the code that we just wrote it's very important note is is running right now it's running inside of the browser I don't know if you can see that right let me have a different color so we just created that index of HTML it's running in here so what we're about to do is we're going to jump to the backend and write some code that's gonna be running on our dynamic server over here so let's do that okay so first step let's create the server folder now as I mentioned there's a lot of different ways to do this you technically could put the client folder inside of the server folder but I'm just going to show them completely separate just to really differentiate between like what they are so here let's make a server folder and in the server folder this is going to be a node project so I'm gonna initialize this with a package.json so NPM it - why just gives it all of my defaults it tells it my name gives them my default license and then we need a couple of packages so specifically we're going to be using Express as our framework to listen for requests that come from the client and then respond with the appropriate data we're also going to be using a middleware library called Morgan which will log all of the incoming requests so we can kind of debug what's happening on the server so we're gonna install Express and Morgan awesome so those two things installed now we can set up our server so on the server new file let's call this index Jas and inside of here we're going to create our dynamic server our back-end application so let's bring in Express so if you're familiar with nodejs this is how we bring in a library that we've installed with NPM so I brought in the Express library and the first thing we do is create an application and this is just equal to AB equals Express invoked so now I have an Express application and now we want it to actually start listening so if you saw before right now I'm using this static file server which is live server and it's running on port 8080 every computer has many many different ports and so we're gonna have two servers running on my computer one will be on 8080 and the other one will be on 5,000 so I want to start up this back-end server and I'm gonna tell it to listen on port 5,000 and when it's ready to go I'm going to just log out listening on HTTP colon slash slash localhost 5,000 cool and so if I run this we should get a server that starts listening on port 5,000 so before I started in my package.json I'm going to add a start script so this is basically where you can put the command that should actually start up your server in this case it's node index touch I guess and by doing this now in the terminal I can just do NPM start and that will start up my server on port 5,000 so if we take a look at it right now it's nothing so we have a blink back in application it doesn't have any routes so when I try to request it it just says cannot get that and so basically we're going to start defining what happens when a client makes requests to this server so let's look at our check list we created the server folder we initialized it we install dependencies we have our basic set up now I'm going to add a listener for when a get request comes in on the slash route so as I mentioned earlier when you just put something in your browser and hit enter that is a get request and by default it's making a get request to the slash route so what I'm gonna do on my server is say is River when you get a get request on the slash route run this function and we have two variables in here typically they're abbreviated req and res which i like to do but they really stand for request and response and these are two variables that exactly correspond to our diagram so here this is the request it's it's what the server is asking for and then this arrow going from the back end to the front end this is the response now in in this diagram that's with our static file server but the exact same thing is going to happen with our back-end server so our client eventually will be making a get request to our dynamic server it's gonna say I want to get all news and the dynamic server will do some processing it'll talk to the database and then ultimately this thing will respond with a big JSON object probably actually an array it'll respond with an array of JSON objects various things inside of them but specifically the requests that the client will make here is the request and the response that the server gives here is the response I guess I'm using the word in what I'm talking about but inside of express those those two variables mean exactly that yes I don't have a question yes so I'm curious as to why or if it matters you're still using the live server for the static files is the idea that you would eventually move the static files also like why not have the dynamic server also hosts those static files yes so there are a lot of a lot of ways to do it you could do that but I am actually at the end I'll show how we put this on the Internet and the idea with keeping these on a separate server is that we can benefit from things like a CDN like content delivery network goddess and so let's say you get like thousands of users to your website they're all gonna be requesting the home page from this CDN which has it cached unlike thousands of servers all over the world and so that the initial web page will load really well it's good time event and so by by having it on a separate server it it keeps it it makes the the incoming requests go to different servers so the request for actual data will be to this server but when people are loading the page will load there and I will show how to put it on - you know totally makes sense cool hold on me flip this camera back I'll be so seamless no one will even know we're there other questions no that no I don't think I don't think so okay so as I was mentioning these two variables are like represent that incoming request and the outgoing response so I'm gonna rename these to rec and res and here's what we say so when the client makes a get request on the slash route we want to respond with some JSON in this case I'm just gonna pass in a message and it says meow and we'll throw in an emoji like a laughing cat cool so we now have our server set up when it's received as a get request on slash respond with a JSON object let's try it so we go to the browser we now request the data from our server which is on port 5,000 nothing happens so when you're working with nodejs if you ever modify the files you have to actually kill the server and then restart it and then it should work so we make the request and we get the data back but while I'm thinking about it there's this handy tool called node mom which will automatically refresh every time I change the server and install that and basically I'll run it and anytime I changed files on the server it'll automatically restart and we should see those changes when we make requests to it so node Mon is installed I'm gonna add a new script in my package JSON so I'm going to create a dev script node Mon and just do the same thing so tell node Mon to run against that file and now if I do npm run dev that starts up node Mon and anytime I make changes it should restart the server so this loads but if I go back to my server code and add a new emoji like the regular cat and I again make the request and so you might not be seeing this but I'm pressing command R so I'm refreshing the page which is making another get request to the server on slash and then I see about the latest result cool so we have a basic server setup that's responding to incoming requests if Rhonda I move on to this next thing any other there were some office mi off topic question yeah not be no related to web development but not exactly what you're coding so we can save those today and I think catalog cool so let's now work on the route for receiving than me so if we can remind ourselves what's about to happen here so on the client this will when we type in CJ and we type in some message like hello world and click send that has to send it to the server so we're going to create a route that's waiting for that incoming data and we'll actually then like insert it into our database so let's create the post route so here I'll do an app dot post and we'll make the route slash muse so when the server receives a post request on slash muse we go to run that this request Handler and for now I am just going to log the request body rec buddy let's login and what should happen is when some incoming post requests happens to my server it will log out whatever the client sent to us so now let's get that going on the client side so we're just logging it but now we're gonna go back to the front-end and actually send the data to the server so on our front-end we're gonna use something called fetch so right here instead of just logging out to the console we're gonna actually send that data somewhere so first thing is I need a variable to hold on to where is the server that I'm making requests to so we'll call this API URL and this will be HTTP colon slash slash local host local host port 5000 and slash muse so I'm going to be making a post request against this URL to actually send this object to our dynamic server so here we'll use fetch we'll pass in the URL that we're making the request against and then we have to specify a few different options so in this case we need to tell it that the method is post we need to say what is the body of the request in this case the body of the request or the thing we're sending to the server is the miu itself this object with name and content so we're going to set body to be mu and then also we need to specify some headers so we need to tell it what are we sending it in this case we'll specify the content type header and we'll say application JSON so we're telling the server hey server in the body of my request is JSON right now it's actually not so right now it is a JavaScript object but to turn it into JSON we have to use json stringify and this will actually take that object turn it into something that the server can parse and understand and then we should be able to see it on the server side so essentially what's happening here is when the form is submitted we grab the stuff from the form we put it in an object we show that loading spinner and then we attempted to send this data off to our back-end server so let's see what happens so actually let's let's set up okay I have the backend route I have the form let's let's see what happens we're gonna watch the server side logs because we want to make sure that we're actually seeing that incoming thing that the client is sending us let's see okay so my name is CJ my Mew is hello world and I throw in a cat and then we try to send it Oh No the dreaded cores error so you may have seen this before but it's right now it's saying responds to preflight request doesn't pass access control check no access control allow origin header is present on the requested resource so therefore origin one two 7.000 180 so you'll notice the webpage is currently on one two seven zero zero one 8080 that is the current origin is therefore not allowed access to the origin which is on port 5,000 so essentially the browser is trying to protect us it's doing this on our behalf like it doesn't want javascript to be able to talk to like just any server in the world unless those servers actually allow it so what we can do on our back-end is say I will allow incoming requests from any any any other origin so to fix this specifically we're going to install something on the backend now if you get this error you may not always be you may not always have your own server you might get this error because you're trying to talk to some other server and in that case there are other ways to get around it or fix it but in this case we were going to use a package on the back end which will automatically add this header this access control allow origin header so in our server folder here I'm going to install cores so this is a NPM package which is a express middleware and then in our server side so first before before we move on let's let's clarify where we are see the cores are a rebel in this moment you will see this error a lot there are different ways to fix it but specifically if you're in control of the server you can install the course so we saw it we recognized it we remembered pretty much how to fix it if we're in control of the server that was the front end we were working on code here that's sending data to the server and now we're going to transition back to the back end so we installed cores and now let's use it so the way this works is I can bring in the cores module and then do what's called using it so I'll say app dot use cores and this actually adds cores as a middleware so now any incoming requests to my server is gonna pass through this middleware and it's gonna automatically add those cores headers to it so this should get rid of that error and then we'll see if we're actually logging out what the client is sending us so we'll go back we'll try again my name is CJ my Mew is hello world we'll send it and we see undefined so another thing that you have to do on the server side is add a middleware that's going to parse incoming data so right now in the client we can see on network that this post request is attempting to happen so it's making a request here it's sending this data so we are sending it from the client but the server can't process it so for this we actually need to add the body parser middleware and this is built into Express so I can use express dot JSON and this is a JSON body parser so any incoming request that has a content type of application JSON will be parsed by this middleware and then put on the body so now we actually should get access to rec dot body let's try okay so name is CJ mu is hello world we're gonna add a cat here oh not that cat okay go and notice the server is now receiving the data so the client the user types in there for the other information they click the submit button it gets sent to the server and now the server has to actually do something with it so let's look at our checklist we have made sure that we're actually receiving that data so the moment I press this submit button the server is receiving it so I can try again what and the server is actually receiving that so we're taking it from the client and sending it to the server ok so we added our middleware and now we can process this incoming request so on the server side we actually want to do some validation we want to make sure that the client what they're sending us has a name has content so let's just do will say if is valid mu and we'll pass in rec top body and if it is then we'll insert into DB so we'll handle that in a bit but if it's not we actually want to respond with an error right now my my client side like technically you could click that submit button without typing anything in so I want to protect against people just submitting Blanc de Blanc data to the server so here I'm going to just do a res dot status I'm gonna set this to 42 and then here I'll do you arrest a chase on and just give them a message hey name and content or required cool and now let's write this function is valid new so is valid new nope not that takes in so this is a function it takes in mu and we want to make sure so if mu dot name is a thing and mu dot name to string dot trim so we're gonna take the name that they're sending us make it a string trim it to remove all whitespace and make sure that that does not equal the empty string so we're gonna make sure that they have actually sent us a name and this exact same thing for the content so here we'll make this content so we're gonna make sure that they're sending us a name they're sending us some content and then we'll insert it into the database and for now let's just create an object let's call this mu and it will have a name which will be wrecked by a name dot to string and then we'll also have a content and this will be wrecked body dot content to string there was actually an interesting question so I noticed you're doing validation do you ever use a library or this came from Noel Jose is there any library node module that you know that helps with data validation yeah absolutely kind of don't have to do all that code manual in your definitely so there is like it's literally called Express validator you can search it on NPM and they're probably a lot of other ones out there but these are various libraries that just make it a little bit easier to do validation on incoming requests so this is a pretty popular one maybe this is not the one but yes there are packages that will do that for you and then also if on my stream before I've used something called joy which is discussed in the chat and I was like I had no idea what everybody's talking about oh yeah so joy is a library that comes out of the happy team that so happy is another framework very similar to Express but you just do things a little bit differently but joy is a really cool library because you can do like object schema validation and like make sure something is a string and it's alphanumeric and it has like a very nice way of defining it I actually found one called I think it's called yup which was based on joy is very similar but yes there there are lots of them initially when you're getting started I like to just show this to show like what's happening but absolutely if you're if you have an object that has like ten properties you probably want to use some library like this oh no did I just close Chrome I think I did wait did I oh well localhost 3000 oh 5,000 and then localhost 8080 and what about is someone also asks something related to security yes but I well note about secure those routes for invalidations you talked about so yeah and like what's missing here in terms of security I guess definitely so the main thing is you always want to validate what you're putting into your database database and I'm doing that right here I'm making sure that the data they're sending us has a name and has some content and then the other thing I'm doing which kind of glossed over is whatever they're sending us I'm saying to string so when you're dealing with a database you want to prevent what's called in so if they tried to send us like a nested object instead of just a string and I didn't say to string we could potentially put that into our database so you want to be very careful there the main thing is if if you're dealing with receiving data from a client you always want to do validation and you always want to be very careful about what you're putting into your database they are correct and that I haven't done any validation on the client side but as long as I'm doing it on the server side no one's gonna be able to put bad stuff into my database definitely okay so now we're validating it and it should so actually if I let's look at the dev tools and I try to send this as an ad form you'll notice I get back an error I should probably handle it we don't have time but if I do send it good data then it logged it out and now we're ready to insert it into a database so let's look at our checklist we have validated the name and content it must be a string it's not empty if it's not valid we're responding with a 42 error and it we are making sure that it has name and content now we want to put this thing into a database so for the database I'm going to be using MongoDB and there are a lot of libraries for talking to MongoDB specifically the library I'm going to be using is called monk it's very simple very easy to interact with really popular when people use is called Mongoose but this is way simpler to get set up so I'm gonna install a package called monk and locally I have MongoDB installed on my computer so I can type that drops me into a shell and I can actually query the database insert stuff in and interact with it in this way but as long as you have it installed and running the stuff I'm showing now will allow you to connect it to your database so I installed monk and let's get it going so in my server we're still on the server let's create a connection to the database the first thing is we'll bring in monk and then we will create a connection to the database using monk so I'm gonna create a variable called DB this will be monk and then you pass in how does it connect to the database in this case my database is running on my local machine so I can do localhost and I tell it what database do I want to talk to in this case we'll call it me our and right now this just says connect to the MongoDB on my local machine to a database called an our simple enough the way works is with collections you can have different collections of data I think of a collection is just basically an array so ultimately what we're going to be doing is have we'll have an array and then every time someone submits them you will put an object in here that has like a name and it has some content and then will automatically assign it some unique ID but basically every time we put something in the database this array is just getting bigger and bigger and bigger but the cool thing about this is it's not just an array it's a full-fledged database it keeps track of the information if the server ever goes down it's all still there but that's pretty much what you can think of a collection as it's just a database that were an array that were just pushing data into so I want a collection called muse so I create a variable called muse and say DB get and we'll just pass in muse so this is now a collection and the cool thing about is if the database doesn't exist this will automatically create it if the collection doesn't exist this will automatically create it so we basically are just connecting directly to the database and if it doesn't exist we're creating that collection awesome so now muse is a collection inside of our database and here after we've done all of our data validation we want to insert it into the database so let's just do muse insert and specifically if you want to know how to use monk more you can look at their documentation there's all kinds of methods like insert and update and find specifically I'm using the insert method and I'm gonna pass in the mute that I want to insert and then we should get back the created mu and in this case I'm just going to respond back to the client with what was just created so I'm gonna do a res dot JSON we'll pass in the created mu and let's see what happens so let's back up a little bit we are listening for when the the client is sending a post request to this URL they're sending as data we're gonna validate it before we insert it into our database we'll create the object then using our existing collection here we will insert it in and then once it's inserted we're going to respond with what was just inserted so save that let's check some boxes and then we'll check to make sure it works cool oh and one thing I forgot is before we insert it let's also give it a created date so we can actually show whenever these Mews were created so for this I'm just going to say created is a new date cool we've inserted it we've responded it with it and I've done everything right we should be actually inserting it into my database so now back to the front-end so if you remember this was all initiated by this post request here the client is sending our server some data and the date the the server is then inserting it into the database and then now we actually need to do something with it so here I'm just going to do a dot then we're gonna get back the response and I know that the response is JSON because my server is responding with JSON so on the client side I can say read such a song and then I get access to the created mu and for now let's just log it so our client will send the request the server will receive it and then we'll log it out cool let's see what happens so now c.j mind you is hello world there are some emojis go cool so you'll notice that I'm actually getting back an object and you'll notice it has an ID so this thing was actually inserted into the database and then it responded with that object so that's great it's in the database now we actually want to show all of the Meuse that have been created on the on the page here so let's do that let's look back here cool so we've logged it out and now what we'll do is after the post request we want to show the form again and hide the loading spinner so on the client side and we're on the client we'll say let's hide be loading elements we'll say done here and then let's show the form so basically when you're done submitting our eerie display the form so now if I say CJ hello again or cats send you notice the page refreshes probably one more thing I want to do is like reset the form so I sent it off it got put in the database let's clear out the form here easy enough we can just say form dot reset one person released it's not familiar with the fetch function Oh what's the fetch function doing definitely so if I believe in p5 is a called load Jason hello Jason is equivalent yeah yes so in if you've ever worked with p5.js it's a way of requesting data from a server so there is low JSON if you've ever worked with jQuery its dollar sign get or dollar sign dot post essentially fetch is now built into the browser and it's a little bit easier way of making requests to to a server so this is like synonymous with Ajax or requesting to a server cool just like there's a lot of coding garden fans in the chat appreciate that awesome okay so where we at where we showed the form we hide the loading spinner okay we're in the home stretch we're very close here so the last thing we want to be able to do is all of the created news we need to show them on the page here so for that we're gonna make a request we're running low on time so don't we go back to the diagram just yet but let's let's get it going so basically what should happen is the an incoming get request to slash muse should get all of the records from the database and just respond with them in an array so what we'll do here on the server is say when the server receives a request on slash muse we will then query the database so we'll just say so if you remember muse is our variable that represents the collection and we'll just say muse dot find and if you don't pass in anything that just means find all of the things in the database and then we'll get back some muse and with those muse will just respond so res DOJ's on Mews so now when my server receives a get request on slash muse go into the database grab all of them and then just respond with them as an array so before I even test this on the client-side I can actually try it in the in the browser because if you remember when you put in a URL that is a get request so if I do slash muse there we go oh wow I put a lot of stuff in there but am I forgetting the creative date maybe that was before I had it created but now all of the information in the database is being listed here so now I actually want to make this request with my client-side code so that I can show it on the page so let's do just that get respond all right so on the front-end when the page loads I want to request all of them use so I'm going to create a function let's call it lists all amuse and actually by default I want the the spinning bar to be showing when the page loads because I'm going to be grabbing all of the muse so show the loading element and then list all muse so I have a function list all muse and we'll use fetch for this so we need to make a fetch and the the URL is actually the same so you'll notice this was the URL I was putting in my browser to request all of the muse so but instead of a post request I want to make a get request to get all of that data so let's do that so I want to make the fetch against API URL and the way fetch works is if you're making a get request you don't have to specify any options you can just say hey give me that data then we get back the response will parse it as JSON because we know that's what it is and then we get to all of the Meuse and for now let's just log those out so when the page loads will log out all of them use and then they are so now on the client side we have an array of all of our data now we actually want to add it to the page so one thing I'll do is just iterate over them so I'm just going to do muse dot for each we'll get access to each mu and in order to add it to the page I need some reference on the page of where I'm going to add it so in my HTML I basically need like an x marks the spot and I'm going to put them right here let's give this a class of use and so in my JavaScript I'll select this element and keep a hold of it and then anytime I want to Adam you I'm gonna put it into this elements we're gonna pin to the child so in our client let's create a variable called muse element and we'll do again document query selector and because I gave it a class of muse we can select it like that and now that I have the muse element for every element in this array I want to append it to the page or put it on the page so first thing is I'll need to create some elements so I'm gonna say like a div will be document dot create element and I'll pass in div and then we want probably a header to show the person's name so let's create a header and this will be document dot create element we'll pass them like h3 maybe and then we want to set the contents of that header so we do a header dot text content and this is going to be new name because every mu has a name and then we also want the actual contents to be in like a paragraph tag so let's just say contents that'll be document dot create element P tag and then I'll say contents dot text content will be mu dot contents is it contents content with a singular okay so we're setting the h3 we're setting the P tag now we have to actually put these somewhere so when used document create element it doesn't actually put them on the page it just creates them so what I'll do is take this h3 and append it to the do so I'll say div dot append child header and then I'll take this P tag and append it to the div as well so div dot append child the contents and now this div has the name in it it has the content in it now I want to take this div and put it on this museum basically right here I want to put that element so I created that Muse element variable and I'm going to a and the div to it and just like that there they are but I think I misspelled some you've got a typo okay and I got it so where vo I think you misspelled content cont e t--'s the chat funny I'm not I'm barely watching this tree we're just watching the chat okay yeah so and it's working so we see the name of the two of them you starting out the tweet the contents of the tweet and they're all listed on the page here so when the page loads it makes that request it adds all of them to the page so that was fixed awesome but one thing we want to do is also like hide this loading spinner after all of them use load so let's just say loading element dot hide so after the page loads we get it all there I think I want to add a little bit of styling let's say the muse here has a width so in our styles let's say muse let's say it has a width of like eighty percent so that should like shrink it in a little bit but we also want to give it automatic margin so it's centered there's a good question here what's the difference between text content and inner text seems like I was like I have no idea that must be a good question let's look at it's not is it inner HTML or actually a term it might be a inner inner HTML but I think inner text and text content are probably synonymous but the main difference is in the meant one thing that I'm not using is inner HTML god if the text content is something special you're specifically using it over inner HTML yes and specifically because this data right here is coming from users right so people are entering in their names they're entering in like their muse and when I add it to the page I don't want to potentially add like some script tag or something that they put and typed in so if you use inner HTML whatever you set is in our HTML will actually get rendered on the page by using text content even if they typed in like some valid HTML you'll just see the HTML text it won't actually render so this is a security precaution to prevent what's known as cross-site scripting but then there's a difference between text content inner HTML there's outer HTML inter HTML and outer HTML are the same whatever you set it to will get rendered text content and then inner text probably have the same relationship I haven't really used inner text before cool but yeah that was a big question oh wait last thing I'm not showing the date so let's all show show the date so let's create a date and we'll say document dot create element okay so the last thing is I'll create like a small tag and then we will append it here so div dot IO start we needed to set the text content so I'll say date dot text content is equal to MU dot created and actually I'll pass this into a new date so it should give it some decent formatting and then we'll append the alka rights by the way one difference is inner text returns the visible text contained in the node while text content returns to full text okay and now we're showing something so apparently when I first started inserting I wasn't actually adding the date but on these later ones I am but one thing I want to do is I want to show these in reverse order because the more recent ones will appear at the top so all we have to do for that is before we add them to the page I'm just going to say muse dot reverse and I guess the other thing is reverse reverse is not a function cool and so the latest Muse should show up up at the top named CJ hello but now one thing I want to do is after I submit the form just get all of them again so that after you've immediately submitted it is added to the top of the page so getting a little sidetracked here okay we got all the muse we iterate over there array we have to the page we reversed them now we we are showing the form we're hiding the loading spinner last thing is after you create mu I want to refresh that list so that it actually pops up in the page and that should be easy because we have this function list all Muse and so after submitting so this is the submitting to the server after submitting we'll reset the form we'll show the form and then will list all Muse like this okay so name is CJ hello again again again like a cat more cats actually let's do a tiger go and okay something weird is happening so whenever I am listing all the Mews I'm just appending more and more and more and more to the page so one thing I actually need to do is clear out the list so that way I can riad them so let's do that basically before listing all music TM oh I'll just say here muse element dot innerhtml is nothing so basically blank out everything that was there before and then adds something new so names that's the legitimate way of removing a whole set of Dom elements you don't have to individually like iterate through them and remove them from the page you could I'm not aware like I don't know of the performance implications yes but yes yes yes somehow that always felt like a I'm not supposed to do I do it all the time cool and so now well those I just typed name was name oh but the whatever you are now submitting is getting inserted in here hello world let's do below G go and it shows up at the top of the list awesome so this is our app I do have only on the list here that I was going to deploy but I don't know we have enough time for that one thing I'll talk about in terms of like security implications there like putting this out there in the world I would want to prevent people from inserting bad words or different things like that so there is this package on NPM called bad words where basically before I insert it into the data I could filter it and that way get rid of any nasty words or anything like that and the other thing is to prevent people from spamming my server with a bunch of different music they could like because I've built this API they technically don't have to use this form right they could write some JavaScript that just makes a post request on my server over and over again so to prevent that you might do something called rate limiting and so there's a package calls express the rate limiter that just limits the request to you can set it up to 1 every 15 seconds or something like that I guess the last thing is let's just look at the diagram let's review what we built today and then we can we can recap answer questions and stuff ok so the page loads it initially makes the request to the static file server which is hosting all of our HTML and it makes the request for index.html and that gets loaded into the browser and then that HTML says I have a CSS file I have the skeleton CSS file which is on some other server and so your browser will then make the request to those servers to then load that content and actually load it into the page now the other thing that happens is well and even think about scripts so the fact that I have script source equals client jeaious at the bottom when the browser sees that it has to actually request that file from the static file server it loads it in and then runs the code that's inside of it and so when it runs that code it actually sees this fetch that says get the request from you so get it say a get request to the URL muse and specifically it's going to the server on port 5,000 the server receives that request and then it actually has to talk to the database it says hello database please find so fine find all the things in the database return them and then we take those and we do res dodged a song which actually sends them back to the client side then the client will iterate over the array it'll add them all to the page they're nice and great and then lastly you have that post request so a user will enter into the form here they click Submit that makes a request out to our server which is a post to slash muse and that will have a body it'll have like what is your name and it will have the contents the server will receive that body it'll parse it it'll understand it it will then insert it into the database and then it will respond with the thing that was inserted and then our pays the way we've written the code was that after that's done it makes another request here to get all the latest ones and list those out on the page cool I think we've done it I think yep people are very I don't know how I don't mind staying a little longer okay people are very interested at least in like some tips or like how you would deploy it or if you have if it's kind of a thing that we think we could do now we could do it okay I mean do I have ten that's the point cuz it's kind of that so give them big that that's like the flourish at the end okay awesome so yeah and so we have this app and now I can I will show how we put this out in the world and then all of the wonderful people that are watching can submit their muse and we will be able to see them so I guess before I do that I do want to add these like the bad words and filter and express rate limit so there is a package on NPM called bad word so I'm going to install that there's another one that I use that's called like word filter or something but this one did you just go ahead and this one but it's interesting to note there a bunch of these yeah and I just found this the other day just by searching like profanity and people have assembled a list of how to do this well not how they observe a list of words that you can just add into your app so we'll bring it in and then any time we insert something in we'll just clean it to get rid of any potential bad things so this is going to be on the server side let's bring in filter and then we will create a filter let's create a filter right here and then before we insert it into the database which is right here we're creating the object I'm just going to do filter clean and I want to do this on the name and then also on the content cool so in theory this should work I don't want to type bad words on screen but it actually will filter it out and put like stars in there so as long as the server still running yeah we're good the other thing is rate limiting so I want to make sure that people can't just submit thousands and thousands of requests over and over so I'm going to use Express rate limit so let's install this and now that we have it we'll use it I'll look at on NPM to see how to use it Express rate limit and basically this one is based on IP address there are other rate limiting packages that will actually use a database to keep track of users that have visited your website so this is how we do it we bring in rate limit and then we need to use it just like we did our other middleware so I'll say app dot use rate limit dot something so we actually invoke rate limit with how how often we want to rate limit so in this case they're limiting it to 100 requests every 15 minutes I'm gonna let you do one request every 30 seconds I think this is in milliseconds yeah so every 30 seconds you can only submit one you should I go lower than that what do you think so every 30 seconds cool and that should do it as well so one thing that should happen is on the client side now if I try to submit something and then send it too many requests already maybe I didn't specify this right so if we look at window milliseconds so 30 times a thousand is a thousand milliseconds seconds 30 thousand milliseconds okay okay I think math is hard okay oh you know what it is I think it was because okay so the page load loaded that was one request to get it get to get the list and actually so this is it I only want a rate limit adding to the server so you can request all day long you can you can make requests over and over and over again that's fine but actually submitting one is that that's what I want a rate limit so by simply moving that app dot use down this will now only rate limit creating news okay we wait I so somehow I missed that it was it was by default at rate limits everything everything and just or where you put it in the code and so this has to do with with middlewares so in express when you do like app dot use it's you can think of it it's just a waterfall it's top down god-like every request coming into our app hit scores and it hits the JSON parser then it hits the rate limit but if we move it now when a request for muse comes in it basically hits this before it ever hits the rate limiter got it yes that makes sense well I did not realize that because I think of everything as asynchronous or the order doesn't matter so it the order of basically only matters when the app spins up yeah and so like it creates this ordered ordered list of things drawn okay so that that should do it so now we can request the page all day long but if I say my name is CJ and I say hello world go so that submitted it but if I try again within 30 seconds I get an error too many requests so this is gonna prevent people from submitting too many things and one thing I'll do is instead of showing the form immediately on the client is just wait 30 seconds before I show it so after submitting is successful let's just do a set timeout and in 30 seconds will unhide the form okay so CJ hello world send and then now in 30 seconds that form will pop back up and you can submit another one if you want to okay so I think we've done what we needed to do to get this thing ready to deploy let's deploy it so first thing is setup environment variables so my server side right now it's only talking to localhost at the hour I want to tell it when you're deployed talk to the deployed database so I'm gonna do process and e dot URI and I can call this whatever I want I'll show I'm gonna be using a deployment tool called now you can specify what are the environment that you deploy with and in this case I'm gonna create one called Mungo URI so what this says is if this environment variable is defined connect to that database otherwise connected to the localhost 1 so that's our database connection and we should be able to deploy it so for the database I'm using something called M lab and they let you set up free 500 megabyte databases and you can sign up login I think to hide my screen I'll do this that when you deploy it just to make sure no trust our bad words filtering and autre it's a wonderful audience of well nice lovely people but cool and so I've actually already created into the base so this should be cool so I've already created a database but you can log in you can sign up they have a way of creating one for free if you want more than that you can also pay for it but I've created the database you will need to create a user and then once you have a user you create this connection string and they show you where your username and your password goes in and then you need to add that as a secret on now so the way it works is you say now secrets add and you can call it anything you want it's already have one set up just because I didn't want to risk doing it but I can give it any name you want and then you give it the value so typically the value would be something like this and you would fill in your username and password and now inside of now there is a secret you can use called now or DB and that's what we'll actually use to deploy so the site's super easy to use I think people have been asking about we do have a coding Garden has a discord server so if you if you're trying to do this stuff and you have questions feel free to join in there we have a help channel you can help people work things out so this specifically is how we're going to deploy our database and now we deploy our back-end and tell it to talk to that database so to deploy I'm using a tool called now you can get it from a website called Zico it's a really really easy thing to do you just type now and it will automatically deploy that either server or client but in this case I want to tell it that my URI process in environment variable which I defined right here should come from my secret called now our DB so that should now when it's deployed connect to the database let's go apparently I'm using an older version but this should deploy the backend and the interesting thing about now is it gives you a unique URL every time you deploy but we can do is aleus it so i'm going to show you how i'll alias this thing okay and if everything went okay i can actually throw this in and I should get back the hour and if I do a slash Muse I should get back an empty array because there's nothing in the database so cool so we're on the internet one thing I'll do is I'll set up an alias and I'll say me our - API so my my back-end will be at me our API Sh so this alias will just so I don't have to type in that big long fun thing so now when I go here it's the exact same server it just has like a nice name and I can do like slash Muse and that gives me back in a Dra cool and now we want to deploy our front-end so our our back-end is now at this URL so our front-end we need to update the code right now it's pointed at localhost so I need to say if we're on localhost send the recs requests to localhost otherwise send the request to the now server so I'll say if process a and V no no sorry we're on the front sorry if window.location that hostname is equal to localhost and I'm gonna use a ternary I'll say use that URL otherwise use this URL HTTP colon slash slash slash muse so now when we're deployed it'll detect that it's not running on localhost and it'll make the request against our back-end that of the front end and I should do it okay so I'm gonna CD into the client folder we'll deploy it that was way too easy for deployment no I feel like I can't deploy this because I'll be Philby three hours before I have it yeah cool and actually did deploy this earlier so nobody could take my alias because somebody might have tried but now okay so I'm ahead of everybody in real time so what you are L I'll put it it's a meow or so in yo w er dot now SH gotta be the first one people are gonna be faster than me Oh No 49 oh no something broke I got a debug this really quick okay so that's that's worthy not a proper coding train up so does it just works I guess you can you can have stuff work on your channel and me it's all about it well I guess I guess I I prepared a lot for today but on my channel I guess I haven't talked about it sometimes I just just make errors I read the docs we figured things out live so the way I'm gonna debug this is I have the element inspector open and I want to look at the network tab to see what I'm actually sending to the server so when I click send this makes a post request to slash muse and I can see that I am sending the data and if I look at the response to many requests please try again later did you already add something I did attempt to and then I just got I mean I'm just looking at the console I just got uncaught syntax unexpected token in JSON okay I think it's working I just we I think we've just rate limited ourselves so oh yeah so yeah so like people are submitting things you just have to make sure that you don't do it every 30 seconds look at the backend it is could something be caching is it rate limiting by IP address so we would probably be I mean we're getting a dynamic IP address from the Wi-Fi here but it's ultimately gonna end up being the same yeah the same idea so that could get I'll just keep refreshing this okay where's the people there so it's working yourself I just didn't want to totally open it to the world because this could wreak havoc cool cool yeah so if there's other questions I guess I can talk about my my setup what I do on my channel oh yeah before that like what's next so this is this is very very basic right this is we have a forum you click Submit it gets listed on the page but if you think about Twitter there's more those user profiles there's searching tweets there's tagging so we could take this code here we can add comments and replies so you could reply to mu we could create user accounts where you can have specific ones work cuz right now if somebody else types in the same name they appear like they're coming from the same person I'm sorry to interrupt I don't know if this is true but the chat is suggesting that the rate limit is actually a single rate limit for everybody so only anybody it's like once somebody posts nobody could post for 30 more seconds I don't know if that's true that was this is based on IP address okay please well we don't have any bug but again like all the features of Twitter we could we could start to write this and so probably on my channel pretty soon I'll start to add features to this and we can work on it as well that's it awesome so before I do want to say a couple things one is well what as I are so interested in your kind of like theme set up font stuff do you want to take a minute to just you know so mostly I would suggest subscribe to CJ's channel and then they can go over all the stuff in like a lot more detail but just for the people watching right now are there a quick few things about like that what like terminal application using what theme using a visual studio could actually did a video on this so there you go but I will like talk through it but if you search on my channel its coding garden at a Mac I think yeah so setting up a Mac for a web development I talked about I talked about the code editor I'm using I talked about how I set up my terminal I talked about how I all the extensions I'm using four vs code I talked about basically how I have all this set up were there specific questions about I think people were just like which font what color so yeah then that could be the answer maybe you have this document sit in a separate video definitely just go so check that it's a good way to plug the channel right now would you guys please actually let's see how many subscribers am i okay okay cool but but the font i'm using is anonymous Pro I really like this font there's a lot of other fonts out there but I have this as my terminal font and my editor font but yeah if you check out that video I have links to all of my extensions my Styles all that stuff that I have set up inside of you few people said they just subscribed thank you so yeah so I mean what's amazing about this first of all it's CJ and I were discussing what he was gonna do it he said I think I'll make a Twitter close it's like in an hour I think that's crazy well no like user accounts and stripped down but still this was pretty incredible to see the full the full stack really I was trying to think of a different word for it but that's the word the full stack you know I so much to the stuff that I do is mostly client-side write algorithms visualization stuff sometimes I'll pull up a node thing or use a database but to see that whole picture altogether and also just seeing your kind of work flow is super super illuminating I feel like I learned a ton of snow I was like made some notes of things that I'd never seen before which was building I guess that's one thing to note like so I'm showing like the client was the browser but the client could be a desktop right it could be like a mobile phone native app and they could all work in a similar way and this is actually why I like to build like architectures this way because a mobile app could talk to the exact same back-end the only thing that changes is the client and are there other so when is so I know you've been in New York for a while you're going about you're based in Denver yes and you're going back there when is your next livestream are there other things people should check out like I don't know Twitter or Instagram or stuff like that yes thanks for the fun so I'm on I'm on Twitter coding underscore garden you can follow me there every time I go live it tweets here right now I do plan to stream I think on set I have a pretty busy week because I'm moving from New York back to Denver I got a pack up and my students are presenting Capstone's tomorrow's we're getting all that ready but if you look on my channel I typically try to do upcoming live streams and any any stream that's upcoming I'll put it here so you can click on it to know before it happens the other thing is I do have a discord and there is a live channel on the discord so if you look in one of my more recent videos there's a link to fill out a survey to join this discord and we have help channels but typically I'll post in the live channel if whenever I'm going live and are there you were doing some teaching here in New York are there other things you've got on the horizon of teaching experiences that you're thinking about doing or yeah like I really am like just focusing on when I get back to Denver I will have so before I came to New York I was streaming five days a week and I think that's why you found me because I'm like just there live show but yeah when I get back I do plan to do it more often lately it's just been so I'll talk about some of the streams I do so every either Saturday or Sunday I've been streaming with a friend named Tony and we do what's called noob quest where Tony is totally brand new to coding and what kind of pair and like work through things and then I also do a every mostly every Wednesday a code kata stream so if you're familiar with code where's code Coty's I'll just sit down for a couple of hours and I'll pick some out and then just solve them live but also show like ten different ways to solve the same thing and like how do we do it with the for loop how do we do it with reduce how do we do it with map and filter and I also have if you check out the github tons like every video I've ever done the code for it is free and open source here and there's also one for code kata so if you have suggestions for that you can submit them here as an issue so nicely organized easily to aspire to me awesome cool so thank you so much for being here I'm so glad that this worked out because I know it's like you're leaving this week we go and so many wonderful nice comments and the chat hope people will subscribe to CJ's channel when I come to Denver hopefully I can appear on the Cobra garden I just want to thank you like this has been amazing like to see the space also to the coding training community like all the mods K week Mon and they answer me and Alka like they've been hanging out in my channel and like they're like all wonderful people it's awesome oh cool and so thanks for tuning in I will have this cold which you might detect but it in theory is something I get a little better I'll be back on Friday maybe I'll try a quick sort again but I have some other things that I'm definitely planning to do so stay tuned for all that stuff on this live stream as soon as I hit stop streaming will be available to watch I mean sometimes it takes like a 15 minutes for like YouTube to process it but then it'll be available to watch as an archive sometimes I do you know as you've watched up do you like edited versions of last year's I kind of don't think that this needs an edited version because when we added I viewed it was like the whole thing was the face so so awesome so thanks thanks so much CJ thanks for your watching and I'm looking at the chat I'm gonna do wave goodbye little train whistle for CJ and now I'm gonna hit that again someday I'm gonna do that CJ was teaching me some stuff about open broadcast studio so maybe I'll get better at it maybe I'll have an outro thing but right now I'm just gonna hit the stop streaming button cool there we go bye everybody

Channel: The Coding Train

Views: 380,596

Rating: 4.9468307 out of 5

Keywords: live, programming, daniel shiffman, creative coding, tutorial, coding, challenges, coding train, the coding train, itp nyu, twitter bot, twitter clone, full stack, full stack development, cj, coding garden, guest coding train, coding guest

Id: JnEH9tYLxLk

Length: 87min 43sec (5263 seconds)

Published: Tue Sep 11 2018