What does MERN mean?
M- Mongo Db,E- ExpressJS,R- ReactJS,N- NodeJS

This article will help you to create Backend consist of Mongo, NodeJS and ExpressJS and Frontend with ReactJS. In this part 1 , you will be able to create backend and follow the part 2 to create the frontend. This will be quick recap to create a MERN app.

Let’s first create our Backend.

Backend basically means the server side of the web application. I hope you already created a folder for the project or create the empty folder and open the Visual Code.Within your project folder. First, you need to create package.json. …


If you love bootstrap and a follower of Bootstrap then forget about Bootstrap and start learning TailwindCSS 😜

What is TailwindCSS?

Tailwind is a CSS framework for implementing custom designs.Unlike many other CSS frameworks, Tailwind doesn’t include any component classes like form-input, btn,card.

Tailwind is different.

Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML. (https://tailwindcss.com/#what-is-tailwind)

Aren’t you happy, you can stay in your HTML page and start designing your components without going to CSS. Thats the beauty of TailwindCSS.


ReactJS well known JavaScript library to build User Interfaces, which was created by Facebook. ReactJS is used to build Single page Applications.

Current Version is 16.13.1

How Does ReactJS Work?

Reactjs create a virtual DOM, which makes ReactJs unique.Instead of manipulating the browser’s DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

ReactJS creates Virtual DOM and Exact Copy of Real DOM.


JavaScript become more popular with the major changes in Web Development , and bought numerous change in Web Development. The things we are doing in the web was a dream several years before. NodeJs is written in JavaScript. NodeJs is using JavaScript to develop web applications.As now JavaScript is the powerful programming language right now.NodeJs is a server side platform. NodeJs actually not a framework,it is actually a runtime environment

Why NodeJs become special for some developers is,

  • JavaScript is used:Most of the developers uses Javascript
  • Single threaded event loop
  • Good support for REST api
  • non-blocking asynchronous
  • More Faster: It…


We are going to use HerokuApp and Zeit (Vercel) for this.

Pre-requirements

Install GIT and the Heroku CLI , Create an account in Zeit

We are going to deploy our Backend in Heroku and Frontend in Zeit.


Express is a server framework.Express is designed for developing web applications and RESTful APIs. Basically Express provides the tool to build our web application. Nodejs NPM give us much modules for express, using that we can install Express.

Requirements to install Express

To start with express you need to have

Node

Npm

Let’s see how to install express , before installing express. Check the version of npm and node.

Run the following commands in terminal

node — version

npm — version

If you get the version number as output, there is no problem, we can continue to install express.

Run the following code to install express

After installing sucessfully.You can check package.json file which is there in project structure. In that under dependencies you can see express as follows :


In this blog, I’m going to explain the part I did for my project.I used ReactJs as the frontend and for the database we are going to use MongoDb. If you have no idea about ReactJs. Check my last blog about Reactjs.

I’m going to do web application on the theme of ‘Online Fashion Store’.I did homepage as a first move using ReactJs as the frontend. It’s helped me understand the ReactJs definition.

Mithelan Devanandan

I’m an undergraduate student from SLIIT.Currently following 4th Year First Semester.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store