Quick Guide | MERN Stack Application Development

Developing a full-stack application offers a comprehensive understanding of application architecture. In this article, we will explore the development process of a full-stack application using the MERN stack, one of the most popular tech stacks today. This article will provide a hands-on guide for the steps to build a MERN stack application from scratch.
This article will aim to be as concise as possible to focus on providing an overview. So, let's get started!!🚀

Introduction

This tutorial will begin with setting up the server using Node.js and Express.js (Step 1), connecting to MongoDB (Step 2), and creating APIs (Steps 3 and 4). Next, we will work on the frontend with React.js to retrieve data through the server and render it in the browser (Steps 5 and 6)

File structure

frontend (folder)
backend (folder)
config.env
.gitignore (*to ignore .env and node_modules)

Step1 : Set up server with Node.js

Go to backend folder

$ cd backend

Create json file to set up server

$ npm init

Install packages

$ npm install express cors

Create index.js in backend folder and configure server

import express from "express";
const app = express();
const PORT = 5500;

app.use(cors());
app.use(express.json());
app.listen(PORT, () => {
  console.log(`APP is listning to port :${PORT}`);
});

Make sure package.json file contains below;
I recommend using nodemon.

 "type": "module",
 "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },

Then, run the npm

$ npm run start

$ npm run dev

Finally, you will get

Step2 : Connect mongoDB

Firstly, go to mongoDB website and create a cluster.

Install dependencies.
*'dotenv' is used to retrieve environment variables from an env file. This helps to hide passwords and API keys (such as the MongoDB password) when you push this project to a public repository on GitHub. Any information in the env file is ignored by Git in this case.

$ npm install mongoose dotenv

Write mongoDB password on config.env

PASSWORD=************

In index.js,

import mongoose from "mongoose";
import dotenv from "dotenv";
dotenv.config({ path: "../config.env" });
.....
mongoose
  .connect( `mongodb+srv://<YOUR USER NAME>:${process.env.PASSWORD}@cluster0.jwm7sal.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`,
    {}
  )
  .then(() => {
    console.log("connected with DB successfully!");
  })
  .catch((error) => {
    console.log(error);
  });

If you're connected with mongoDB, you will see the console message 'connected with DB successfully!!'. Congratulation🎉

Step3 : Define Data model and create API

In this step, you will write code to interact with DB. In this tutorial, folders are divided into the following three;

model : to define schema
route : to define endpoint
controller : to define function (action) based on particular HTTP request Then, the folder structure looks like;

model

Under the model folder, create testModel.js;

import mongoose from "mongoose";
//   Shcema
const Schema = mongoose.Schema;
const testSchema = new Schema({
  name: String,
  age: Number,
});
export const Testmodel = mongoose.model("Testmodel", testSchema);

route

Under the route folder, create testRoute.js;

import express from "express";
import * as testController from "../controller/testController.js";
// Define route to execute it
const router = express.Router();
router.get("/", testController.readTests);
router.post("/", testController.createTest);
export default router;

controller

Under the controller folder, create testController.js. All the handlings related to the test collection are here.

import { Testmodel } from "../model/testModel.js";

export const createTest = async (req, res) => {
  try {
    const newTest = await Testmodel.create(req.body);
    res.status(201).json({
      status: "success",
      data: {
        newTest,
      },
    });
  } catch (err) {
    res.status(400).json({
      status: "fail",
      message: err,
    });
  }
};

export const readTests = async (req, res) => {
  try {
    const docs = await Testmodel.find({});
    res.status(201).json({
      status: "success",
      data: {
        docs,
      },
    });
  } catch (err) {
    res.status(400).json({
      status: "fail",
      message: err,
    });
  }
};

Then, give an endpoint which is corresponding to this collection at index.js

import testRoute from "./route/testRoute.js";
.....
app.use("/test", testRoute);

Step 4 : Examine if the API is working

To examine it, this tutorial uses Postman as an API platform.

test 1 : Create a document

Send HTTP post request like below picture and document is now successfully created.

The new document can also be seen on Mongo Atlas;

test 2 : Read documents

Likewise, the documents are read.

Now that we've done the simplest setting up for server & DB. Next, let's build frontend.

Step 5 : Set up React.js

At your root file, create and start react by the command below

$ npx create-react-app frontend
$ cd frontend
$ npm start

(clean up default code on App.js, for the sake of simplicity)

Step 6 : Interact with server

Once react is activated, let's try to connect with the server. Firstly, install axios.

$ npm i axios

Then, at your App.js, import axios and react Hooks;

import React, {useState, useEffect} from "react";
import axios from "axios";

Tap the API we created in Step3 by using useEffect. The retrieved data is stored in the state.

const [testArr, setTestArr] = useState("");

useEffect(() => {
    axios
      .get(`http://localhost:5500/test`)
      .then((res) => {
        setTestArr(res.data.data.docs);
      })
      .catch(console.log("failed"));
  }, []);

Then, try to render it.

  return (
    <>
      <p>{testArr[0].name}</p>
      <p>{testArr[0].age}</p>
    </>
  );

Now the frontend is connected with the server we created and the data is successfully rendered.

This tutorial ends here, but the possibilities for creating your own applications are endless, thanks to i.e. the versatile React Hooks and the flexibility of MongoDB. I hope this provides a clear and comprehensive overview of building an app with the MERN stack.

Blog