Full Stack React, Node & MongoDB - Build A Sign Up Application (React, Node.js, Express and MongoDB)

hey guys in this video we shall build a sign up application using react js for the front end nodejs and express js for the back end and mongodb for the database so without talking much let's go straight to business so i have my vs code opened already if you don't have one go to code.visualstudio.com to get one for free so let's go back to our vs code i'll pull up my terminal out cd to my desktop where i'm going to create the folder i would use for this project and in my desktop i would create a folder by saying mkdir with the name of the folder so the name of a folder will be called send so when i hit enter the folder has been created come here in vs code click file select open folder scroll down until you find send then select folder to open the folder in your vs code so i have the folder opened in vs code so the first thing we are going to do is to create react app like i said earlier we are going to use react js for the front end so i'll close that i would pull up my terminal in the send directory as you can see right here i am in the send directory so i would say npx creates react app then the name of the app so i'll call this sign up front the front end for a sign up application you can call it whatever you want to call it then i would hit enter for my react app to be created okay so i have my react app created for me and i have the folder here sign up front here is all the react files here so out cd into sign up front i would say cd sign up front and inside the sign up front folder which is my react folder i'm going to create a folder that all my backend files are going to stay in so i would create a folder inside the sign up front folder take note i'm going to say mkdir sign up back end and i'm going to cd into that folder the sign of back end i want to create the back end of this application first before i build the front end of the application so that's why i had to cd into the signup backend folder now let's open this up so while we are inside sign up back-end folder the first thing i'm going to do is to create a package.json file so i'll say npm init and when i hit enter it's going to ask me if i want to keep the name as sign of backend i'd say yes i'll hit enter hit enter description i'll say sign up application you can keep that empty if you want and i'll hit enter my entry point i'll change these to server.js you can keep yours as index.js and hit enter test command hit enter the author i'll say joseph brendan i'll hit enter and that's all our package.json file has been created so if i click on the package.json file you see we have all the details that we entered sign up back and sign up application as our description the main file now is server.js and our author is joseph brendan so the next thing i'm going to do is to install the packages we are going to need to build a back end so the first package that we shall be needing is express so i would say npm install express another package will be nodemon so i'll add that to the list i would say nodemon just give a space after express you can add another package so i would also need mongoose and i'd need dots env i'd also need cause so let's install one two three four five let's install these five packages for now so let's hit enter to install these five packages so while the package is installing let's create our main file server.js make sure it is created inside the sign up backend folder now in our server.js file we are going to import express while it's installing we are going to say cons express equals require express and we are going to initialize express in the app variable by saying const app express and with the brackets in front of it so let's come down here and let's say app.listen and let's listen on port 4000 because our react app is going to run on pot 3000 by default so let's create a callback function here that's going to console.log server is up and running let's save that so let's go to our package.json file and let's use nodemon here let's change test to start and let's get rid of everything here and let's say nodemon server.js this means nodemon will always run the server.js file let's save the changes in the package.json file let's close that so let's run our server using node mode i would say npm run start and as you can see nodemon is active so the next thing we are going to do here is we are going to create a folder called route in this folder we are going to have a file called route.js this file will be responsible for routing the request that comes to our servers so in this file we are going to import express and we are going to have a router out of express i'm going to say express dot router and we are going to say router.post because this is a signup application so all we are expecting is a post request because a sign up application will only have a sign up form and when users feel a signup form and click on sign up or submit it means the users have sent a post request so we are going to handle that post request using this route that we are about to create in route.js so router.post will have a bracket in front of post the first argument will be the path where the users will make the request on so the next argument will be a callback function that's going to take two arguments request and response and for now let's just send something basic so let's say response that send and let's just say send after that we have to export router and let's say module.exports is equal to router so that's that for now so the next thing we are going to do is we are going to create a schema and creating a schema is easy because we are going to use a mongodb library called mongoose to do that so mongoose is a mongodb library that makes working with mongodb very easy so i would create a folder inside the sign up backend folder always make sure you are inside the sign up back-end folder so i'll create a folder i'll call that models now inside the models folder i'm going to create a file where i would have my schema i would call this sign up models dot js so right inside this file out import mongoose and i would use mongoose to create the schema so i would say const sign up template it's equal to new mongoose.schema and i'll pass in curly brackets inside the brackets there so since i am trying to create a schema for the application at this point you'd ask yourself what are the details you want to collect from the users when they want to sign up to your application so in this case i would ask them to enter their full name and the full name is going to be a data type of string and i'd make that required also i'll set required to true and i also want them to create a username and i would make the data type to be a string data type and i'll make that field required i'll set that to true and also i would want them to enter their emails so we can do some verification if we want to or send them newsletters if we want to so i would set the data type to strings also and i'll set the required field to true and i would ask them to enter a password and this is also going to have a data type of string and set required to true so there is one more field i would like you to always pass in and that's the date field of course this is not going to be displayed on the front end this will be accessible only at the back end so you want a date record for every time a user is signed up to your application so in the dates field here we are going to pass in a function and this function will be triggered anytime a new user signs up to your application so we are going to set the type here to date and that's a function and we are going to say default date dot now now let's save that so let's export the schema that we have created because that's all for creating a schema so let's say module.exports mongoose.model the model function which is in the mongoose library is going to take two arguments and the first argument will be the name of our table we are going to see how this works later on so let's call this my table and the second argument will be the name of the schema that we have created in this case it's signup templates so we are going to say sign up templates now let's save that now let's go to our route.js file and let's import this schema that we have created so here in route.js i'm going to say const signup template copy that's pretty long it's equal to require okay i'll need double dots there and models sign up models now in our post function here let's get rid of this response dot send let's create a variable called signed up user that's a signed up user and let's set that to an instance of the sign of template copy which is now our schema so let's say new sign up template copy now let me explain what we have here when a user is on forward slash signup path which means when a user is on the signup page and the user enters every data they need to enter in the sign up form when they click send or sign up a post request has been made now the post request is going to come to this server and router.post will handle it now when router.post handles it it means this post function here will run now when the post function runs everything inside the post function will also run now const signed up user is inside the post function so this is also going to run now when this runs it's going to create a new instance of a sign up template copy which is a schema so this means it's going to create a new schema so we are going to fill up the value space in the schema with whatever username or whatever full name or whatever email the user enters on the sign up form and that's easy so we are going to say full name set that to request dot buddy dot full name and what this actually means is this when a new schema has been created now let's look at our schema what do we have in our schema we have full name username email and password when a new schema is created you would have something like this you have something like this full name with nothing in front of it password with nothing in front of it so now when a new schema is created in our route.js file here in this block of code we are going to say for the full name field grab the full name that the user has entered from the body of the request which simply means grab the full name that that user entered on the form and place it here in front of full name now full name has a value now we are going to do the same thing for username we are going to say for the username field grab the username that the user enters in the body of the request now which request are we talking about we are talking about the request that the user made which is a post request so grab the username that is in the body of that post request and like i said earlier a post request is made when the user clicks on sign up so we are going to do the same for email we are going to say request dot body dot email and we are going to do the same for password we are going to say requests. we are not going to pass in the dates field because like i said earlier on the date field is a function it's going to be triggered when a user is created so we don't need to pass that in because there is no signup form in the world where a user has to enter the date and time they are signing up to an application so after collecting all this data from the user we need to save it so we are going to say signed up user not signup template copy signed up user dot save and why i am saying signed up user is because this variable signed up user now stores everything that's here so we are going to use dot den here to say dot then data everything successful send a response.json with data and if there is an arrow catch the error and and send it as a json file also so send error if there's an error now let's save that so for now we are done with our routes.js file and also we are done with our sign up models.js file so let's go back to our server dot js file now in our server.js file we are going to connect our application to a mongodb database and that's pretty easy so what we are going to do is this we are going to go over to mongodb so if you don't have an account with mongodb you can create one this is absolutely free so you can create one when you sign up then you log in i'll be logging in with my own details so when you sign up and you log in you'll be brought to this page here or you may be taken to a page that will ask you to create a new cluster go ahead create a new project or a new cluster when you are done you would find yourself here so let's click on all clusters here now when we click on all clusters you'd have your clusters come up i have a forward slash project 0 which you may likely have and i have a project called forward slash customer which i created myself now i would click on cluster 0 here you may go ahead to click on cluster 0 in your forward slash project zero but i'll be clicking on cluster zero here when you click on cluster zero it's going to bring you here now the first item i'll talk about is the network access click on network access when you click on network access make sure your ip address is 0.0.0.0 forward slash 0. if it's not like that click on add ip address when you click on add ip address you will see an option that says allow connection from any ip address or allow connection from anywhere click on that option and you would have 0.0.0.0 forward slash zero now when you do that you wait for two minutes for your changes to be deployed to your cluster and after that we are done with network access now let's move over to database access now when you click on database access most likely you would have only one admin user right here now i would advise you to go ahead create a new database user click on add new database user right here when you click on that option let's pass in one here let's say nigerian as the username nigerian as the password click on show to make sure what you have in mind is what you entered now click on hide to hide that again now click on add user to add this user to your database now when you do that you would wait for two to three minutes depending on the strength of your internet connection for the changes to be deployed to your cluster now after that click on clusters here when you click on clusters you will notice this moving line around the cluster you would wait for that line to stop moving when it stops moving it means your changes have been deployed successfully to your cluster okay so after your changes have been deployed successfully to your cluster come here click on connect when you click on connect click on connect your application when you click on connect your application just click on copy to copy this link that we have here so when you click on copy let's go back to our vs code in our server.js to connect our application to mongodb we are going to use mongoose so first things first let's import mongoose here in our server.js let's say mongoose now we are going to use the connect function in the mongoose library to do the connection so we are going to say mongoose.connect and connect being a function will have the bracket in front of it so at this stage we are to pass in the line of code that we copied from mongodb but that will not be the good thing to do because it means we are going to type in our username and our password here in server.js so there is a better way to do that and we are going to use a package called dot env to do this in a safe way so let's import dot env and if you have not installed the dot env package go ahead to do that we did that initially when we started just say npm install dot env so let's say dot env is equal to require dot env so let's activate the dot env package by saying dot env.config and that's that so the connect function here will take our credentials but the credentials will not be typed in here as plain text so come over here in your sign up backend folder create a new file called dot env now in the dot env file let's create a variable and let's call that database underscore access you can call it whatever you want to call it actually now let's pass in what we copied from mongodb now we are going to do some changes here what we have here as username will be taken off we are going to type in nigerian or whatever you entered and the password we are going to type in nigerian also now we have one more change to make here that says db name now db name will be the name of our table that we created in our schema which is which in this case is my table so i'll copy that go to the dot env file and i'll take that out and i'll paste my table take note when editing this file do not keep the greater than or the less than sign so let's save that now let's go to our server.js file let's use the dot env package to access this database access that has our credentials so we are going to say process dot env dot database underscore access and the second argument here will be a callback function that's going to console.log database connected just to let us know that hey our database has been connected successfully so let's run that now let's see what's is being said in our terminal so in our terminal here we have this database connected this means our database has been successfully connected to our application so that's very nice currently our route.js file is in no way connected to our server.js file so our server.js file is not aware that our route.js file exists and the reason why our server.js file needs to be aware that the route.js file exists because our server.js file is where the listening happens this is literally our server so when a user sends a request to our application it gets to this file first then the server.js sends that request to our route.js file that has the router.post route which processes that post request and sends back a response so if you come here in the route.js file you'll notice that we have a request argument and a response argument so this route will receive a post request and send a response but this will not be possible except it is connected to a server.js file which listens for any request that comes to our application so when it listens for a request and it sees a request it's going to send that request to route the gs now we are only hoping to get a post request because this is a sign up application so when that post request is sent by the user it gets to server.js first server.js then sends it to route.js and in our route.js we have a post route that will handle the post request as simple as that so that's why there is need for our server.js to be aware that there is a file called routes.js now route.js which will create the user needs to be aware of a schema so that's why we had to create and import a schema for our route.js to use it in the post route so if you can notice the connection you would see that every file is connected to every file to make sense so we are going to import our route.js file by saying const route urls and we are going to set that to require we are going to say routes forward slash routes now in our server.js file we are going to initialize our routes as a middleware and we are going to say app.use and the first argument will be our base path so that will be the first argument you can call these whatever you want to call it some people call this forward slash api forward slash anything but in this video i'm just sticking to forward slash app now the second argument will be the route urls that we have imported so we are going to say routes urls and we are going to save that so what this means is this routes urls which is our route.js files will be appended to this base path so if we have another route here in our route.js file that says router dot gets for example that says router dot get and we pass in another path that says forward slash sign in for example it's this forward slash signing will always be appended to forward slash app so for a user to get to forward slash signing the url is going to look like www.mywebsite.com forward slash app forward slash signing if the user is on the sign up page it's going to be forward slash app forward slash sign up so whatever is in routes urls will be appended to this base path which is forward slash app so let's get rid of this line of code there let's save that now let's go back to asava.js in our server.js file here we still need to pass in a body passer to help pass our incoming and outgoing requests so to do that is very easy we are going to initialize that as a middleware also we are going to say app.use we are going to say app.use express dot json dot exports express dot json and we are going to invoke json like so with brackets in front of it so with this line of code we have activated body parser in our application so one last package we are going to initialize as a middleware in an application will because and i'm going to say const course i had already installed calls as a package if you have not installed cores just say npm install calls and it's going to be installed now i would import calls like so cause and all i'm going to do is initialize calls and to do that i'll do that on that express.json so i would say app.use and i'll pass in course just like that and that's all so one thing i want to point out so that you don't encounter an error is this make sure every line of code is arranged like this make sure your body passer is on top calls and your urls so for now this is all we have for the back end of our application we are done with our server.js file we are done with our route.js file and we are done with our schema let's test our back end and to test our back end we are going to use rest clients you can use postman postman is a famous application for this postman is spelt like this postman or you can also use post woman there is post woman and there is postman any one of it is very effective so in this case we are going to use rest client because it's gender neutral so rest clients can be installed in your vs code as an extension so if you don't have rest clients come over here to view click on extensions if you click on extensions in the search bar there search for rest clients now click on rest clients there and click on install and in some minutes you'd have rest client installed in your vs code as an extension so to work with rest clients we are going to create a file in the sign up backend folder and let's call that test.http in the test.http file we are going to make the front end of the application for now this is before we create the front end so let's mimic the front end of the application and what does the front end of the application do the front end of the application collects data and sends a post request to the server with the data that is being collected so we are going to say post which means this will be a post request and we are going to set the end point that the post request will be sent to so in this case we are going to say http localhost we are trying to send this post request to localhost port 4000 forward slash app and forward slash sign up which is in our routes routes.js file so we are going to come here and let's edit this to forward slash app forward slash sign up now let's change the port here to port 4000 now let's save that right under this make sure you don't give a space like this right under this line say content type and set that to application forward slash now you can give a space now we are going to mimic the form now what are the fields in the form we have full name okay this is a json file make sure the keys are wrapped in quotes now let's say full name let's set our full name to joseph now let's say username let's set this to joey let's say email let's set this to joe at mail.com and our password will be set to josie josie now let's save that now let's send this to this endpoint which is our server and let's see if our server will send this to mongodb which is our database so to do that click on send request right there as you can see this has been sent to mongodb this has been created we have a http response of 200 which means this request is okay so before we go to a bongo db i want to mention that when you type in full name here let it be the exact spelling of how full name is being spelt here same for username email and password and let's dispel in here be what you have here also let these spellings be exact so let's go to our mongodb to see what we have so here in our mongodb click on collections when you click on collections you wait for it to refresh so as you can see i have this that says my table i have the table here created in mongodb my table now when i click on my table you see i have my data right here being sent to mongodb it says full name joseph username joey email joey mail.com and my password josie josie as you can see an id is generated automatically for this object and the date also is generated automatically so that's that now we have successfully created our back end and our back end is working very well so let's go over to create a front end with react let's close all of this now let's collapse the sign up back end folder so that we can have good space there now in our sign up front folder we have an src folder that has all our react stuff in it so in our src folder we are going to delete app dot css literally everything apart from index.js so let's delete that let's go to the public folder in the index.html file let's change the title of our application to sign up application now in our src folder where we have the index.js file we have all of this i'm going to clean everything in the file so we start on a clean slate for everybody to follow properly so in our index.js file in the src folder that's in the sign up front folder which is our react app we are going to import react and we are going to import react dom now we are going to say react dom dot render and right here we are going to pass in a component called app and we are going to say document dot get element by id so we are going to grab the element that has the id of roots so here we are grabbing the element that has the id of roots and that element is in the public folder in the index.html file this is the div right here that has the id of roots and if you notice this div is right here in the body tag so let's import our app components before creating it let's say import app from app now let's create an app component in the src folder take note in the src folder let's say app.jsx now in our app component let's import react and component because we are trying to create a class-based component so let's call this app now let's take out states there and let's bring up another terminal for our front end application click on plus there cd to sign up front now sign up front is where we have our react application so right here in our return statement let's pass in a div right there and in this div we are going to build our signup form so we are going to use bootstrap in building a signup form that means there is need for us to install bootstrap i would say npm install bootstrap hit enter while bootstrap is installing let's create states so let's say constructor let's pass in a super function there let's say this dot state now state will hold all the fields that we need on our signup form you can add additional fields maybe to check for errors or something but here we are going to pass in all the fields that we need on our signup form and all the fields we need on our signup form was actually created in our schema we designed that with a schema so the first is full name make sure they are spelled the same way you've been spelling them full name and for now full name will be set to nothing username also set to nothing because it's an empty form so email set to nothing and password set to nothing and that's that so in our div tag here we are going to create our form so since our bootstrap has been installed let's import bootstrap here let's say import bootstrap forward slash dist forward slash css forward slash bootstrap dots mean dot css now let's save that now let's go to our jsx which is the return statement here now let's create a container div let's say div class name now everything class in bootstrap will be replaced with class then because this is not html this is jsx so class name is equal to container in the container d we are going to create another div and let's give this a custom class name of form div let's say form div now let's close that now here we are going to create a form proper with the form tag and in our form tag we are going to have our first input field now the type of this input will be set to text we are going to have a placeholder full name after that we are going to have an unchanged event listener that we listen for changes and we are going to set these to a method that we are going to create let's call this method these dots change full name let's call that this the change full name and after that we are going to have the value attributes which will actually attach this input field to a value here in state now the value field will be this dot states dot full name and finally i'm going to pass in some bootstrap class like two bootstrap classes to handle this input field so it's going to be class name set to form control and form group i think from group works okay now that's that's we are done with this input field so we are done with the input field for full name now let's move over let's bring this down let's create an input field for username so let's say input and let's set the type to text and let's set the placeholder to username let's say username let's set the unchanged event listener to a method that we are going to call this.change username and let's set the value of this field so let's say value set to these dot states dot username and let's set some bootstrap class let's just copy this because it's still going to be the same class so let's paste that now let's close that and that's that's for the username field now let's create another input field i think we can copy and paste this let's fix this so the next field will be our email field now let's set the placeholder to email and let's set our unchange event listener to a method exchange email actually the name of these methods are not fixed you can call them whatever you want to call them now in our value attribute let's set this to this dot state dot email and let's leave the class name as it is now let's fix this after the email field we have the password field now let's set the type here to password and let's change the placeholder to password and the name of our method for the unchanged event listener will be change password now the state property that will be attached to this input field will be this dot state dot password and that's that for our input fields in our form so still in our form let's create a button so let's create a submit button let's say input let's set the type to submit and let's set a class name of btn let's say btn btn danger and let's say btn block let's say btn block i think okay and let's pass in the value now the value will be set to submit and that's that so let's spin up our react server to see what we have but before we do that let's create all these methods that we passed in our unchanged event listener so we are going to do that outside the constructor method and outside the render method so right here we are going to say change full name that will take an event argument and we are going to set state this dot set state so we are going to and full name will be set to event the target dot value and we are going to have the same thing for the rest of the methods so let's copy this and we have change username that will change the value of username that's in states so we are going to come out here and we are going to paste this after username we have change email and that's actually going to set states for the email field and after the email field we have the password field so it's change password and this is going to change the value of the password field so for those of us who are new to this what these methods actually do is this so set state is a react function that actually changes the value of what we have in states so i'm using the set state function to change the value of full name and how is that happening now if somebody goes to the input field for full name and starts typing in their full name the unchanged events listener here which looks out for any change in the field will be triggered now when it is triggered it's going to trigger this method which is change full name so what change full name will do with this what this method will do is this so it's going to take the value of that event that's happening and it's going to save that value to full name and remember that value is grabbed from the event that happened in the full name field and what is the event the event is an unchanged event and what's an unchanged event an unchanged event is simply when the state or when the value of anything changes currently the value of full name and everything in states is empty so when it changes it means someone has typed in let's say b it means this value has changed from nothing to b and this method here will grab whatever value that makes the states to be changed and it's going to store it in front of full name the same thing happens for username email and password so that's that so now that we have this let's run our server let's say npm start and let's see if we have any errors at all so let's go to our browser and let's check localhost spot 3000 let's say localhost.3000 and you see we have this form right here so this is not actually looking good we can create a css file to make this look better but for now let's work on the functionality of the application so now if a user enters the full name let's say john you see we have an error and we have this error because we did not bind this method to our constructor method so all these methods that we created here we have to bind them so to bind is very easy let's say this dot change full name is equal to this dot change full name dot bind and it's going to take this right there so let's duplicate that let's say this dot change email will be set to this dot change email dot bind now let's go for this dot change username set ds.change username dot bind and finally let's say this.change password let's bind this.change password so let's run a server again our server is running let's go back to the browser let's type something let's see if my username is john if my full name is john my username is john3 my email is johnathmail.com and my password is whatever i type in if i click on submit nothing is actually happening so but what we want is this we want details to be submitted to our database in mongodb now we are going to do that only when we connect our front end our back end and we are going to do that with a package known as axias just say npm install axios now while axios is installing let's come to our form here so our form tag let's set an onsubmit event handler to a method called onsubmit you can call this whatever you want to call it actually this method here on submit can be called whatever the most important is this event and last name on submit this is default but this year can be called on collect on anything or just collect or just submit now we are going to create this method outside the render method here we are going to say on submit now this is going to take an argument called event now inside the on submit method we are going to say event dot prevent default so we are going to say event that prevents fault so prevent the faults not prevent prevent the fault events that prevent the fault prevents the form to act in a default way the default way forms act are when you submit a form the whole application or the whole page refreshes but we don't want that for this phone because most times when the application becomes complex when a user signs up on an application the user is redirected to the home page or to their profile page so that's what we want for a standard sign up application we don't want the form to behave the way forms behave by default so that's the use for this we are preventing the default behavior of a form so after that we are going to create a variable and we are going to call this registered and we are going to set it to an object now what properties do we pass in this object we are going to pass full name and we are going to set this to these dots state dot full name and we are going to do that for user name also this dot state dot username and we are going to do that for email which will be dot state dot email and finally for our password which will be these dot states dot password now we are going to save that now i would explain what these actually does but before that let's import our x's because the installation has been completed so we are going to come here and say import axios from exius now let's save that now we are going to go back to the on submit method and i'll explain what we have here when a user meets the sign up form the user will meet the sign up form with empty fields now when the user starts typing their full name and user names in the empty fields the unchanged event will be triggered now when the unchanged event is triggered it's going to trigger these methods the change password change email change username and change full name it's going to trigger those methods now those methods will change the value of full name username email and password in states now while all this is happening the user has not even clicked sign up yet the user is still typing so whatever the user starts typing on the front end will be saved in states so when the user finally clicks submit the on submit event will be triggered this on submit event will go and gather all the values that the user has entered the value of the full name which is of course now stored in full name the value of username which is of course now stored in username because remember the user was typing it in and on change was grabbing whatever the user was typing and saving it in front of full name username email and password so the on submit event will grab all those details and save it in registered so now everything that the user has typed in in the form will be saved and registered when the user clicks on sign up so now that it is saved in register what do we do with it we are going to send registered to the back end because sending register to the back end means sending all the details that the user has typed in on the front end to the back end so how do we do that we do that using axios the package we just installed so we are going to say exius.post now this is a post request remember because we are trying to send to the server exists.post now what's the address of the server currently the address of our server is on localhost so let's go check that let's check our test.http file this is the address of our server that's the endpoint that we are trying to send everything that is stored in register too so we are going to pass it inside the axios.post brackets so we are going to paste that and wrap it in quotes don't forget to wrap it in quotes so we are going to wrap that in code and we are going to pass in comma there and the next argument will be registered so registered stores all of this data so what this line of code means is this post registered which holds all of this data to this endpoint which is our back end so if everything that is stored in registered is sent to this endpoint which is our back end the back end will also now send it to mongodb which is our database as simple as that so after this we are going to say dot then then we will take a function an arrow function called response and we are going to console.log our data response dot data now let's save that now after these has been sent to the back end what do we want to do with the front end let's return our signup form back to the front and because for now that's all we have now if we had a profile page to go to or a home page to go to we are going to say window.location and we are going to set that to maybe forward slash home but in this case we don't have any page so we are going to say this dot set state will pass in full name set to nothing username set to nothing which is how our state was initially email set to nothing and password set to nothing so let's save that so for now we are done with our react front end now we have to test this to see if everything is working very well so let's go to our terminal here run our server let's say npm start now let's see if we are going to have any error our server is running let's refresh this page everything is working fine so let's enter a full name let's set this to newton james let's set the password to james 234 let's set the email to nigeria at nigeria.com now let's set the password to whatever we want to set it to now let's make sure the back end server is running remember i created a new terminal here now i have two terminals in my vs code this is the first one the back end server it is running now this is the second one for our react application which is the front end so the both servers are running now let's click on submit to see if we are going to have these in our mongodb let's say submit we have an error okay it says cannot read property state of undefined okay that's for our own submit event we are supposed to bind these on submit events to our constructor so let's take this there let's say these dot on submits is equal to these dot on submit.bind now let's pass in this there now let's go back to our front end let's set this to edit add them and the username let's say at them four five six the email let's say add them at mail.com and our password whatever we type in now let's click on submit go to mongodb and let's refresh our mongodb and if you scroll down you'll see we have this we have full name edit adam username edm456 email add them at mail.com and our password the gibberish that i entered and our dates initialized for us so we have successfully created a front-end application using react and we have created a back-end using node.js and express and we have successfully connected it and we have passed data from our front end to our back end and to our database using mongodb now before i come to the end of this tutorial i want to point out something our password here it's been sent to the database in plain text and this is not safe these is not how it's supposed to be done our password is confidential so it's supposed to be encrypted in our database so to do that is pretty easy we are going to come to the back end of the application in route.js and let's pull up the terminal for our back end now in our back end we are going to install a package called bcrypt npm install be create now if the package is done installing we are going to import the package here in routes.js because because we are trying to encrypt our password here in route.js so to import that is very easy we are going to say const bcrypt and we are going to say require bcrypt and that's that so before i signed up user variable here we are going to salt the password first we are going to salt when i say sort i mean s-a-l-t we are going to salt the password first so let's create a variable for sorting our password let's call that sort password let's use a sync and a wait so i'm going to pass in a sync here and right here i'm going to sit and wait because this may take some time to be accomplished i would say a weights decrypt dot generate salt gen sold so i'll generate the salt by 10. this is some sort of cryptography stuff so i would say decrypt dot generate salt by 10 then i would come down here i would create another variable i'll call this secure password and i would use a weight again because it's going to take some time i would say bigcrypt.hash now i'm going to hash the password this time this first line here is me generating a salt for the password because i'm going to hash and salt the password to make it more secure so here i'm going to hatch the password i'm going to say bigcrypt.hash now what's the i want to hash i want to hash the password and the password will be gotten from the body of the request that the user sends so i would say request dot body dot password now this means i have hashed the password that the user has sent now after hashing the password i'm going to sort it and sorting the password at this stage is very easy because i have generated a salt already so i'm going to say sort password so this means sort the password that has been hashed so over here in signed up user i'm going to take this out and i'm going to pass in secure password now the secure password is what will be saved and sent to our database so let's pin up our server once more npm run starts let's go back to our front end let's say moses let's say moses 238 or 239 let's say moses at moses at maze.com or let's type in something definite let's say definite as a password now let's click on submit to see what's going to happen this has been sent to the database now let's go to mongodb let's refresh our mongodb to see what we have now as you can see we have this in our mongodb if you take notes this password is in plain text that's the second entry that we made the first password josie josie is in plain text that's the first entry that we made now if you notice this is the most recent entry that we made the full name is moses the username is moses239 and for the password i entered definite as the password but you can see we have gibberish right here so this is the best way to send password to a database so that's that for this tutorial we have been able to get a clear insight on how to connect our nodejs and express server to a react front end and have them pass data to a mongodb database so for now don't forget to like don't forget to subscribe and don't forget to share

Channel: Migrant Solutions

Views: 61,781

Rating: 4.9519649 out of 5

Keywords: mern stack tutorial, full stack tutorial, react and node tutorial, mern stack project, react tutorial, node.js tutorial, mongodb, mongodb tutorial, mern full stack tutorial, mern stack application from scratch, mern, mern stack traversy

Id: SQqSMDIzhaE

Length: 68min 52sec (4132 seconds)

Published: Wed Aug 05 2020