Build app using React JS, Node Express JS and Mongo DB (MERN Stack)

hello everyone in this tutorial we will learn how to build a simple to do application from scratch using react.js as front end node and express.js as backend and mongodb as the database here is a demo of the web application we will first install all the prerequisites then we will create the database and objects required for our app next we will create the backend project using node in Express Js and finally we will start creating the react.js project let's install Visual Studio code I have a Windows 64-bit system so we'll download accordingly let's install it Visual Studio code is now installed successfully let us now install node.js first let us download the installer file let's install let's verify the installation by checking the node and npm version we have successfully installed node.js let us now set up the mongodb cluster required for our app let me log in to the portal first we need to choose the free version for learning purposes I will keep the cluster name as default let me create a user account for this cluster let me now create a database and also a collection for our to-do app let me also add a couple of notes into my collection we can get the connection strings to connect to our back end here we have now set up our mongodb cluster let us now create the express JS backend project open command prompt and type the command npm init hyphen y this will basically create a package.json file which will be needed to add the other required npm packages for our express.js app let us now install Express framework to create our back-end rest apis by default the express app comes with a security to disable requests coming from different domains or ports to override this we need to install another package called course it is not recommended in production please only whitelist your familiar servers to access the backend apis next let us install the mongodb client I had some issue with the latest version so I am using the specific version of 4.1.0 next we need a package called multer to read the request form data now let us open the project with Visual Studio code we can see an entry of all the downloaded npm packages here let me now create a file index.js here we will be adding our API methods let me import all the npm packages which we just downloaded let us create an instance of the express app and make it use the cores module now let us add the connection string of mongodb let us add the database name for making the mongodb connection and also instantiate the mongodb client app.listen will start the express app and will listen to the requests coming from the mentioned port number let us instantiate our mongodb client here using the connection string and the created database name once connection is successful let us display a success message let us check if we are able to make the connection just type nodespace index.js to start the backend server let us now add the API method to get all notes data from mongodb collection let's check if this works we can see that it works and we can see the data from our notes collection let us now add the method to add and delete the notes in our collection we will have a simple logic to Auto calculate the ID field based on the number of documents in the collection once added we shall send a success response let us now add the method to delete the give document from the collection we will be deleting the document based on the ID which we will be sending via the query string once deleted we shall send the success message as response our backend project is now complete let's create the react.js project just open up the command prompt and type the command npx create react app and the name of our project let's open the project in Visual Studio code let's simply run the project and see how it looks we see a default template let's remove all this and put a simple header tag upon saving the page refreshes automatically let us now add the HTML and the methods required for our app we need to make few modifications to the app.js file we need to modify it as a component so that we can add the methods let us now add the Constructor for this class super props will basically help initialize the parent Constructor as well in the state we can include the variables to be accessed in HTML we just need one array variable to display the notes let's create a variable to store the API URL next let us write method to get data from the API into the notes array we will use the fetch method to call the API to get notes data once the response is received we will update the notes array variable by setting the state we have a life cycle method call component did Mount which will execute once page is loaded we will be calling the refresh notes method here let's use the notes variable to display results in HTML we need to First declare the state variables in render method now let's display the data in HTML let's check if this works we see that the data is displayed as expected now let's add the text box and button to add new notes let's also add a button to delete a particular note we need to pass the ID of the note to be deleted now let's complete the method to add notes let's first capture the input data from text box next we need to create the form data to send to the post API method once done we will alert the message and also refresh the notes array similarly let's implement the delete method we need to pass the ID to be deleted we will be passing it as a query string now let's check if everything works as expected let's try to add new notes it works as expected let's try deleting it the delete also works as expected our to-do app is now completed

Channel: Art of Engineer

Views: 24,308

Keywords: mern, mern stack, react, react js, node, node js, express, express js, mongo, mongo db, full stack, front end, back end, web development, full stack web development, tutorial

Id: mDgKjb5eWPk

Length: 22min 2sec (1322 seconds)

Published: Mon Jun 26 2023