The ultimate roadmap to be a MERN stack full stack developer

Nowadays MERN is a very popular stack for web application development.

What is the MERN Stack?

MERN implies for MongoDB, Express, React, Node; the four key technologies that make up the stack.

• MongoDB — Database
• Express(.js) — Node.js framework
• React(.js) — Client-side JavaScript library
• Node(.js) — Backend JavaScript framework for maintaining server-side

MERN workflow

Now drive into the discussion of total roadmap for being MERN stack web developer from scratch.

For beginners I must recommend two sites for resources. Noob should start their journey of learning from two most popular site for web developers.

1. w3schools.com
2. freecodecamp.org

A. Learn HTML

For being a MERN stack developer first you should learn HTML. Learn HTML from w3shools.com’s HTML tutorial section. They ready it at very smart and manageable way.

B. Learn CSS

CSS used for giving style into HTML file and in different sections of the website. Same for CSS, go to w3schools.com css section and start the tutorial from scratch.

Then take a break and make at least 5 small projects by CSS and HTML. You can take idea of the project from Github and youtube.

After that your duty is, make those 5 project website responsive by CSS media query. You can learn it from w3schools.com and Youtube.

C. Learn Bootstrap

Professioally Bootstrap, a popular CSS framework mostly used in industry. You can learn bootstrap from bootstrap’s official site documentation. This doc is in smart and handy way. So go and start by docs.

Note: If possible, use bootstrap for design and responsiveness as much as you can in those projects which you did before by CSS.

D. Dive into Javascript

Javascript is a popular language nowadays in web development field.

Start the tutorial from this link to learn Javascript. This resource is beginner-friendly.

JavaScript Tutorial

and start from codeacademy next.

JavaScript Tutorial: Learn JavaScript For Free | Codecademy

Try 5 small projects after learning javascript basic.

=> Then start the concept of Javascript ES6 which is called modern javascript. Those concepts in ES6 help you a lot at the time of development.

=> Try 5 small projects after learning javascript basic.

Now you are ready to learn React! Congo!

E. Dive into React.js

React is now one of the most popular javascript library to develop the client-side of a web application. Start react learning from various sources like official documentation of react, google, youtube and various media as your comfort.

=> Try at least five single-page small projects by learning which you gather from the journey including React.

After successful completion, you can introduce yourself as a junior front-end developer now! Congratulations !!

F. Dive into Node.js, Express.js and MongoDB

Now you can go for backend development. In MERN stack development you should integrate three technology. They are

• MongoDB — Database
• Express(.js) — Node.js framework
• Node(.js) — Backend JavaScript framework for maintaining server-side

You can create API in the backend by node js. Create database and collection at mongo and express will help to connect your server.

You can get detailed process of using those technologies at the respective official documentation. For necessary take help from different training and tutorial sources at different platforms.

G. Firebase for Authentication and Hosting

You can use firebase for authenticating your projects and host those. The details documentation process is abbreviated in a detailed way at firebase official documentation.

I hope and believe this process and guideline help you to be a MERN developer.
Happy learning and coding. This is just a starting, a long way to go.

Some photos collected from https://www.tutorialrepublic.com/.