Complete Roadmap for M.E.R.N stack Web Development.

6 min readApr 9, 2021

Are you a web developer, but still use old school methods like basic HTML, CSS and JavaScript to create websites? The present world has now moved to an entirely new level of programming and development, where new technologies have come into existence, be it frameworks, libraries, languages etc.! It is very much essential to be on the same page as that of the world, and try to modify and develop your skills accordingly.

Programming languages, platforms and libraries like React, Node, MongoDB etc. are today’s hot keys, and are in a huge demand by some of the top tech companies like Discord, Facebook, Instagram, Tesla and Netflix.

Incase you are not familiar with MERN stack or are willing to start, this post is for you! Let’s discuss the perfect roadmap for MERN stack web development..

Wait! You have been using the word MERN continuously! What exactly is MERN?

M.E.R.N stack is a combination of 4 technologies built on JavaScript that helps you build a Full Stack Web application!

M (MongoDB):

It is basically a cross platform document oriented database program. Unlike MySQL, MongoDB is a no-SQL database that stores JSON like objects along with Schema. The data is not stored in the form of tables and that’s how it differs from other database programs.

This is how the data stored in MongoDB looks like:

There are many reasons why MongoDB is excellent in so many aspects. Some of these are:

Indexing
Ad-hoc query.
File Storage.
Aggregation Framework.
Replication

In order to use MongoDB in our MERN application, we generally use a npm package called mongoose.

E (Express):

Express is a flexible and clean Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications.

Express is the most popular web application framework which uses NodeJS. In MERN stack applications, Express’s role is to manage our backend API server, the one from which we will be fetching data from a database via our React frontend.

This is how the express app looks like! cool right?

Code written is Express is very clean and easy to understand. In express there are things you should learn-

Making you basic boilerplate for setting server and making your app run on required port.
Create basic routes that help you carry out CRUD operations.
Understanding the importance of express.json to read the data that by default comes in JSON format from the frontend part.
Setting up mongoose with Express that helps you get easier access to MongoDB.

R (React)

If you are into front end web development there is a high chance that you would have heard about React, or any other framework/library like Angular or Vue. React is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. It is one of the most powerful and demanded libraries in today’s world!

This is how a basic component of React appears to be like

The prime reason why react is used, is for Single Page Applications(SPA). SPA means rendering the entire website on one page rather than different pages of the websites like we normally do. For the routing part an npm package called react-router-dom is used.

Some important topic to learn in order to start with ReactJS-

Learn to create states and props.
Learn to write both class based and functional based components.
Understand basic React Hooks like useState() and useEffect().
Learn how to initialize and manage states using useState().
Understand Conditional Rendering (very important.
Learn how to fetch API (using fetch or axios) and use it will the help of useEffect() hook.
Making form inputs controlled and handling form submits

After this you can learn advanced methods like Context APIs, Redux and styled components.

N (Node)

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

This is something very familiar to MEAN stack development and the only difference is MEAN stack uses Angular as the frontend framework, where MERN stack uses React for the frontend development.

Basic points to get started with Node-

Learn how to initialize npm package (basics).
Learn how to use npm or yarn (depends on your choice).
Understand package.json file.
Learn how to import and export modules

But why MERN stack? What are the benefits?

There are certain benefits and pros of MERN stack that makes it more popular than any other development stacks

Because all the components of MERN stack as mentioned above are all built with the help of JavaScript, be it React, Node or Express. This makes the integration of frontend (client side development) and the backend (server side development).
It comes with prebuilt testing tools.
It facilitates the Model-View-Controller (MVC) model that ensures the smooth working of the website.
MERN is at the same time considered very cheap in terms of cost, as it has a lot of stuff when it comes to Open Source, and also due to its less learning time period.
MERN has a great and huge community around the globe! All thanks to JavaScript. You can have excess to infinite number of pre coded stuffs and answers to almost all the common queries faced by developers!

Okay that is fine, but how to integrate all of these!

Let’s try to understand the integration using a simple example of a banking system that helps you transfer some amount from one customer to another.

What all things are required? First is an interface that includes a homepage, a view customer page where you can see the customers and a transfer page where u enter amount and select the receiver. This is for the front end.
You need a server and API that helps you access the customers data like amount, ID, name etc. and manipulate the data depending on what the user is willing to do. You will use Node and Express for this.
Lastly you require a database to store all the information that has to be fetched.
So in react you create the basic interface using components. Initialize various states like users, current user, amount etc. Using ContextAPI you access the value of state where ever required in the page.
All set! But how to get the initial values of state! They can’t be static right? Here is where the express is used. In express app you create various API routes that will access the database and pull the required data like users information and store it as the value of state “user”. This fetching can be done using axios.
In database (MongoDB here) we create a cluster and put the connection key into the express app, so that they are connected. Now after connection we make a schema in express that will define how our collection will look like. For example our user scheme looks like-

7. The data is fetched from DB and changed in the React app whenever certain action is performed using useEffect(). The data is then displayed on the front end to the user.

This is the simple example of how MERN stack involves the usage of all 4 technologies to create a single web app.

The roadmap is basically understanding the components that make up the stack and try to learn in depth about how to play with it. Learn how to deploy the final MERN app, because it is pointless to create a website and keeping it to yourself

CONCLUSION

In today’s world nothing is easy and free, you have to put in efforts in order to achieve certain skills. There are many new advanced technologies and frameworks coming up and you have to maintain your pace accordingly! Don’t be afraid of picking up new technology thinking that you would fail. Learn it and make mistakes, we all learn from it. Perhaps one day you would be proud of yourself for having taken this decision at that time. Good Luck!

Thank you

- Samarth Nehe