DEV Community

Cover image for A Beginners Guide to MERN Stack!
Jamelah Hadi
Jamelah Hadi

Posted on

A Beginners Guide to MERN Stack!

What is a Tech Stack?

A Stack is a combination of all frameworks and libraries using which you can create an entire application from Frontend to Backend and Database.

MERN Stack

  • A variation of Full Stack Web Development.
  • MERN Stack is a Tech Stack used in building an End to End Full Stack Web Application.
  • We have a client made up of React, Node and Express for API and the backend and MongoDB as the Database.

Image description

MongoDB

  • MongoDB is a NoSQL Document Based Database.
  • Data is stored in the form of documents.
  • It does not follow any schema like SQL databases do.

Express

  • Express is a backend framework for creating Web Applications on Node.js.
  • Express lets you build a server that runs on Node.
  • A Server receives requests from the client and returns back a response.
  • It is responsible for interacting with the Database.

Node

  • Node is a open source Cross platform Runtime Environment for running JavaScript Applications.
  • Since JavaScript can only run inside the browser, Node sets up an environment where we can run JavaScript on the server as well.

React

  • React is a JS library for creating interactive Frontend for your Web Application.
  • React uses Virtual DOM which updates fast on changed then a Regular DOM.

How does MERN Stack work?

  1. A User interacts with the Frontend/Client side of the application built using React.

  2. The User click a button which requests a specific data.

  3. This request is sent by the Client/Frontend to the Server/Backend in the form of a HTTP request.

Image description

  1. The Server then analyzes the request. Depending on the nature and context of the request the Server interacts with MongoDB database. The Server can add, retrieve, update and delete data from the Database.

  2. The Server interacts with the Database on behalf of the user. If the interaction is a success, the Server sends a response back with the requested data to the Client.

  3. The Client then renders this data on the UI so that the User can read and interact with it.

Roadmap for MERN Stack Development

  1. Fundamentals of Web
  2. HTML
  3. CSS
  4. CSS Frameworks like Bootstrap and Tailwind
  5. JavaScript
  6. JavaScript ES6
  7. React
  8. Node
  9. Express
  10. MongoDB
  11. Git and GitHub

Resources for MERN stack

YouTube courses:

1-youtu.be/98BzS5Oz5E4

2-youtu.be/-0exw-9YJBo

3-youtu.be/ktjafK4SgWM

4-youtu.be/H-9l-gTq-C4

Thank you for reading. ❤️

Top comments (0)