REST API USER MANAGEMENT SYSTEM

BUILT WITH THE MERN STACK & CLIENT-SERVER ARCHITECTURE

        

---

A full-stack User Management System built using the MERN stack (MongoDB, Express.js, React, Node.js) following a client-server architecture. This application allows users to perform complete CRUD operations with a clean and responsive UI. It includes pagination, real-time updates, and REST API integration, making it a scalable and efficient system for managing user data.

🚀 Features

• ➕ Create Users with structured data including name, email, address, and role
• 📄 View Users with efficient pagination for better performance and data handling
• ✏️ Update User Details seamlessly with pre-filled form editing
• 🗑️ Delete Users with instant UI updates after removal
• ⚡ REST API Integration for smooth communication between frontend and backend
• 📱 Responsive UI Design optimized for both desktop and mobile devices

---

🛠️ Tech Stack

The following technologies are used in this project:

Layer	Technologies	Description
Frontend	React.js, JavaScript (ES6+), CSS3	Handles the user interface, component-based structure, and responsive design
Backend	Node.js, Express.js	Manages server-side logic and REST API creation
Database	MongoDB (Atlas / Local)	Stores user data in a NoSQL document-based structure
API Communication	Axios	Handles HTTP requests between frontend and backend
ODM	Mongoose	Provides schema-based modeling for MongoDB data
Environment	dotenv	Manages environment variables securely
Middleware / Tools	cors, nodemon	Enables cross-origin requests and auto server restart during development

---

📁 Project Structure

The following project structure (client-server architecture) is used in this project:

user-management-api/
│
├── backend/
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── utils/
│   ├── .env
│   ├── index.js
│   └── package.json
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   │   └── User/
│   │   ├── pages/
│   │   ├── services/
│   │   ├── styles/
│   │   ├── utils/
│   │   ├── App.jsx
│   │   ├── index.css
│   │   └── main.jsx
│   ├── .env
│   ├── index.html
│   └── package.json
│
├── .gitignore
├── LICENSE
└── README.md

---

⚙️ Setup & Installation

Follow the steps below to set up and run the project successfully:

1. ✅ Clone the Repository

git clone https://github.com/PAIshanMadusha/user-management-api.git

2. ✅ Navigate to the Project Directory

cd user-management-api

3. ✅ Install Dependencies

Install dependencies for both backend and frontend:

cd backend
npm install

cd frontend
npm install

4. ✅ Create .env Files

Create a .env file in the backend directory:

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/user-management-api

Create a .env file in the frontend directory:

VITE_BACKEND_URL=http://localhost:5000

5. 🚀 Start Development Servers

Open two terminals and run the following commands:

cd backend
npm run dev

cd frontend
npm run dev

6. ⚡ Successful Startup Output

Backend terminal should display:

Server is running on port: 5000
MongoDB Connected: your-cluster.mongodb.net

Frontend terminal should display:

http://localhost:5173/

7. 🌐 Test the Application

Open your browser and visit: 👉 http://localhost:5173

---

🌐 API Endpoints

This section defines the REST API endpoints used for performing CRUD operations on user data.

👤 User Routes

Method	Endpoint	Description
GET	/api/users	Get all users (pagination supported)
GET	/api/users/:id	Get a single user by ID
POST	/api/users	Create a new user
PUT	/api/users/:id	Update an existing user
DELETE	/api/users/:id	Delete a user

📸 System Screenshots

These screenshots illustrate how the system appears on desktop:

---

---

👨‍💻 Created by:

Ishan Madhusha
GitHub: PAIshanMadusha

Feel free to explore my work and get in touch if you'd like to collaborate! 🚀

---

📝 License:

This project is licensed under the MIT License : See the LICENSE file for details.