Nur Islam Sport Programmer

MERN stack A to Z: Part 1

6 min read 1724

MERN Stack A To Z

This tutorial is all about the MERN stack. We are going to explore this popular stack and how to use it by developing a simple CRUD (create, read, update, and delete) application from scratch.

Rather than focusing on the application itself, we will focus on the MERN setup. Though the project will be very simple, we will try to follow the best possible project structure to elevate it to an industry-standard level so that anyone can use this as a boilerplate project.

The phrase “MERN stack” refers to the following technologies:

  • MongoDB: MongoDB is a cross-platform document-oriented database program
  • Express.js: Express.js, or simply Express, is a web application framework for Node.js
  • React: React is a JavaScript library for building user interfaces.
  • Node.js: Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser

To make this tutorial simple, I will break it into two parts:

  • Part 1: In this part, we want to complete the server-side work. We’ll work with Node and Express and connect it with MongoDB. After that, we’ll create some APIs.
  • Part 2: In the next section, we will focus on the frontend part with React to build our user interfaces. After that, we will connect our frontend to our backend.

Note: The series will assume a basic understanding of Node.js, Express, MongoDB, and React.

Server setup with Express and Node

npm package initialization

Our first task is to create a project folder. Enter the folder through the terminal, then run the following command:

$ npm init

Now it will ask you some questions about package name, version, entry point, etc. Hit enter if you want to keep the default. After that, you will get something like this:

Creating Our package.json File

Select yes and you are ready to go. It creates a file named package.json.

Dependencies packages installation

Now, I would like to add some dependencies:

$ npm i express mongoose body-parser bcryptjs validation

Type or copy the command above and hit the enter button. You will see something like this:

We made a custom demo for .
No really. Click here to check it out.

Adding Project File Dependencies

  • bcryptjs is a password hashing function designed by Niels Provos and David Mazières
  • body-parser allows us to get the data throughout the request
  • express is our main framework
  • mongoose is used to connect/interact with MongoDB
  • validation (as its name implies) is used for validation

Now I want to add nodemon as a dev dependency. If you don’t want to add this, you can skip it — it’s optional.

$ npm i -D nodemon

nodemon is a utility that will monitor for any changes in your source and automatically restart your server.

At that point, your package.json should look like this:

package.json File With Dependencies

Setting the entry point

Now create a file named app.js for our entry point. You can create this from the project folder with the command below (on Mac):

$ touch app.js

Then paste the code below:

// app.js

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('Hello world!'));

const port = process.env.PORT || 8082;

app.listen(port, () => console.log(`Server running on port ${port}`));

Now, run the command

$ node app

You will see Server running on port 8082. You can also check it from the browser: open the browser and enter http://localhost:8082.

At this point, if we change anything, we need to restart the server manually. But if we set up nodemon, then we don’t have to restart it every time; nodemon will watch if there is any change and restart the server automatically.

So what you need to do for that is a little change to the scripts in our package.json file. See below:

// package.json

  "name": "mern_a_to_z",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "app": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  "repository": {
    "type": "git",
    "url": "git+"
  "author": "Nur Islam",
  "license": "MIT",
  "bugs": {
    "url": ""
  "homepage": "",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "mongoose": "^5.5.15",
    "validation": "0.0.1"
  "devDependencies": {
    "nodemon": "^1.19.1"

So, now you can run your project using this command:

$ npm run app

If you get any error at this point, then run the commands below:

$ npm install
$ npm run app

You will see the following changes in your terminal if everything goes right:

Running Project Successfully

Database management with MongoDB

Now it’s time to work on our database setup with MongoDB. For simplicity, we will use MongoDB Atlas.

Creating an account for MongoDB Atlas

MongoDB Atlas is a fully managed cloud database developed by the same team that built MongoDB.

First, you need an account. Create one and follow the procedure. After creating an account, you will see something like this:

MongoDB Atlas Homescreen

Click on the Project 0 section (top left) and you will see a button for creating a new project. Create a project and select the project.

Now, click on the Build a Cluster button from the project you have created. It will show you all the information. At the bottom, you will see a section called Cluster Name, click on that and enter a name for the database, then hit the Create Cluster button.

After two to three minutes, if everything goes well, you will find something like this:

Creating A Cluster In MongoDB Atlas

Click on the CONNECT button and fill in the username and password form for your database.

Setting Up Our Connection

Now hit the Create MongoDB User button. You can also choose either your current IP address or a different IP address, it’s up to you.

Now, if you follow the CONNECT button or the Choose a connection method button, you will see some different methods. Select accordingly.

Connection Methods Options

In this case, select the Connect Your Application section.

Now you will get your database link, which we will use in our next step.

Connection String Output

Our database is ready — now we need to add it to our project.

Inside the project folder, create another folder named config and inside it create two files named default.json and db.js. Add the following code:

// default.json

 /* Replace <password> with your database password */

/* ------------------------------------------------------------------ */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    await mongoose.connect(
        useNewUrlParser: true

    console.log('MongoDB is Connected...');
  } catch (err) {

module.exports = connectDB;

NOTE: We need a little change in our app.js file to connect to the database. Update your app.js with this:

// app.js

const express = require('express');
const connectDB = require('./config/db');

const app = express();

// Connect Database

app.get('/', (req, res) => res.send('Hello world!'));

const port = process.env.PORT || 8082;

app.listen(port, () => console.log(`Server running on port ${port}`));

We need another dependency package called config for the global variable to run our project. Use the following command to install it to the project:

$ npm i config

Now, you can run the project using the following command:

$ npm run app

Successfully Connected Server

Great! So far we are on the right track. Our database is successfully connected. Now time to complete the route setup, and after that, we will see how to create RESTful APIs.


Create a folder named routes. In it, create another folder named api, which will hold all our APIs.

Inside the api folder, create a file named books.js. We will create some APIs here to show how it works in a moment.

Now update your books.js with the following code:

// routes/api/books.js

const express = require('express');
const router = express.Router();

// Load Book model
const Book = require('../../models/Book');

// @route GET api/books/test
// @description tests books route
// @access Public
router.get('/test', (req, res) => res.send('book route testing!'));

// @route GET api/books
// @description Get all books
// @access Public
router.get('/', (req, res) => {
    .then(books => res.json(books))
    .catch(err => res.status(404).json({ nobooksfound: 'No Books found' }));

// @route GET api/books/:id
// @description Get single book by id
// @access Public
router.get('/:id', (req, res) => {
    .then(book => res.json(book))
    .catch(err => res.status(404).json({ nobookfound: 'No Book found' }));

// @route GET api/books
// @description add/save book
// @access Public'/', (req, res) => {
    .then(book => res.json({ msg: 'Book added successfully' }))
    .catch(err => res.status(400).json({ error: 'Unable to add this book' }));

// @route GET api/books/:id
// @description Update book
// @access Public
router.put('/:id', (req, res) => {
  Book.findByIdAndUpdate(, req.body)
    .then(book => res.json({ msg: 'Updated successfully' }))
    .catch(err =>
      res.status(400).json({ error: 'Unable to update the Database' })

// @route GET api/books/:id
// @description Delete book by id
// @access Public
router.delete('/:id', (req, res) => {
  Book.findByIdAndRemove(, req.body)
    .then(book => res.json({ mgs: 'Book entry deleted successfully' }))
    .catch(err => res.status(404).json({ error: 'No such a book' }));

module.exports = router;

Database model

In order to interact with our database, we need to create a model for each of our resources. So, create a folder called models in the root, and inside the models folder, create a file called Book.js and update it with this:

// models/Book.js

const mongoose = require('mongoose');

const BookSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true
  isbn: {
    type: String,
    required: true
  author: {
    type: String,
    required: true
  description: {
    type: String
  published_date: {
    type: Date
  publisher: {
    type: String
  updated_date: {
    type: Date,

module.exports = Book = mongoose.model('book', BookSchema);

Run the project to see if everything is fine at this point, and you can test all the APIs through Postman (note that before testing APIs using Postman, you need to run the project first). You can download Postman here.


So far, so good! We have set up our backend successfully. Now we need to work with our frontend part, where we will be using React to build user interfaces. Read all about it in “MERN stack A to Z: Part 2.” You can also find the GitHub repo for the project here.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — .

Nur Islam Sport Programmer

22 Replies to “MERN stack A to Z: Part 1”

  1. Hi.. Any idea when the next part would be available?.. I’ve started this without realising that this was only one part.. ;-).. so either I wait for our second part or look for another tutorial.. please advise..

  2. thanks for following this tutorial. you have to wait 2-3 weeks for the 2nd part.

    1. Thanks… Really good article for me and of course helping me in my study about mongodb. I can’t wait for the following article.

  3. Great tutorial, but isn’t the line
    ‘app.use(‘/api/books’, books);
    missing from app.js if we want to test our routes with Postman/Insomnia?

  4. to be able to test the api routes, you will need to add

    //in app.js add below
    const routes = require('./routes/books');

    app.use('/api', routes);

  5. Hi, i’m getting the error below when trying to connect:

    failed to connect to server [] on first connect [MongoNetworkError: connect ECONNREFUSED]

    although i have my IP whitlisted and even switched to accepting request from any IP but still getting this error

  6. When I connect PC’s developing(( / localhost:3000) to MongoDB Atlas, that’s OK I can add update DB. So I try to connect other PC same LAN network to PC’s developing URL: I saw the WEB page but I cannot get Book list , I cannot ADD book.

    How can I solve the problem?

  7. Hello, I´d like to ask, what can I do, if i have this error:

    TypeError: connectDB is not a function

    at Object. (/mnt/c/Users/Michael/Desktop/WebApps/mern_stack/app.js:7:1)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11
    [nodemon] app crashed – waiting for file changes before starting…
    [nodemon] restarting due to changes…
    [nodemon] starting `node app.js`

    [nodemon] starting `node app.js`

    Thank you for your response.

    1. Copying and pasting my comment to Aumkar:

      I believe the issue may be that you don’t have ‘module.exports = connectDB;’ at the bottom of the file. So app.js is not actually importing the specific connectDB function you wrote.

  8. There’s a bug in the db.js instructions. The word “parser” should be capitalized in: useNewUrlparser: true

  9. This is a great tutorial! Got one more issue: With just the code in Part 1, it’s not possible to use Postman to test the APIs. To make it work, app.js needs to be updated to include:

    const books = require(‘./routes/api/books’);
    app.use(‘/api/books’, books);

    That will wire up the APIs so they can be tested.

  10. Can someone help me? I’m getting the same error as @MichaelRydl, where I am able to connect to the DB. I replaced the url in the default.json with the url on the ATLAS, with the username and password that I set for the user, however am still facing this error.

  11. I believe the issue may be that you don’t have ‘module.exports = connectDB;’ at the bottom of the file. So app.js is not actually importing the specific connectDB function you wrote.

  12. I had to initialize the body-parser in order to get the server to work.

    var bodyParser = require(‘body-parser’)

    // parse application/json

Leave a Reply