Create Your First MERN (MongoDB, Express JS, React JS and Node JS) Stack- MERN Tutorial for Beginner

hello everyone this video is about so create our first maroon app okay mongodb Express react in node.js okay to create the first path so first of all we will configure a mongodb database okay after configuring that we will write the code for our server side and after that we will create the front end for that okay so then we will create a fetch the data we will use a git API and also the post API okay so insert a record to the database and also to get the records from the database we will do these tasks in this video so before starting please subscribe to our YouTube channel so let's get started so for this project we are using mongodb so let's first of all configure our mongodb database so let's come to the Chrome to the browser and after that we will just open this mongodb website and after that we will create an account okay first of all we should create an account after creating account this dashboard will be open for you so here we will come on the left side we will come to the database okay in the database section we will create a database Okay click this button build a database [Music] after clicking that button so this will be open for you okay so now here these are fade so we would like to create a free one okay let's click this is the shared one so we will click on this one okay then come here which provider you would like to use Azure Google cloud or AWS Amazon I would like to select this one and here the region just select that one I will select Mumbai okay let's come here to the Mumbai okay after that assign a name to your on this cluster okay I will assign cluster zero okay so let's face this create button so it will create this cluster for us oh I will just yeah after clicking that button so this area will be open for you so here we will down we will come here to the username we will assign a username I already have in a user a user so I will delete that remove that and I will create a new one so let's assign a name for that for example cwy code video sub and let's assign a password for that test one two three okay just I will delete it after this video okay just for the first to show you so let's create this user press this button the user has created and after that just come here down and here we will like to just assign our IP so I will just click add my current IP address um the IP address is already um been added so I have already added the IP address okay these are the IP addresses which I have added so I will remove all these and also this one and this one yeah this IP address I assigned this one this means that everyone can access it okay if you would like to access just by your own self so just access just click this one add my current IP address but I would um assign this IP address okay we can access that without any error so after that so I have already I have the IP address just press this button finish end close yeah go to the database [Music] yeah we will come to this area after coming to this area so our cluster has created so now we how we would like to connect with this cluster with this database okay how to connect with that so for that let's press this connect button after pressing the connect button so this area will be open for us so here how you would like to connect with this okay access your data through tools to access our data which we are storing in our database so these are the methods that we would like to use okay but I am using the compass okay so let's face the compass if you if you don't have the compass so just download it if you have the already take a capacity so just come here okay this is the I have mongodb campus installed I hope that let's open that this is the mongodb compile let's close it and open it just come here open it mongodb compass [Music] yeah here we will just assign the link okay let's copy that link just come here and copy this link okay copy the link after copying the link come to the mongodb compass and paste it here after pasting just change this password to the password that you have assigned to the user test one two three after assigning this so just press the connect button yeah let's see what happened see we have connected with that cluster okay yeah that has opened for us so now we will create a database later so just come here to the database section and here we will create our editabase okay let's press this one create database after that let's assign a name for example more and let's sign a collection name collection name would be users table okay users let's press this button create database yeah that has created for us okay this is the database which we have created right now okay so now how to connect with this and how to access it from our code so this was the database which we have created okay we did everything here and then we connect through mongodb Compass here we can manage our data okay our database and collections okay this is for that purpose so now let's come to the Visa study code in the visual studio code first I will create a folder here in this folder I will create a new folder by the name of server this folder is just for the server side code okay node.js so here inside this I will just open command line after opening the command line let's move to the series server folder and after that let's press npm init hyphen y it means it initialize our server side and it will create a package.json file see this file has created here so now we will just install a few dependencies in libraries so let's write npm install install Express X3 switches the framework of node.js we would like to write our apis through Express mongos mongos we would like to use for the database and cores the cards are used to access our backend site in our front-end react these cards are used for that and also not one not one is used to refresh our server site automatically okay we will see it later so let's press enter and install these packages the packages has installed okay so just let's come here and we will create a new file here index.js we will write our express code in this file okay so now let's write the basic code of our backend side okay our Express let's first of all import const Express import our Express is equal to express which is the framework of node.js um Express is equal to require and here we will use Express and after that const mongos is equal to require mongoose and after that const cars is equal to require cars and let's use create an app of is equal to express and after that let's use Mongoose and a course use cars and also one thing else up dot use a express.json this is used for whenever we pass data from our front end to the back end so it will um convert that first that to the Json format if you don't try this so it will give us an error to us and let's run our server so to run that let's write update listen and here we will assign a port number three zero one for example and hit callback function console DOT log server is running so let's save it and let's run our server so not one we have installed not one package earlier so let's come to the package.json to use node one we will come here to the scripts area and let's make it a little bit bigger okay close this and here we will light start um not mine yeah it means that we can we never we will just try it here to run our server npm start so whenever we make change in our server side so it will automatically refresh the file let's close this one and yes server is running perfectly so now we will connect our backend this our node.js or Express with the mongodb okay to connect it with that so we will write just mongos.connect and here we will just assign the connection string where we can find the connection stream just come here and to the Chrome browser and help with the connect and come with this driver and just copy this URL okay copy this one after copying close this and come here to the visual studio code and paste that here paste that here okay after pasting and here just change it to the password test one two three and after that just come here just we will like to write our database name here okay in this area we will write our database name the database was mirror okay this was the name of the database and leave it everything okay so it will connect with the mongodatabase so after that let's write an API to access the users from our database okay let's come here to the mongodb compass here for example let's add a user to this table and to access that let's come here and insert document and here we would like to write just to another Fields this is Json file a name name for example Yusuf and also the age for example 23 and let's insert it see the regards as inserted so now let's read this record okay to read this record let's come here to the visual studio code and here we would like to write an API dot kit users create a in a callback function request and response this request is the data that we are passing from our front end and this is the response we are which we are passing from our backend side to the printing and just come here now so before accessing this user so we will create a model for this collection okay in mongodatabase we should create models for every collection okay for this user we will create a model in our server side so let's come here to the code section and here we will create a new folder by the name of models and inside that we will create a file by the name of users.js and in that we will like to write the fields for that collection okay the field that we have in that collection that we would like to write in that collection so let's first of all import the mongos a const on goes is equal to require mongoose and after that let's create the schema for that const user schema is equal to Nu Mongols dot schema and inside that we would like to write the fields that we want okay so the first field would be name for example and for that let's specify the type the type would be string and required required true and after that let's specify another one that is age and for the age the type is the number the required true yeah these two fields we will specify for this and after that let's create the model from this so to create the model let's write const user model is equal to I just tried the use Mongoose dot model and this has two parameters the first one is the collection that we would like to pass to that okay this is the collection the users okay and let's pause that users and the second one is this schema that we have created user schema oh sorry user schema and after that let's export it module dot exports is equal to user model so now let's import this user model in this index file so to import that let's write const user model is equal to require model slash users okay after importing this let's use it so to use it we will write user model to get all the objects from that model OKAY from that table DOT fine we will use a fine method we have another meters okay these are all methods that we can use but I will use the find one to get all the objects and here I will pass just empty object okay this is for the error and here I will I will write and after that um whenever it get all the objects I will get a function and we will get the result here and those will be the users and here I will just display them okay to display them I will use this response to send them to the front end response Dot Json I will use as Json these users okay have you seen the users to the front end and after if there was no memory card so if there was an error so we will catch that error result dot Json error so now let's test it okay so how to test it into today's State we will use another um this extension this is 3D extension by the name of Thunderbird Thunder or client okay you can just find it here so I have already installed it thunder Clint okay so let's create a new request here increase this new request and after that we will use git method because this is a git method that we will use and after that let's write here http http localhost and after that our port number is 3001 and after that our method okay the route that we would like to is okay git users this one [Music] okay okay the request is git and after that we will just press the send button internal server here let's check where is the error let's save this first of all okay users before that was not received okay this file was unshipped so now we never replaced this through this URL we can access the data okay name use of an 823 status is 200 okay okay the status was okay that means that we got our record um successfully there was no error in getting the access from the this database mongodb okay we got our data from this database so now let's create another API this was git API okay this was the git API so how to insert data to the database okay to insert data let's close this one first okay to insert data we will use a post method for that okay this was git method so we will use post method for that don't worry for the front end I will write the front end code later I will just test okay test it okay okay let's start after post uh create user the route would be create user and let's get a request and response and inside that we will write our code to insert a record so to insert the record so first of all we will get the data from this request okay this request has the data that we are passing from our front end so let's write const user is equal to request third body okay the data will be attached with the body after I'm getting the data so let's create a new user const new user is equal to new user model that we has created earlier okay user model and we will pass the user that we have okay to this user model we create in a new object of this and we pass this data this user to that after fasting this so let's save it okay so to save it let's write a new user dot save we will call this save method and so it will save the record so let's make it a second a bit because this is very important to make all the functional uh the functions the functionalities as thinking of it I think and let's make it a bit do not wait okay and now we will get after um creating a record inserting a record we will access back that record okay so access that we would like to write result.json the user that we have okay we like you will return that required back to the front end so now let's stick it okay so to check it back we will come to the sender client and here we will create um let's come here we have already opened that and here now instead of git we will use post method and here we will use a create users the route is create user check it how yeah create user create user and now we will pass the data okay how to pass the data we will come to the body and we will pass the Json data into the first edition we would like this and then the name the name would be quarter for example and the age which would be for example 30. okay so now let's press the scene button okay to send the data see we got back that data coder entity let's check the data we have the in this Compass are not mongodb Compass let's refresh it after refreshing we will get the data C we got the new records coder and 30. so it was to create to insert the data to the database so now let's come to the front end how to display the data on the front end and the rack using react.js and also create a new memory card from that from the react.js okay so let's come here here we will create the react app okay to create the react up we will just come here to the command line and we will take a new command and here just I will write npm PM init hyphen y sorry npm init right okay wait so it is used to create a react app just press enter yeah the project name for example client please which one you would like to use the framework and we will use react and the select a variant type three typescript is is WC we will use JavaScript okay freeze the JavaScript and after that just move to the client CD client and just write npm install it will install the npm a few packages after installing them [Music] [Music] yeah that has installed successfully so now let's write npm run due to run the server the client side or the front-end server after running this let's move to this one to this URL let's press this after facing let's come to the Chrome C our reactive has created with first react okay this is now I will remove all these things let's move to the back to our code and close this one and come here to the client side in here to the SRC I will delete all these things index.css I will delete this one Main and also I will remove it from this area save it and delete some object is I will remove all this code okay leave hit empty and just remove it also all these and after that just come here and remove all this thing from this easy space let's come to the upload G6 I will create a new deal element this one so let's first of all we will pitch the data from our backend from server side then we will display that here in this code okay so let's first of all we will like the code to fetch the records so to pitch the records first we should install the access library to fit the records for that let's come to the command line and here we will just take a new one and let's move to the CD client and after that write in game install access okay it is used for request and response okay to get the data install axis HTTP request and response Library it is okay okay after installing this so let's come here now we will use it so let's use use effect it is a hook okay which will run at the first at the start and let's create callback function inside this let's write array dependency and here we will use axis so let's first import the axis axis sorry import is from axis let's use it now axis dot git first we will give the regards so let's come here to the Thunder client and this is the URL that we will use for getting we will just write git users so it will get all the users so that the we will get the results here users and here I will just create a new variable to store the users there okay const users sit users is equal to use statework we will use use State okay it is in Array type with us so here I will store these users in that one okay so this let's call this method sheet users City users and we will pass these users to that it's user to that okay after that if there was any error cage so console.log here it is okay okay we fix the record and we store them in this users so we should write this one also users the data okay it will store the data in this users so to check this one how we access this one so you can just write here console.log users so first it will show you the records in the console then write it how you can write them to store them in these users so now let's display them okay to display them just come here and we will write the code the users variable.mark function and we will get a single user here a row function and close it and here we will display the users to display the user lists first of all return a new new record and inside this let's write H3 element inside that we will use user Dot name and also user.h okay so we I hope yeah it will work okay so let's run see our up how it looks like see we got the result okay these are the results that we got so before that I will write something else H2 first burn Express react node app okay and also I will assign a class name here last name Center and let's use it in this after CSS Dot Center text align Center so it is it will align the text in the center see we have these three cards these two requires so now let's create a new user who we will create two Fields here for the name and the edge then we will insert the record to the a database so let's come here to the app.j6 and down from this here break and here I will create to input field one for the name and then the second one for the h and also let's create a button create user okay and after that let's whenever we are writing something in this input field so we should store them somewhere okay so let's create two new variable const name and set name is equal to use state let's copy this one and change this to the edge H okay and this one is the edge and let's come here we will like to write unchange event call this one change Arrow create in a row function [Music] and just calls it name first of all set name method and right here e dot Target dot value it will store the value that we are writing in this input field in this variable okay in this name and also let's copy this one paste it here here we will just change this to the sheet age okay to install the video in each variable so now whenever we fix this button so what we will do we will call a new function on click just call submit function okay let's create the submit function so just come here const submit is equal to it is an arrow function inside this we will use access.post method okay now so let's simply copy this one this code Ctrl C copy and paste it here and after that I will change this to the Post and just change it to the create user and yeah everything is okay set users just remove it and just cancel it also like users it will return the store display the result in console okay yeah I hope it will work and we will create a new record so let's check it let's come here see and let's enter a new record Khalil for example ages for example um just sex here okay press this button create user so let's check our mongodb let's compose let's refresh it uh let's replace this one so we the record has not created just come here let's wait for that it will fix the records [Music] yes so let's check our code where is the error here UC pickaxe start git okay get user get users okay create user is the API okay create user and the meter disposed here we have access that post method okay yeah type text Sid name cth their model yeah everything is okay yeah I think we didn't pass the data so let's just come here to the object G6 and here to the post method we should pause our data so let's come here we will for CE control set [Music] yeah just come here and write fast the object the object would be the name that we will pass and the edge we will pause these two fields to that save the record and let's go back depreciate [Music] yeah why we can't get the records move to the interior to the console axis zero [Music] yeah the error was here in the server side good okay here was the error that that was crashed so I restart the server side okay I restarted that so now let's check it again it's uncomment this code I just commented the it before it's also on coming this code and save it and let's come back here see we got the records okay and let's see what you a new record now create a new record hello okay and let's press for example it is Edge create the record so let's come here to the compass and let's appreciate see the new record has added okay Holly and H is it and also let's appreciate see then every card has added so it was all about the basic and the first half for the modern stack okay mongodb Express react and node.js okay we just get the the data from backend and display using react.js and also we treated a new user and inserted the data to the database so I hope this video was very helpful for you if you like this video don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 15,561

Keywords: mern stack tutorial, mern stack tutorial for beginners, react tutorial, react full stack, mern tutorial, mern stack, mongodb tutorial, react, express tutorial, express, mern stack tutorial 2020, react node express mongodb, mongodb tutorial for beginners, node and react, express js tutorial, full stack tutorial, express js tutorial for beginners, react crud tutorial with mongodb and express, mern stack crash course, react and node

Id: rah1eSed3Nc

Length: 33min 22sec (2002 seconds)

Published: Wed May 31 2023