Contact Manager - MERN Stack

What is a Contact Manager?

A Contact Manager is a full-stack MERN web application that allows users to securely store, manage, search, filter, edit, and delete contact details.

It is used to save important contact information like name, phone number, email address, address, and category.

The application uses JWT authentication so only logged-in users can access their own contacts.

Each user can manage only their personal contacts. One user cannot see another user’s contacts.

In this project, an Admin Dashboard is also included. The admin can view total users, total admins, active users, total contacts, and registered user details.

Features of Contact Manager
User Features

Feature	Description
User Registration	Create a new user account
User Login	Login securely using email and password
JWT Authentication	Protects contact dashboard
Add Contact	Add name, phone, email, address, and category
View Contacts	Display all saved contacts
Edit Contact	Update contact details
Delete Contact	Remove unwanted contacts
Search Contact	Search by name, email, or phone
Filter Contact	Filter contacts by category
Add Category	Add custom category like Office, College, Business
Logout	Securely logout from account

Admin Features

Feature	Description
Admin Login	Secure login for admin
Admin Dashboard	Shows user and contact statistics
Total Users	Count of registered users
Total Admins	Count of admin users
Active Users	Count of active accounts
Total Contacts	Count of all saved contacts
Registered Users Table	Shows name, email, phone, role, and status
Admin Logout	Logout with success popup

Technologies Used

Frontend

Technology	Purpose
React.js	User interface
Vite	Fast React setup
JSX	Component structure
CSS	Styling and layout
Axios	API communication
React Router DOM	Page navigation

Backend

Technology	Purpose
Node.js	JavaScript runtime
Express.js	Backend API framework
MongoDB	Stores user and contact data
Mongoose	MongoDB connection and schemas
JWT	Secure authentication
bcryptjs	Password hashing

Contact Manager File Structure

Backend Files

backend/
├── server.js
├── .env
├── models/
│   ├── User.js
│   └── Contact.js
├── routes/
│   ├── authRoutes.js
│   ├── contactRoutes.js
│   └── adminRoutes.js
├── controllers/
│   ├── authController.js
│   ├── contactController.js
│   └── adminController.js
└── middleware/
    └── authMiddleware.js

Frontend Files

frontend/src/
├── App.jsx
├── App.css
├── main.jsx
├── pages/
│   ├── Register.jsx
│   ├── Login.jsx
│   ├── AdminLogin.jsx
│   ├── ContactDashboard.jsx
│   └── AdminDashboard.jsx
└── components/
    ├── ContactForm.jsx
    ├── ContactCard.jsx
    └── SearchFilter.jsx

Simple Contact Manager Flow

User opens Register page
↓
User creates account
↓
Password is hashed using bcrypt
↓
User data is saved in MongoDB
↓
User logs in
↓
JWT token is created
↓
Token is saved in browser
↓
User opens Contact Dashboard
↓
User adds contacts
↓
Contacts are saved in MongoDB
↓
User can search, filter, edit, and delete contacts

Admin Flow

Admin logs in
↓
Backend checks admin role
↓
JWT token is created
↓
Admin Dashboard opens
↓
Admin views users and contact statistics
↓
Admin can monitor registered users
↓
Admin logs out

Contact CRUD Flow

Add Contact
↓
Enter name, phone, email, address, category
↓
Frontend validates data
↓
Backend validates data
↓
Contact saved in MongoDB
↓
Contact appears in dashboard

Edit Contact
↓
Click Edit
↓
Edit modal opens
↓
Update contact details
↓
Save changes
↓
Updated contact displays immediately

Delete Contact
↓
Click Delete
↓
Contact removed from MongoDB
↓
Contact list updates automatically

Backend Execution

Backend Installation Commands

mkdir backend
cd backend
npm init -y
npm install express mongoose cors dotenv bcryptjs jsonwebtoken
npm install nodemon --save-dev
mkdir models routes controllers middleware

Backend Run Command

npm run dev

Frontend Execution

Frontend Installation Commands

mkdir frontend
cd frontend
npm create vite@latest .
npm install
npm install axios react-router-dom

Frontend Run Command

npm run dev

Contact Manager Architecture

React Frontend
↓
Axios API Calls
↓
Node.js + Express Backend
↓
Routes
↓
Controllers
↓
JWT Middleware
↓
Mongoose Models
↓
MongoDB Database
↓
Response Back to React UI

Output Screens of Contact Manager

Keywords

Contact Manager, MERN Contact Manager, React Contact Manager, Node.js Contact App, MongoDB Contact Management, Express.js Contact API, JWT Authentication, bcrypt Password Hashing, CRUD App, Add Contact, Edit Contact, Delete Contact, Search Contact, Filter Contact, Category Management, Admin Dashboard, User Dashboard, Protected Routes, Axios API Calls, React Router DOM, Full Stack Contact Manager, MERN Stack Project, Beginner MERN Project.

Summary

The Contact Manager is a full-stack MERN application that allows users to securely register, login, logout, and manage their personal contacts. Users can add contacts with name, phone, email, address, and category. They can also search, filter, edit, delete, and add custom categories. The project uses JWT authentication for protected routes and bcryptjs for password security. It also includes an Admin Dashboard where the admin can view total users, total admins, active users, total contacts, and registered user details. This project is very useful for learning CRUD operations, React components, Express APIs, MongoDB models, JWT authentication, protected routes, form validation, and real-world full-stack development.