Learn The MERN Stack
Programming, Science & Technology
Learn The MERN Stack
- Learn The MERN Stack [1] - Series Introduction
- Learn the MERN Stack [2] – Express API & MongoDB
- Learn The MERN Stack [3] – Client Setup & Reactstrap
- Learn The MERN Stack [4] – ShoppingList Component & Transitions
- Learn The MERN Stack [5] – Implementing Redux
- Learn The MERN Stack [6] – Finishing Redux
- Learn The MERN Stack [7] – Connecting The Backend
- Learn The MERN Stack [8] – Prepare & Deploy
- Learn The Mern Stack [9] – Backend JWT Auth
- Learn The Mern Stack [10] – React & Redux Auth State
- Learn The Mern Stack [11] – React Registration
- Learn The Mern Stack [12] – React Login & Access Control
[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
-
bootstrap react
css transitions
devops
express
express api
express deploy
express js
expressjs
full stack
full stack app
full stack react
heroku
json web token
jsonwebtoken
jwt
jwt auth
mern
mern deploy
mern heroku
mern redux
mern stack
mern tutorial
mongodb
node
node jwt
node.js
node.js deploy
node.js heroku
react
react authentication
react bootstrap
react component
react express
react full stack
react heroku
react jwt
react login
react node
react node.js
react redux
react transitions
reactstrap
redux