Address Book using MERN

In this article, we will build a Address Book using the MERN stack. The application will enable users to add, remove, edit and view addresses. The project will use the MongoDB database for storage and React for UI part. This classic address book helps you to save your contacts easily and data can be retrieved easily.

Preview of Final Output: Let us have a look at how our final project will look like:

👁 Screenshot-(136)

Prerequisites of Address Book :

• Model schema for address should be designed before implementing the database .
• The routes and endpoints of NodeJS backend must be designed before implementation .

Technologies Used in Address Book:

• MongoDB
• Express
• React JS
• Node JS

Approach To create Address Book:

1. We will build a frontend in React that will use bootstrap to develop a UI which will be used for below mentioned functionalities .
2. Then we will create MongoDB collection to store the data related to addresses .
3. NodeJS will be used for developing backend server and Express will be used to implement endpoints used by our frontend .

Functionalities of Address Book :

The project will have following functionalities .

• Add Address : User can create a new address and save it to address book.
• Remove Address : User can remove existing addresses from address book.
• Edit Address : User can edit and update existing address.
• View Addresses : User can view all the addresses from address book.

Steps to create a Address Book :

Frontend

Step 1: First we will create a frontend for our application in React . start a new react project using below command .

npx create-react-app address-book

Step 2: For this project we will require axios to make API calls to backend . Also we will require bootstrap for elegant design . We are also going to use react-bootstrap-icons for icons . finally we will use react-router-dom package for routing in frontend.

Step 3: Install all the dependencies using npm as below inside frontend folder.

npm i axios react-bootstrap-icons react-router-dom 

Step 4: For bootstrap get CDN links of bootstrap and jquery and paste it inside index.html file in public folder as below.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

Step 5: Create a folder called components in src directory and create files AddAddress.js, AddressList.js, Navigation.js inside it.

Backend

For backend create a separate folder outside of React folder called 'address-book-backend'.

Step 1: Inside this folder initiate node project using below command.

npm init

Step 2: Now lets install required packages nodemon , express , mongoose , cors , body-parser as below

npm i express nodemon mongoose cors body-parser

Step 3: Once the packages are installed create a app.js file which will contain our backend code . Also create a folder models and create a file address.js

Database :

• For database we are using local MongoDB you can use Atlas also .
• Inside MongoDB create a new database with the name 'addressbook'.
• Now create 'addresses' collection inside this database and we are done with database part.

Project Structure of Address Book:

👁 Screenshot-(134)

The updated dependencies in package.json will look like:

Frontend :

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.5.1",
 "http": "^0.0.1-security",
 "react": "^18.2.0",
 "react-bootstrap-icons": "^1.10.3",
 "react-dom": "^18.2.0",
 "react-router-dom": "^6.16.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
 }

Backend :

"dependencies": {
 "body-parser": "^1.20.2",
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^7.6.0",
 "nodemon": "^3.0.1"
 }

Example: Write the following code in respective file

Frontend Code :

• App.js: This file implements routing and imports all components
• AddAddress.js: This component creates a forma to save new addresses
• AddressList.j: This component displays Address in a list format
• Navigation.js: This component implements navigation and handle update and delete function.

Backend Code :

• app.js: This file creates a connection between backend and frontend.
• address.js: This file creates a schema for saving data in database.

Steps to run the application :

Steps for running frontend code :

Step 1: Open terminal inside frontend folder and run below command .

npm start 

Step 2: The browser will automatically open tab with home page.

Steps for running backend code :

Step 1: For running application first lets add start script inside package.json of backend. add line for nodemon start script.

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "nodemon app.js"
}

Step 2: Open another terminal inside backend folder and run below command.

npm start

Output :

The saved data in database will look like:

👁 gfg