Full Stack Development using MERN(MongoDB,Express,React.js,Node.js)

Before starting the article , let’s know first “What is MERN”.

So MERN is a short form of MongoDB (which is a database) , Express(backend web framework for node.js) , React.js(react is a opensource frontend java-script library) and the last one Node.js(Node.js is an open-source, cross-platform, back-end JavaScript runtime environment).

1. MongoDB : MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License.

2. Express.Js : Express.js, or simply Express, is a back end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js

3. Recat.js : React is an open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

4.Node.js : Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

How to Create a React app in our Local Machine ?

1 . Open File Explorer and create a Folder (any name you can use , my case I will use “React-app”).

2. Download the visual studio code from internet. Visual studio code is a light weight source code editor , I will use visual studio code for creating and developing our react-app.

3.After completing installation of visual studio code go to file explorer and click the folder which was created by us during first step . Open the folder and right-click. Then you can see a option open with code. Click that option , your folder will open in visual studio code.

4 . Download and install Node.js from internet , which is the most important tool for creating our react application.

5. Then click “Ctrl + Back-ticks” and open the build-in terminal in visual studio code .

6. Then type “create-react-app<app name>” . In my case my react app name is “react-app”. After typed hit enter and wait until the process is complete. Congratulations your react-app is created successfully.

How to Create a server in local machine with the help of Node.js

1. Create a new folder within the same folder(React-app) and give a name as you want , in my case I will give “backend”.
2. Once again press “Ctrl + Back-ticks” to open the terminal . Then type “..”-to go back the main folder and then type “dir”. “dir” command will help to see how many folder you have in the main folder (I mean React-app folder). Then type “cd backend” to select the backend folder to make backend server.

3. Type “npm i -y” to create a package.json file . In package.josn we will see which module and packages we will use during the entire developing.

4 . To Create a server in node.js first create a file server.js(you can use any name)and type the following code. Download a package “Nodemon” using “npm i nodemon” command .After completing the download open the terminal and type “nodemon server.js” . Congratulations you are created a server successfully .

How to create a database in MongoDB and connect the database with our node.js

1. Go to mongodb.com and create your account . After create your account please select the free plan.

2. Select the new Project option and click . Then you will see a option “build a cluster” and wait for few minutes , it will take some time to build a cluster . after building the cluster click on the collections option and click add a collection option to create a collection (database name).

3.After created the collection name create the connect option .

4. Choose the second option to connect the database from your node.js application .

5. Copy the codes and go to visual studio code . Then go the the server.js file and create a variable name such as “DB”.

6. Type the following code to connect the datebase from your node.js application .

How to connect backend with our React.js front-end ?

1. Go to our react.js application and create a signup form for registration .
2. We have many process to connect our backend with front-end , but I will use “fetch-api” procee to connect our bcakend to front-end.

3. Type this code to connect the backend from front-end . This will connect the our front-end with our backend. But there is a problem . Our react-application always run in port number 3000. So we can’t run our backend in same port . So we will run our backend server with port number 5000. But there is also a problem . When We try to make post request in port number 5000 , then our react -application will give us a “CORS error” . So the question is how to solve the “cors error”. Belive me guys it is a simple . Go the react’s package.json file and add a piece of a code “proxy”: “http://localhost:5000". It will solve the proxy error (i mean cors error).

So congratulation you make a full-stack web application using MERN technologies . Hope you can be able to make different kind of applications using mern. So take care and try to build practical knowledge . Thank you.