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
- 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 a3-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 chooseNodeJS
from the option in next screen
- Step 6: Get the
connection string
for the database to use it in theATLAS_URI
config value in the fileserver/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 valuesdb_user
,db_user_pwd
andmongodb_cluster_url
with the respective values that is set Then, set the Atlas URI connection parameter inserver/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
andReact App
are up and running, it opens the portal in default browser onhttp://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
responseServer response on console for various CRUD operations
GitHub Repo
"Property Bookings Catalog" web app developed using MERN Stack
Table of Contents
- Introduction
- MERN Architecture
- Steps to create the application
- Testing Application and Accessing UI
- GitHub Action Workflow Details
- Reference
Introduction
This application is developed for the submission of Dev community X MongoDB Hackathon. This is a MERN stack based Web Application.
MERN 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. Regardless of which variant you choose, ME(RVA)N is the…
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
Top comments (0)