User Management System

A full-stack User Management System built using the MERN stack. The application provides secure authentication, user profile management, and an admin dashboard for managing users.

🚀 Features

User Side

• User registration
• User login
• JWT-based authentication
• Protected routes
• User profile
• Edit profile
• Profile image upload
• Secure password handling
• Session persistence

Admin Side

• Admin login
• Admin authorization
• View all users
• Search users
• Create users
• Edit users
• Delete users
• Protected admin routes

🛠️ Technologies Used

Frontend

• React.js
• Redux Toolkit
• React Router
• Axios
• JavaScript
• CSS

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• JWT
• bcrypt
• Multer
• Cloudinary
• CORS
• dotenv

🔐 Authentication & Authorization

The application uses JWT (JSON Web Token) for authentication.

After login:

1. The server validates the user credentials.
2. A JWT token is generated.
3. The token is stored on the frontend.
4. Protected routes verify the token.
5. Admin routes additionally check the user's role.

📸 Profile Image Upload

Users can upload a profile image.

The upload flow uses:

React → Express → Multer → Cloudinary → Image URL → MongoDB

Multer handles the uploaded file, while Cloudinary stores the image and provides its URL.

🗂️ Project Structure

user-management/
│
├── backend/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── config/
│   └── server.js
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── redux/
│   │   ├── routes/
│   │   └── services/
│   └── package.json
│
└── README.md

⚙️ Installation

1. Clone the repository

git clone https://github.com/AfeedaKN/user-management.git

2. Go to the project folder

cd user-management

3. Install backend dependencies

cd backend
npm install

4. Install frontend dependencies

cd ../frontend
npm install

🔑 Environment Variables

Create a .env file inside the backend folder.

Example:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

PORT=5000

Do not upload your .env file to GitHub.

▶️ Running the Project

Start Backend

cd backend
npm run dev

Start Frontend

Open another terminal:

cd frontend
npm run dev

The frontend and backend will run separately.

🔄 Application Flow

User
 │
 ▼
React Frontend
 │
 │ Axios
 ▼
Express API
 │
 ├── Authentication
 ├── Authorization
 ├── User Management
 │
 ▼
MongoDB

For profile images:

React
  ↓
Express
  ↓
Multer
  ↓
Cloudinary
  ↓
Image URL
  ↓
MongoDB

📚 Concepts Covered

This project helped me practice:

• MERN Stack
• REST APIs
• CRUD Operations
• JWT Authentication
• Role-Based Authorization
• Password Hashing
• Protected Routes
• Redux Toolkit
• Global State Management
• React Router
• Axios
• Middleware
• Express Controllers
• Mongoose
• MongoDB
• File Upload
• Cloudinary
• Environment Variables
• API Error Handling
• Frontend and Backend Integration

🎯 Learning Purpose

This project was created as a learning project to understand how a full-stack authentication and user management application works from frontend to backend.

👩‍💻 Author

Afeeda KN

GitHub: AfeedaKN