I have been studying different web application stacks and I wanted to share them with you guys. For this two-part tutorial, we will create a basic CRUD employee management application that will use the technologies mentioned above.

As a fellow software engineer who wants to explore and try different technologies, I have struggled to find articles that discuss the following technologies in a real-world application. This article requires you to have at least a basic working knowledge of React, MongoDB, and NestJS.


Setting Up the Environment

If you do not have the following software tools, please follow the procedure indicated below to install them on your machine:

  1. You need to have Node.js and npm installed on your machine. Please follow this link to install both.
  2. You have a preferred text editor (e.g. Sublime, VSCode) and a web browser (e.g. Google Chrome, Firefox)
  3. You should have a Postman application installed. This will be used to test our application.

Now that everything is set, let’s start to build this awesome app!


Building the Back End

Let’s start with our MongoDB + NestJS + Node server stack!

Setting up the MongoDB Atlas cluster

Create a MongoDB account. After creating an account, we can create a project and a free-tier cluster in MongoDB similar to the one below:

Image for post

“Cluster0” cluster in MongoDB

In order to connect the cluster, you can click the “Connect”button. Then click “Connect your application.”

Image for post

How to connect to the MongoDB cluster

Take note of the connection string displayed on the page (similar to the one below). We will use this later when connecting to the database:

mongodb+srv://<username>:<password>@cluster0.abvta.mongodb.net/<dbname>?retryWrites=true&w=majority

In the “Network Access” tab on the left-hand side of the page, we need to whitelist our current IP address in order for us to connect with the MongoDB project. Click on the “ADD IP ADDRESS” button and add your current IP address.

Image for post

Whitelisting of IP address in MongoDB

#web-development #mongodb #javascript #programming #react #nest.js

Build Full-Stack Application in React and Node With MongoDB and Nest.js
10.85 GEEK