CRUD Tutorial Using MERN Stack - MongoDB, ReactJS, NodeJS [Part 1]

hey guys how's it going i'm back here with another video and today i'm going to be starting a series where i teach you guys how to make a credit application using the mern stack so basically if you don't know what it means mirn is an acronym for mongodb express react and node so basically we're going to be creating a crud which the front end will be using react the back end will be using node and express and for the database we're going to be using mongodb so for those who don't know if you're working with mongodb you can use a norm which is like a way of us managing queries using objects and the package the library we're going to be using is mongoose which is probably the most famous mongodb arm that exists so basically this is how our project is going to be and this is probably going to be like a three part series so i hope you guys will like the series so we have here a project it starts with a folder called crud mern you can name it whatever you want so we navigated towards that project and we are inside of vs code and inside of here we're going to be creating two folders so we're going to be creating a client folder and a server folder so you can see now we have both of our folders right here the client will have our react tab and the server will have all of our node server so let's go into our react tab for now and uh cd client and inside of here let's just write npx create react app and a dot this will basically just create and set up our react application and at the same time let's go back to our directory and navigate towards our server because now we can just write uh npm init and you can see that now inside of our server folder there will be uh let me open my server folder if we click enter here like a bunch of times until these questions are over you can see a package.json is installed which basically shows all of our information from our backend and now we're going to be using two different libraries in in our backend so in our node we're going to be installing npm install express and we're also going to be installing mongoose so this should be it and you can see that our front end just finished set being set up and now we have a react application in our client folder and i think that should be it right yeah so we created our back end and a bit of a front end so in this first video instead of going directly through the front end i'm just going to set up the whole backend basically i'm going to set up mongoose and i'm going to teach you guys how to create a simple express server and maybe like already configure the atlas which is the program we're going to be using so if you don't know what that is you should download this mongodb compass actually so if you come here and write db compass you can see that it is this first link right here and you can download because it's it's all fine so let's come here and the first thing we're gonna do is we gotta set up our server so let's go to our client server to our server folder sorry and create a new file called index.js for those who don't know index.js is the entry point of our server you can see here we call it it's saying that the main file is index.js so we can create all of our express stuff inside of you so i'm going to set up a simple express server by writing const express equals to require express so i just called the express server and i can directly come here sorry i made a syntax error can directly come here and create a variable called app and set equal to express therefore initializing our express server and at the bottom i can just write app.listen and i can pass a port so our backend will be on port localhost 3001 and then we can pass a function which will simply wait let me just do it again which will simply uh console.log if we have any if the server is running so server running on port 3001 okay so this is our simple express server and what we need to do now is we need to start setting up some middlewares so basically we're going to be coming down here and writing app.use express.json this will just allow us to receive information from the front end in json formats so this is extremely necessary so we can get all of our information correctly and now we should start importing the mongoose library so if we come here and we call const goose equal to require mongoose we can just come here to the bottom and we now have a mongoose object we can which we can just come here and write mongoose dot connect and inside of here we got to put a string which i'm going to show you guys how we get this string and then we can pass a function so not a function an object which contains one property in our case we're just gonna write you use uh new url parser and we're gonna set it equal to true you don't need to understand what this means but it's just important that we do this for now and i'm going to show you guys how what is the string or the connection uh url that we're going to pass inside of here this will basically represent what mongodb database we're trying to talk to so in order to set up our whole database we need to go to a website called uh mongodb atlas and let's go here and this is where we're going to be creating all of our mongodb database so you can like sign in i'm not going to show you guys how to sign in but create an account and sign in with that account so i'm going to come back when i finished signing in okay so basically when you create your account you're going to be prompted with a page similar to this one or something a bit different but you just navigate towards your projects for a page and you click on new project instead of here we can put a name so i'm just going to call it crud app app something like this and then i create my project i i don't care about any of this i just click create and instead of here i'm going to be setting up everything related to the tables and all this stuff so i want to build a cluster and basically a cluster is just a name for database and we're going to choose the free version so create a cluster we can choose what provider i'm going to choose aws but google cloud and aws are are both as good and you can choose the region these are the three regions you can choose so i'm gonna i'm just gonna choose this one so it's on the east coast which is similar to where i am and let me see the cluster tier it's already the ammo send box so basically this is the free version you can increase if you want but this are the storage you can have and all the kind of stuff so all these stuff are okay you can change the clustering i'm gonna change this to crud and create cluster so now that we're we have our cluster we now have a bunch of information about it so we can add a new user so we can come here to database access and we can add a database user this is important because this is the kind of stuff we're going to be using and there are different things you can put in here for example you would need to put a password so basically i'm going to be showing you guys uh not no i'm not going to show you guys authenticating the password because differently from how i used to do with like mysql or different databases i can't show you this password because although i'm going to be setting it up in our in our project i'm not going to be showing what the password is so i'm going to set up everything here and you can do it together and i'll come back when i finish it okay guys i just created my password and my user it's all over here and the username i chose is new user you can choose whatever you want but again it's not that important for now and now we need to do is we need to go to network access and we're gonna add ip address because it's gonna recognize what is our ip address and i'm just gonna click on add current ip address because it's gonna get my ap address and it's gonna basically recognize it so that our ip can access our database and then we can just confirm okay so since we just finished our network access we can just go to clusters and inside of here if this is finished creating which is not then we will be able to receive our link and we can just directly add that to our file so i'm just going to wait to see when the cluster is created and i'm gonna come back when it's finished okay guys so basically our cluster just finished creating and we can come here and click on connect and let's click on connect using mongodb compass because it is what we're gonna be using and we can just come here and copy this then open mongodb compass which is the program i told you guys to download and inside of here we're going to be basically connecting to this cluster and now we will be able to use this to visualize all of our databases so let's paste this here click connect and this is just a test um it's saying password must be a string and by the way i just figured like i just realized that it doesn't really matter if i if i tell you guys my password the password i used is password one two three four five and if i click connect it should work let's see if it works yeah so we just connected to our cluster and you can see that there's two databases we're going to create a new one over here so we can just click create database and inside of here we can just give it a name so let's basically call it um since we're doing a credit application let's just create an application in which you can let me think maybe an application where you can just add food so basically it's just a list of all the foods that you like the most so you can just keep adding them and since we're doing a credit application we will be able to create new like insert food into the database uh delete the food into uh like from the database and update it and also read it so let's call this database food i just figured it out basically we shouldn't have it capitalized we just have the name food and we can click on create database um invalid namespace oh i should have included a collection name so this is just the name of the table so in our table we're going to create a table called um foods food data this is the name of the table right food data and create database you can see that now we created a database called food and there is a table or collection called food data but there's no data inside of here and we're going to be creating schemas so that we can put that into our database through our code with mongoose so after this since we just created everything we can just copy our connection so let's come here to this and let's close this and instead of clicking on connect with mongodb mongodb compass we can just click on connect with our application so we can just copy this and this string that we just copied is a little bit different because now we can just change this to the password we have in my case it's password one two three four five and we can also change the db name to the name of the database we created in our case it's called food so if we save this it should create a a connection that is working but in order to see that we're going to create some schemas so in order to create a schema which is the table or like the way we're gonna see our information so all the different columns and i say column like with uh quotes because it's not really uh since it's a it's a non-relational database we're just gonna have different data types that we can assert some elements so some values so in order to do that we can just come here and create a folder called models and inside of here we can create different different files so i'm going to create a file called food dot gs and actually let me capitalize it food.js and inside of here we're going to create all of our schema so let me require mongoose so equals require mongoose and inside of here we can just write const food schema equal to new mongoose dot schema and we can pass an object inside of here just like if you've watched my video on sqlize which is an arm for any relational databases we can we can define all of our schema inside of here by just writing the column names so but for example in our database we want to have the following columns and the following information represented the food name so the food name which is going to be of type string and let's also pass if it's required so basically i'll say that it is required and we should also pass a lower case now this shouldn't really matter let's just say it is a food name of type string and it is required let's also um let me think what else we can we add into our database of food let's say how many days ago i ate this food right at days since i ate this isn't a good name but yeah let's just say day since i ate the type of this obviously is a integer or a number let me see let me see i was confused with data types so it's it's a number actually and it's required to add this to the database so i can just say true so after we finish creating our schema we need to create we need to pass it to a model in mongoose so that we can basically just create it in our database itself so this is how it's going to create the schema if it doesn't exist so we can come here to the bottom and just write const food equals to mong boos dot model and we can pass the name of the collection or the table and call it food data this is how i'm going to call it and we can come here and just pass the schema so food schema and now that we have this we can simply just module dot exports equal to food but whenever we want to access our food object which is basically how we're going to make all of our crud um statements how we're going to insert data into the database or how we're going to retrieve it then we just we can just access this file and send this variable through the module.exports so now that we have this we can just come here to our front end and for example i'm going to come here and create a route called app.get and in this this is going to be the simples slash route and inside of here i can just pass a require and a response and this basically means that inside of here i'm just going to whenever someone reaches this route i simply just want to insert something into the database and in order to reach this i can just come here and import the file so const food let me call it food model equals to require and i'm going to reach for the models and the food file so this is representing this so basically i also need to make this an a a synchronous function so because we're going to be making each step individually so in order to create an element into the database i can just come here and write const food equals to new um equals to new food model dot not dot actually let me just pass the value so i'm just gonna create a new food model and the data i'm gonna be passing here is an object and in this object i gotta represent both of these values so i gotta pass a food name and a day since i ate so let me come here and write food name and for now i just want to insert a food which has the name of apple and the amount of days since i ate this let me pass three so i'm inserting this data into the database this is what i basically am saying so in the bottom here i can try and catch so you should try and catch this is basically a statement where we try to do something if it doesn't work we catch whatever error there is so let's pass it like this and if there's an error i just want to console.log the error if there isn't any error i just want to await food.save and food.save is exactly where we do this because here we're just creating a variable called food which basically represents an instance of creating a verb an element in the database and when we pass food.save we're just saying the database to save this information into their collection so if we save this let me see if this works because i haven't actually tested this so let's come here to our server and write nodeindex.js this is how we run our server you can see that it says that it's running on port 3001 and then it says a bunch of stuff that basically represents all of the information from our mongodb server so if we come here to localhost 3001 and it's on the app.get let's see what happens right so it's trying to run it if there's an error we should see a console log but it's waiting for the localhost to run let's go to our compass and let's refresh this to see if anything was created so nothing was created here sorry i just realized that my video got cut basically what happened is my data wasn't appearing in the mongodb compass database so what i did is i just went to the food.js file and i'll show you guys how how to fix the error so basically if you come here to mongooston model and you just let it be food you can just i made some changes because there was some error occurring i can just stop this run this again now it created everything and if we refresh our page right here you can see it says inserted data and i can come here and i click on this button to refresh and you can see that now there was something that appeared in our database this is our collection that we just created and you can see that there's already an object inside of it this is basically what we just inserted here so whenever i refresh this it will insert another element so refresh you can see there is going to be another element this is an apple with dates inside 8 equal to 3 so that means that our database is working and this is the simple model of how you do this i i'm thinking about leaving the code in the description so you guys can literally see everything and i hope that this wasn't as confusing i'm going to on the next video i'm going to be working on the react part of stuff i'm going to create the simple ui where you're going to be using inputs and you're going to be clicking on buttons so that if you want to insert into something into the into your database you're going to click the button to insert any input stuff from the front end to the back end so keep around to see that i hope you guys enjoyed this video i like i hope you guys like this series and if you like the series please leave a comment down below like this video subscribe if you want to see more of the channel and see you guys next time

Channel: PedroTech

Views: 29,124

Rating: 4.8754578 out of 5

Keywords: computer science, crud, css, databases, express, html, javascript, learn reactjs, mongodb, mysql, nodejs, react, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, CRUD, create read update delete, MERN, MongoDB, Mongoose, how to use mongodb, how to install mongodb, how to setup mongoose, mongoose tutorial, mongodb tutorial, mongodb tutorial for beginners, mern stack tutorial, mern stack, express js tutorial, mern stack tutorial 2020, mern stack tutorial for beginners

Id: wgGkF4k9c7A

Length: 20min 17sec (1217 seconds)

Published: Sat Sep 19 2020