Learn The MERN Stack

[Music] hey what's going on guys welcome to a new YouTube series called learn the myrn stack and if you don't know what the

Marne stack is it stands for MongoDB Express react and nodejs and MongoDB is a no SQL database it stores our data expresses a back-end framework that's used mostly for

building api's react as a front-end UI library slash framework and then nodejs is a JavaScript runtime which basically allows us to use JavaScript as a server-side technology or server-side

language and then putting all these these technologies together allows us to build really powerful applications it's also a very popular stack right now if you can build Marron applications and

deploy them there's a really good chance that you can get a really good job as well as build you know your own great applications now in this series we'll be building something that's very simple on

the surface as you can see it's a shopping list app we can list items add items delete items you know have a little modal pop-up where we can add an item so it's pretty simple on the

surface but behind the scenes there's a lot going on we're gonna build our API with Express with node and Express along with Mongoose which will connect to our MongoDB database and we'll be using M

lab for that you can also use a local deployment if you want the code won't be any different you'll just have a different Mongo URI to connect to alright so you can use a local MongoDB

database if you want so we'll be building this we'll also be using a couple other things on top of the myrn stack so one is react strap which is a really cool module that

allows us to basically import bootstrap components and use them kind of as react components with properties and so on so it's a really cool way to implement bootstrap and react we're also going to

be using react transition group which will allow us to have this little fade effect if I go ahead and delete you'll see it just takes a second that fades away same thing if I add something it

fades in so we'll be using that which is pretty easy to implement we'll also be doing a full deployment as you can this is live right now on Heroku so I'll show you how to use the Heroku CLI how

to use get to push the application to make it live so there's a lot that's going to go into this this series even though this application is very simple one thing you'll notice it doesn't have

is authentication and I left that out because I wanted to I didn't want to make this series too long for now but you know if it does well and you guys like it it gets a lot of views and you

guys want me to then I can add authentication to it probably using JSON web tokens but I do have a udemy course called myrn stack front to back where we build a small social network and it's a

16 hour course we use these same technologies we use JWT I'll show you how to protect your back-end routes and all that stuff so if you get through this and you want

to learn more and go more in depth I would suggest that course I'll put a $10 link in the description but that's what we'll be building guys so I usually don't like to do like an intro video to

my series I like to just get started but I wanted to kind of explain you know the technologies we'll be using what will be what will be building and stuff like that I also just wanted to take a really

quick look at the code just so you can see kind of a preview of what we'll be doing so this is the application here I have it open in sublime but we'll be using vs code for the course or for the

series but this is the back end so the entire react application front end is in the client folder and then on the back end we have our server j/s where we bring an express mongoose we connect two

mongoose all of the endpoints are going to be in this file here this routes api items file down here we just have a little block of code for when it's in production we want it to look at the

client slash build folder which is you know when we have a react app and we do npm run build everything goes into that folder and we want to basically look at that index.html file when we're in

production because we don't have that dev server when we deploy to production which is a really big part of learning the myrn stack is how to actually deploy it so that's the server j/s file if we

look in routes API items EAS we have three end points one is to fetch the items one is to create them one is to delete them we're bringing in our model right here which

is very simple so this is the model we have an item schema with just basically a name which is a string and then a date which will be the current date will be put in by default so very simple model

simple schema and then in the config we just have our Mongo URI which if you're using your local installation will be different than this it'll be your local host all right so that's basically the

gist of the backend the client which is the react component is where we'll be spending most of our time so we have a couple different components here we have the app navbar which is pretty simple

we're using react strap we construct it with all this react strap stuff so this navbar navbar brand and so on and even has its own little state if the if the hamburger menu is open or not

so we'll implement that then we have our item modal and this is where we actually connect to redux so we're bringing in connect from the reactor Redux package we have an add item action down here you

can see we're constructing the modal with react strap we submit it okay it goes to on submit and then we fire off that I add item action which is in our actions file and then our shopping list

component just gets the items okay once again we have an action for that and and we're gonna use what is it react strap to create a list group with list group items or you notice that we're also

using this transition group and the CSS transition that's how we're going to get that little fade effect okay so that's that I'm not gonna go too in depth with this stuff this is the actions file so

this is where we make all the requests to the backend we have our reducer so this is the item reducer and we bring in all of our types get items add item delete item and then items loading which

you can see in our state we have a loading value which will be false and right before we make our request it'll be turned to true and then once we get the response from the request it'll be

turned back to false okay and you can see that right here so that's pretty much it as far as you know just the gist of what we'll be building as you can see it's it's quite

a bit for the simple application but that's the point it's to get you to see how everything works together so that you can build your own bigger and better applications so I really hope you guys

enjoy this series I would highly suggest that you code along with me and actually deploy it along with me I think you'll get more out of it than just watching it but again and you know that's totally up

to you so thanks guys I appreciate it and I will see you in the next video