Customer Relationship Management (CRM) System with Node.js and Express.js

CRM systems are important tools for businesses to manage their customer interactions, both with existing and potential clients. In this article, we will demonstrate how to create a CRM system using Node.js and Express. We will cover the key functionalities, prerequisites, approach, and steps required to create the project.

Output Preview:

👁 ReactApp-GoogleChrome2024-04-1209-40-51-ezgifcom-video-to-gif-converter

Prerequisites:

• Node.js
• Express
• MongoDB
• React
• JavaScript

Functionalities

User Authentication and Authorization

• Companies that want to use the CRM Portal can register on the application and access the functionalities by signing in.
• JWT, JsonWebToken and bcryptjs are some packages used for implementing smooth authorization.
• Context API helps to maintain the state of the user that has logged in.

Adding Customers

• The company can easily add new customers and details about them.
• A form is created with the post method to implement this functionality. Status can be selected from a drop down.
• The page navigates to the all customers page when a customer is created.

Customer Management:

• Implementing functionalities to manage customer data such as name, email, phone number, and address. Allow users to add, view, update, and delete customer records.

Steps to Setup the Backend of Application

Step 1: Create a new directory named backend.

mkdir server
cd server

Step 2: Create a server using the following command in your terminal.

npm init -y

Step 3: Install the necessary package in your server using the following command.

npm install bcryptjs cors dotenv express 
npm install cookie-parser jsonwebtoken 
npm install mongodb mongoose morgan helmet nodemon

Step 4: Create a .env file to store things you don’t want to show to others.

MONGO = Mention Yours
JWT = jbckjbwd3487238dsnbfkj

Project Structure:

👁 Screenshot-2024-04-12-091346

The updated Dependencies in package.json file of backend will look like:

"dependencies": {
 "bcryptjs": "^2.4.3",
 "cors": "^2.8.5",
 "dotenv": "^16.4.4",
 "express": "^4.18.2",
 "cookie-parser": "^1.4.6",
 "jsonwebtoken": "^9.0.2",
 "mongodb": "^6.3.0",
 "mongoose": "^8.1.3",
 "morgan": "^1.10.0",
 "helmet": "^7.1.0",
 "nodemon": "^3.0.3"
}

Example: Create the required files as shown in folder structure and add the following codes.

Step 6: To start the backend run the following command.

nodemon index.js

👁 Screenshot-2024-04-12-092332

Steps to Setup the Frontend of Application

Step 1: Create react application in your project folder using the following command and navigate to the folder.

npx create-react-app client
cd client

Step 2: Install additional packages

npm install axios react-router-dom 
npm install @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Project Structure:

👁 Screenshot-2024-04-12-083808

The updated Dependencies in package.json file of backend will look like:

"dependencies": {
 "@fortawesome/free-solid-svg-icons": "^6.5.1",
 "@fortawesome/react-fontawesome": "^0.2.0",
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.6.7",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-router-dom": "^6.22.1",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Step 3: Add proxy at the end of the package.json file like so:

 },
 "proxy": "http://localhost:7700/api"
}

Example: Implementation to design the frontend of the application.

Step 4: To start the client, run the following commands in the terminal

npm start

Output:

👁 Customer Relationship Management using Node and express