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