Property Bookings Catalog - 3-tier web app developed using MERN Stack

Table of Contents

• Introduction
• What is MERN Stack
• MERN Architecture
• Steps to create the application
  • Create MongoDB Cluster and Get DB Connection String
  • Setting up Application to connect with MongoDB
  • Start the Express server
  • Method 1
  • Method 2
  • Start the React app
• Testing Application and Accessing UI
• GitHub Repo
• GitHub Action Workflow Details
• Reference

Introduction

Hackathons are always a great and fun way to learn new technologies. This web app is developed for the submission of Dev community X MongoDB Atlas Hackathon (#atlashackathon). This is a MERN stack based Web Application.

I'll be discussing on how to create the app in this blog.

What is MERN Stack

MERN is one of the popular full stack web app frameworks. It stands for MongoDB, Express, React, Node, which are making up the tech stack.

MongoDB - Popular NoSQL document database
ExpressJS - Node.js web framework
ReactJS - a client-side JavaScript framework
NodeJS - the JavaScript web server

Express and Node make up the middle (application) tier. Express.js is a server-side web framework, and Node.js the popular and powerful JavaScript server platform.

It is one of variant of popular MEAN and MEVN stacks, in which A stands for AngularJS and V stands for VueJS respectively.

Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through.

MERN Architecture

As per the documentation
The MERN architecture allows us to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON.

It has been a while since I'm trying to create a Web App using the MERN stack. Finally I'm able to create it. Thanks to the great article by MongoDB team. I took inspiration from the MongoDB tutorial and created this application.

Steps to create the application

Create MongoDB Cluster and Get DB Connection String

• We choose MongoDB Atlas Managed Database Service provider by MongoDB
• We need to signup for an account in MongoDB portal
• After logging into account we need to create a project and enable billing if needed. There is no billing required for Demo purposes.
• Rest of steps assuming that, we have created project in MongoDB account
  • Step 1: Create MongoDB cluster using Atlas UI. Refer the documentation here

• Step 2: After choosing the project to create the Cluster, click create button
• Step 3: Choose the required Cloud Provider and dedicated or shared infrastructure to host the DB. This would take a few minutes to create the Cluster. Move to next step after the Cluster creation is complete

• Step 4: Select the database from Atlas UI and click on connect button available near the DB cluster
• Step 5: Choose Connect Your Application and choose NodeJS from the option in next screen

• Step 6: Get the connection string for the database to use it in the ATLAS_URI config value in the file server/config.env later in this tutorial
• Step 7: We are choosing sample_airbnb database collection to implement the bookings catalog application
• Step 8 (Optional for DEMO): It would be good to add indexing for the collection to have faster search through the DB schema. Please follow the steps mentioned in MongoDB Docs here to create indexing for the DB collection

mongodb+srv://<admin_user>:<password>@democluster.aurnw.mongodb.net/myFirstDatabase?retryWrites=true&w=majority

Note: Replace <password> with the password for the <admin_user> user. Replace myFirstDatabase with the name of the database that connections will use by default.

Setting up Application to connect with MongoDB

• We have server/config.env file in our repository, replace the values db_user, db_user_pwd and mongodb_cluster_url with the respective values that is set Then, set the Atlas URI connection parameter in server/config.env to our Connection String:

ATLAS_URI=mongodb+srv://<db_user>:<db_user_pwd>@<mongodb_cluster_url>?retryWrites=true&w=majority

• We need to run the Express server and React app parallely in two different terminals ## Start the Express server
• Express server runs on localhost:5000 ### Method 1
• In this method we use nodemon - Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.

cd server
npm install
npm install -g nodemon
nodemon server

Method 2

• In this method, we simply run npm start to run the server

cd server
npm install
npm start

Start the React app

• React app runs on localhost:3000

cd app/listings/
npm install
npm start

Testing Application and Accessing UI

• Once Server and React App are up and running, it opens the portal in default browser on http://localhost:3000 URL (else we can use this URL to access the portal) and we should see our “Property Bookings Catalog” application.

Application Accessible on Browser

Application See Details response

Server response on console for various CRUD operations

GitHub Repo

GitHub Action Workflow Details

• This repo has GitHub action CI workflow to perform Continuous integration process explained below,
  • Checks out the code into workspace root
  • Build the server and frontend app
  • Creates docker image build for server and frontend app
  • Pushes the docker image into docker hub registry

Reference

• This repository contains the sample application for the MongoDB and Express.js REST API tutorial.

• Getting Started with Atlas guide, to learn how to create a free Atlas account, create your first cluster and get your Connection String to the database.

• MongoDB Indexing Doc

• MERN Stack documentation