What Is MERN Stack? Become a Full-Stack Developer

Complete roadmap for becoming a MERN Stack Developer. Everything you need to know about get started

In this handbook, I am going to introduce MERN Stack, the most popular technology to build Full-Stack web applications. MERN Stack is a widely used technology which is embraced by many companies. I Am going to walk you through 5 essential steps to start learning these technologies by yourself.

By the time you finish reading this you will have a solid understanding of MERN Stack, the resources for learning and you will have 10 project ideas to showcase in your portfolio.

What is MERN Stack?

MERN Stack is a combination of 4 popular technologies (MongoDB, ExpressJs, ReactJs, NodeJs) for developing Full-Stack web applications. MongoDB’s flexible data handling, Express’s efficient server side networking, React’s dynamic rendering user interface, Nodejs’s powerfull back-end runtime environment.

If you’re a beginner, then MERN Stack is a smart choice because it uses javascript in all layers. This uniformity and the wide range of support community is a positive for beginners who are ready to dive into Full-Stack development.

The MERN Stack is heavily utilised in the industry, favoured by new companies and large enterprises because of its efficiency. This industry adoption not only validates its effectiveness but also opens up numerous career opportunities for those skilled in these technologies.

Now let’s have a look at how each part of MERN Stack looks like.

ReactJs – Frontend

The Frontend part of the website is where users interact with the website. This is a main part of the website because user experience is important in website development. React is a javascript library which mainly focuses on UI/UX. React maintained by Facebook.

NodeJs – Backend

The backend is a part where we can not see. This is where every action like processing data, validating password, and more. Nodejs is a runtime environment. Some people think that nodejs is a different language but it’s not, it’s the same javascript but it will run in backend, that is the difference. Nodejs helps to run javascript on a local system or server.

MongoDB – Database

Database Is where all the data of a website will store. There are lots of databases available. All these databases are classified into two types.

  • SQL Database
  • NonSQL Database

compared to SQL Database, NonSQL Database is more fast and flexible. MongoDB is a NonSQL Database.

Express – REST APIs

APIs are the messenger between the frontend and backend. There are different types of APIs. Using ExpressJs we can develop REST APIs in NodeJs. GET, POST, PUT and DELETE are the methods used in REST APIs.

  • GET Method used to retrieve data.
  • POST Method for creating a new data
  • PUT Method for updating the existing one
  • DELETE Method for deleting data

MERN Stack Roadmap

Step 1 : Learn the basics of HTML, CSS, JavaScript

Let’s briefly explain these three languages. For understanding quickly, we can connect with a real life example. Let’s think of building a house. First we have to draw a plan, make a structure of the house, this same concept applies to websites also. For making the structure of a website we will use HTML (Hyper Text Markup Language). As a second step we have to design the house like painting, fix tiles etc., for this we will use CSS (Cascading Style Sheets). In the functions part we will use JavaScript.

Step 2 : Master JavaScript

Mastering JavaScript is the key to becoming a MERN Stack developer. JavaScript is heavily used in MERN Stack. Let’s understand the basics of JavaScript.

Variables

Variables are like containers where we can store data. There are 8 data types in JavaScript.

  • String
  • Number
  • Bigint
  • Boolean
  • Undefined
  • Null
  • Symbol
  • Object

Example: We can save users’ names in variables so that we can say ‘Hello [users name]’ later.

Functions

Functions are some blocks of code that you can reuse. If you want to calculate The sum of two numbers, you can write the code inside the functions and you can call the function every time you want to calculate the sum.

Objects & Arrays

Objects are like a business card, a single object containing all information in a key & value pair. Arrays are like lists of items.

If/else Statement

If condition statements are like choosing based on condition. For example wearing a dress Based on weather. If the weather is sunny you choose a specific dress else you choose some other dress.

Callbacks / Promises / Async Await

If a task takes more time, for example fetching a database or calling an API, these kinds of tasks are more time consuming. For this in JavaScript there are some other ways to implement. Callbacks are like calling your friend to do something when they are free. Promises are like your friend promising to do something. Async and Await is putting your task to run in an order like one after another.

Typescript

Typescript is the same as JavaScript but with more rules. With these rules you can easily organize your code. For large scale projects using typescript is more useful when it comes to data processing.

Step 3 : Basics of ReactJs

After understanding what JavaScript is, now it’s time to dive into the world of frontend development.

ReactJs is a JavaScript library for making wonderful and interactive web pages. Using ReactJs we can make reusable components and also we can easily make interactive elements. The plus point of ReactJs is we can fetch data without loading the whole web page.

Components

Separate the website’s parts as components and we can reuse it anywhere when it is required.

Example: let’s make a “Button” which can be used to open a popup or submit a form.

JSX (JavaScript XML)

JSX lets you write HTML code in JavaScript script. But it’s not html, it’s JSX. When the time of rendering JavaScript converts the JSX to HTML. Use Case of using JSX is you can write JavaScript inside HTML (JSX).

Props (Properties)

Props render components dynamically based on the data passed through Props.

Example: pass colour to the button component for making the button colour red or blue.

State

State is like a personal notebook for each component, where it can track their own information. Whether it’s clicked or not.

Example: a like button component keep track of the like button clicked (liked) or not

Hooks

Hooks are some of the tools ReactJs provides to implement features like States and more without the need of complex codes.

Example: Using the useState to keep track of the button component clicked or not.

Event Handling

For handling some actions users made in our website, we can use event handling. If a user clicked on something, then we can do some actions.

Example: Setting up an Event Handling on form submission. Or track a value inside an input box when the value changes in it.

Conditional Rendering

Imagine having magic painting that will change the colors based on condition. In ReactJs you can render components based on conditions.

Example: Showing a “Logout” button if the user is logged in.

Lists and Keys

If you are rendering a list of items, React can not keep track of which item is new and which item is old. For solving this issue we will use keys.

Example: Display a list of messages in a chat app. And each message has a unique id.

Context API

The Context API is a simple way to share data to components. If you’re familiar with props drilling then you might know how hard it is to share data through components. For solving this problem we can use the Context API which is provided by ReactJs.

Example: sharing logged in user information across Components.

Fragments

Fragments are used to group multiple components. When you’re using JSX, we return JSX in A function. The issue you might face sometime is that you can return only one value.

Example: grouping a list of menu items without an extra layer or wrapping with a div tag.

Step 4 : Understand how APIs works with NodeJS and ExpressJS

Every frontend part there should be a way to store data and fetch it when needed. This is where the backend comes in.

In the backend there are 3 parts, Express, Nodejs and MongoDB. Database we will cover shortly. In this section we will cover NodeJS and Express because they are closely related.

NodeJS is a JavaScript runtime environment. Some people think that NodeJS is a different language, it’s not a language but a runtime environment. Using NodeJS we can run JavaScript on the server side. Developing a backend using only NodeJS is a big task and time consuming, that’s why we are using ExpressJs framework. Express is a popular framework of NodeJS. Development of REST APIs using Express is really flexible and lightweight.

NPM (Node Package Manager)

When your working with NodeJS, it’s required to know about NPM. It’s like a warehouse of pre-built tools. We can take those tools as per our requirements.

Example: Installing a ‘body-parser’ to your NodeJS project For handling JSON data.

Routing

Routing is like setting up a road or path to handle each request. Directing each request to a different part of your application.

Example: Creating a route called “/product” to all products and “/products/:id” for individual products.

Middleware

Middleware are like adding an extra layer of functionality to run on each request.

Example: Adding ‘cookie-parser’ middleware into your project for handling cookies.

Request and Response

Request and Response is the way how the front part communicates with the backend. From frontend they will ask what they need in the form of Request and the backend part will give the data as per requested in the form Response.

Example: a user requested to login to their account. After verifying the user we will respond to the user that you’re Logged in.

Environment variables

Environment variables are a secure way to store sensitive content in a project. It can be a Secret Key, Password or anything which you need more security.

Step 5 : what is MongoDB

MongoDB is a NoSQL database which is considered faster than SQL Database. It is flexible and easy to store data in the form of BSON type, which is almost the same as JSON Data.

Mongoose is an ODM which is Object Data Modeling. Using ODM is a new way to handle data more easily. Schema based data modelling is mongoose Providing.

Collections and Documents

In MongoDB data is stored in collections which are similar to tables in relational databases. Inside the collections each entry is considered as a document.

Example: consider using 2 collections, one is for saving user information and another is for saving products details. Each user information is a document.

Schemas

In Mongoose we can define what are the fields Each collection is going to take, and which data type is storing each field or is it a required field etc.

Example: creating a Schema for blogs with title, description, categories.

Models

A model in mongoose act as a constructor which can use to create or read existing documents. Models are compiled from the Schema.

Example: creating a Users models from the userSchema for interact with users collections.

Querying Data

You can search, filter your data with certain Criteria. Using mongoose query you find the posts writter by specific author.

Aggregation

Aggregation in MongoDB is making MongoDB more powerful than other database. You can process multiple step in one request using mongoose Aggregation pipeline.

Example: using aggregation pipeline for calculating average number of likes in blogs.

Wrapping up MERN Stack Journey.

We covered all 3 MERN Technologies you need to know for starting your Full-Stack development journey. I hope now you have a solid understanding of what MERN Stack, frontend and backend. Don’t hesitate to share your opinions.

Author

Related tags on EverSoft

Table of Contents

Read Some Blogs