DEV Community

Cover image for MERN Stack Developer (MSD) Roadmap.
OriCohen05
OriCohen05

Posted on • Updated on

 

MERN Stack Developer (MSD) Roadmap.

For those of you who don't know what is MSD, the following 3 lines will sum it all up for you.
MERN stands for MongoDB, ExpressJS, ReactJS, NodeJS, these technologies allow you to create a server & client-based application (web app).

HTML

Learn HTML basics.
The anatomy of HTML tags: tables, forms, lists.
Deploy a "Contact me" static HTML page as a good practice.

CSS

Learn CSS basics.
You have to understand the language syntax and how to connect it to the previously learned material.
The CSS skills I suggest to know well are:
Inline, Internal, External, Debugging, Selectors, wise usage of id's and classes, Favicons, HTML divs styling, Box model of website styling, Positions and Sizing.
and any one of these topics could be found by Googling "CSS {TOPIC NAME}"
Now you can style your "Contact me" page the way you want.

JavaScript

Learn advanced JavaScript.
to become a MERN stack developer you MUST know JavaScript WELL.
for that, I'm here (:
Read about JS concepts and understand why JS is important for your improvement in the web app environment.
First of all,
the simple basics are:
Document alerts, Data types, Variables, Naming conventions, String concatenation, Arithmetic logic and operators, Boolean expressions, Functions parameters and arguments, math&random classes usage, arrays, objects.
Once again, all of the topics mentioned above can be researched by Googling "JavaScript {TOPIC NAME}", eg: "JavaSciprt functions"
Advanced terms:

  • DOM (Document Object Model) concept.
  • Manipulating HTML elements with JS DOM.
  • Higher orders functions.
  • Event handling.
  • Dot notation.
  • CallBacks.
  • Async/Await functions & promises.
  • Ajax.

Bonus - jQuery, it's a JavaScript framework such as "React" that will be expanded later.
In my opinion, It makes your code unclear and incomprehensible in an attempt to shorten the number of lines.

ReactJS

As you already understood JavaScript is STRONG language which has many frameworks.
What Is a framework?
A framework in programming is a tool that provides ready-made components or solutions that are customized in order to speed up development.
Why ReactJS is special?
ReactJS is an excellent tool with which to create interactive applications for mobile, web, and other platforms. React's popularity and usage are increasing day by day for good reason. As a developer, coding in React makes you better at JavaScript, a language that holds nearly 90% of the web development share today
React is SPA (single page application).

To learn ReactJS and understand it clearly, I suggest taking an online courses.

YouTube crash course which is really good for those who doesnt want to pay -
https://www.youtube.com/watch?v=Dorf8i6lCuk
ReactJS Udemy best seller course (the one I used), I recommend it a lot.
https://www.udemy.com/course/react-the-complete-guide-incl-redux/

Backend introduction

All the topic mentioned above are used for frontend development.
MSD project is a bunch of code and interfaces that merges front & back into an application.

In the computer world, the "backend" refers to any part of a website or software program that users do not see. It contrasts with the frontend, which refers to a program's or website's user interface. In programming terminology, the backend is the "data access layer," while the frontend is the "presentation layer."

NodeJS and ExpressJS

Javascript was always a client side language until node.js.
Common server side languages include PHP, Python, Perl, Ruby
and several more. Node enables you to use Javascript server side.
This now means you can have a consistent language both ends
which could not be done prior to Node.
ExpressJS - express docs
The course I used - Udemy NodeJS bestSeller
YouTube crash course -

Backend Development and server handling with 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.
mongodb docs
Tech target article
MongoDB bestseller course -

Thank you very much for reading! 馃檪

Top comments (9)

Collapse
 
hermes179 profile image
Neel Devani

Great roadmap will agree as I'm in the middle of somewhere but like while doing Internship kinda left behind on practicing what advice would yaa give to get back on MERN stack ??

Collapse
 
oricohen profile image
OriCohen05 • Edited

Do you need any resources or material to practice on?
You can contact me presonally for any help-
Discord: Ori Cohen#0006
Gmail : ori050905@outlook.com
Instagram: origcohen.
Thank you for the comment, I would love to help

Collapse
 
hermes179 profile image
Neel Devani

Sure will do, would love to connect

Collapse
 
timmortal profile image
Info Comment hidden by post author - thread only accessible via permalink
Timmortal

"What I framework?"
I think you omitted a 's' in the above!

Collapse
 
oricohen profile image
OriCohen05

Thanks, fixed.

Collapse
 
or_ofri_594db9ca37cb0a86a profile image
Or Ofri

King馃挭馃徔

Collapse
 
rotem_sadeh_3f58f692ce61f profile image
Rotem Sadeh

Insane

Collapse
 
rontheman profile image
专讜谉 住专讜住讬

Sheeeeeesh

Collapse
 
or01558 profile image
or01558

Great Roadmap!!!!

Some comments have been hidden by the post's author - find out more

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it鈥檚 surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!