MERN tech stack
MERN React Web

What is MERN tech stack? Explained with folder structure

In this article, we are going in-depth for MERN tech stack. A very popular programming stack these days. We will look at individual components of MERN stack, their usage, how they work together to create a full-stack application.

Components of MERN stack

There are four components of MERN stack.

  • M (MongoDB)
  • E (Express)
  • R (React)
  • N (Node)


For database, we have MongoDB, which is a NoSQL, document-based Database, which means we store data in JSON-like objects.


Express is a web application framework, which helps us to create RESTful APIs, which our front end can consume and make requests.


React is our front end in MERN stack. Using React we can build user interfaces based on components.


And finally we have Node JS, which is a powerful JavaScript server platform.

MERN folder Structure

MERN will have two folders when we are working on it locally. So, for example, we can name our front-end Client and Backend Server. After we are done developing, or completed first iteration of project, we can deploy these separately to individual servers.


Backend will constitute of all the things that will make up majority of our full stack applications. It will include models, controllers, routes. Backend will also include an index.js (or server.js) file, which basically is the entry point into our backend.


Before, we create functions to fetch some data, or to update some field based on an ID, which need to define models first. Models define schema for the data to be stored in the database. Like for example, in the User Schema, you will need name, email, age, education, skills, experience, and so on. Schema help us to have a pre-defined structure for your data.


Routes defines the URL pattern and associated controller for that specific route. For example, if you want to fetch user information, you only want that user’s information not all of the users’ information.

router.get("/:userID/information", getUserInformation)

The above route is telling the getUserInformation controller that it needs to accept a userID and fetch the required information.

router.get("/allUsersInformation", getAllUsersInformation)

Unlike the first route, the above route is telling the controller that there is no parameter to accept and that it needs to fetch information of all users.

So, in routes, we will defines routes for each scenario, that way we will only get the data we need, and makes it easier to understand.


This is where the magic happens. We defined our models, and we defined routes. Now, we need to define the logic for each function.

For example, if you want to get of the user’s information, you will need to do the following.

import UserModel from "./Models/User";

export const getAllUsersData = async(req, res) => {
       const users = await UserModel.find({})

The above code first imports UserModel. It then defines getAllUsersData controller which fetches all of the users data using the UserModel we imported earlier. Find method with no parameters will find and fetch all of the users and return to us, which we can send back to the frontend.


Last but not least, you need to manage your environmental variables. It’s really important because you don’t really want to hard code your password, API credentials, connection strings and other important variables into your main files. Rather, you want to put all of the important variables into .env file. That way, no one will be able to access your secret files in your source code, once it’s deployed.

  • create a .env file
  • add .env to .gitignore
  • list all of your important variables in .env file.
JWT_SECRET = "secretKeyHere"
PORT = 3001
  • To get the variable in, let’s say your index.jsx file, you need to do the following:

That way you will be able to retrieve and use the value stored in .env file.

Server folder structure MERN


Frontend will constitute all of the files for UI. That means everything from Navigation to reusable components to screens; all will be defined in the front-end.


For good organization, you need to separate your frontend pages into their respective folders. For example, for Homepage, you need to place it into separate home folder, and repeat for other pages well.

To do that, you need to simple create a new folder, e.g., Home and create a new file inside, named index.jsx. That index.jsx file will act as official file for your Homepage but remember only file named as index.jsx will be considered as official file for that page.


You also want to make separate files for components that are used frequently. That way, you are not copying pasting your code again and again. Rather you can just import components where you want to use them.

Always make components for files that you are going to use frequently.


Although not necessary to use, but Redux makes it easier to store global variables. Because the values are stored globally, we don’t need to pass values in props, which prevents prop drilling.

FrontEnd folder structure MERN

How MERN stack works

Once our backend functionalities are done, we can move to frontend of our application. As described above, we will create several frontend pages, components according to our use case. We will then request our backend server to do the CRUD functionalities for our application. Which basically means that we will request our server for Creating, Updating, Reading and Deleting objects.

Ending Note

This was the very basic, beginner friendly article for MERN Stack. It briefly describes what the MERN stack is, the folder structure and how it works together.

In the next MERN articles, we will build projects using MERN stack.

Leave a Reply

Your email address will not be published. Required fields are marked *