What is a MERN Stack ?

It is a Javascript Stack that provides end to end frameworks in 4 major technologies ( MongoDB, Express, React and Nodejs), for Full Stack Web Development.

MongoDB

MongoDB is a NoSQL database that uses Javascript. It is flexible and allows us to create Tables, Schema etc.

Express

Express is a Node.js framework that is used in the Backend. It helps us with the Routing process ( creating APIs ).

React

React is used to make our Frontend. We can create a UI using Javascript with the help of React.

NodeJS

Node.js provides us with an environment that helps us run our Backend code on the server.

A Basic MERN Stack Web Application runs through 3 stages :

1) Frontend 2) Backend

FRONTEND

This is the User Interface where our Client/User an access our Web Page. This includes the Text Fonts, Text Colour, Header, Design and Style, Structure and Responsiveness that you see when you are directed to various Web Applications.

BACKEND

This part of the Web Application that consists of the Server and the Data Base. It stores and manages data and makes sure that the Client side is working just fine. It is the part where the Client/User cannot interact with, directly.

Code Editor :

It is a platform where you can Run, Debug and Execute your codes. In this tutorial, we shall use VS code Editor (as it's one of the best platforms to edit code for developers out there!).

Coding Language used :

Javascript - For Backend and Frontend Development

CSS - For styling our Web Pages

Step By Step Downloads, Installations and Initialization to get Started.

Desktop :

Open a New Folder and call it : MERN Open 2 folders in the MERN Directory and name the former Backend and the latter Frontend.

Editor :

Download and Install VS code The latest version from the link provided below for Windows, Mac or Linux Operating Systems.

Visual Studio Code Download link for Windows

Once Installed Add it to your Environment

STEPS :

1) On your search Bar, type "Edit the System Environment Variables".

2) Advanced System Properties >> Environment Variables >> Path >> new >> add "C:\Users\Program Files\Microsoft VS Code\bin">>Ok

Backend

Nodejs

Download and Install NodeJS using the link provided below :

Nodejs Download Link

Once Installed Add it to your environment

Steps :

1) On your search Bar type "Edit the System Environment Variables".

2) Advanced System Properties>>Environment Variables >> Path >> new>>add "C:\Program Files\nodejs">>Ok

• To open the MERN Folder in VS code go to the top right corner, click on File>> Open folder>> Desktop>>MERN
• Open a new Terminal from the Terminal Tab.

Intialize npm and nodemon from Nodejs

On the terminal : Type :

- npm init ( to initialize the package.json file )
- name : backend
- entry : app.js
- npm i nodemon //it restarts the node application whenever it observes the changes in the file present in  the working directory of your project
- start : “nodemon app.js”

• Open a new file in the workspace and name it : app.js

Install 2 more Dependencies :

- npm i express
- npm i mongoose

Frontend

- cd .\Frontend
- npx create-react-app

Install material UI

- npm install @mui/material @emotion/react @emotion/styled

Install material UI icons from material UI website

- npm install @mui/icons-material

Install react router dom from react router dom website

- npm i react-router-dom@6

• Go to extensions icon and install es7 ( react….6M downloads)

Summary

In this Blog, we have covered :

1) Basic definitions of MERN Stack.

2) Installations of VS code Editor and Nodejs.

3) Initializations of various dependencies such as nodemon, express and mongoose.

4) We have also learnt to create Frontend via React App.

In my Next Coming Blogs I shall write about "Git and GitHub commands for a Beginner", " Run a Simple Web Application ", "How to get your Web Page online" and much more !!

If you wish to work/collaborate on some interesting projects, feel free to contact me via email at jessicajames1438@gmail.com