🚀 User Management System

A modern, full-stack user management application built with Node.js, Express, MongoDB, and EJS templating engine. Features a sleek glassmorphism UI design with real-time form validation and live preview functionality.

✨ Features

• Modern UI Design: Glassmorphism design with animated backgrounds
• CRUD Operations: Create, Read, Update, Delete users
• Real-time Preview: Live preview of user changes while editing
• Form Validation: Client-side and server-side validation
• Responsive Design: Mobile-first responsive layout
• Image Support: Profile image URL handling with fallback
• Loading States: Smooth loading animations and feedback

🛠️ Tech Stack

• Backend: Node.js, Express.js
• Database: MongoDB with Mongoose ODM
• Template Engine: EJS
• Styling: Tailwind CSS, Custom CSS animations
• Icons: Heroicons (via SVG)
• Development: Nodemon for auto-restart

📋 Prerequisites

Before running this application, make sure you have the following installed:

• Node.js (v14 or higher)
• MongoDB (running locally or MongoDB Atlas)
• Git

🚀 Installation & Setup

1. Clone the Repository

git clone https://github.com/yourusername/user-management-system.git
cd user-management-system

2. Install Dependencies

npm install

3. Required Dependencies

If you need to install dependencies manually:

# Core dependencies
npm install express mongoose ejs dotenv

# Development dependencies
npm install --save-dev nodemon

4. Environment Setup

Create a .env file in the root directory:

# Database Configuration
MONGODB_URI=mongodb://localhost:27017/user_management
# For MongoDB Atlas, use:
# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/user_management

# Server Configuration
PORT=3000
NODE_ENV=development

# Optional: Session Secret (if using sessions)
SESSION_SECRET=your_session_secret_here

5. MongoDB Setup

Option A: Local MongoDB

1. Install MongoDB locally
2. Start MongoDB service:

   # On macOS with Homebrew
   brew services start mongodb/brew/mongodb-community
   
   # On Ubuntu/Linux
   sudo systemctl start mongod
   
   # On Windows
   net start MongoDB

Option B: MongoDB Atlas (Cloud)

1. Create account at MongoDB Atlas
2. Create a new cluster
3. Get connection string and add to .env file

🎯 Running the Application

Development Mode (with Nodemon)

# Start with nodemon for auto-restart on file changes
npm run dev

# Or directly with nodemon
npx nodemon app.js

# Or if nodemon is installed globally
nodemon app.js

Production Mode

# Start the application
npm start

# Or directly with node
node app.js

The application will be available at: http://localhost:3000

📁 Project Structure

user-management-system/
├── 📁 models/
│   └── user.js                 # User model/schema
├── 📁 node_modules/           # Dependencies
├── 📁 public/
│   ├── 📁 images/             # Static images
│   ├── 📁 javascripts/        # Client-side JS
│   └── 📁 stylesheets/
│       └── style.css          # Additional styles
├── 📁 views/
│   ├── edit.ejs               # Edit user form
│   ├── index.ejs              # User listing page
│   └── read.ejs               # User details page
├── .gitignore                 # Git ignore file
├── app.js                     # Main application file
├── package.json               # Dependencies and scripts
├── package-lock.json          # Dependency lock file
└── README.md                  # This file

🛣️ API Routes

Method	Route	Description
GET	/	Home page
GET	/read	Display all users
GET	/edit/:id	Edit user form
POST	/edit/:id	Update user
POST	/create	Create new user
GET	/delete/:id	Delete user

📦 Package.json Scripts

Add these scripts to your package.json:

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

🔧 Configuration

Database Configuration

Update your MongoDB connection in app.js or create a separate config file:

// app.js
const mongoose = require('mongoose');

// Connect to MongoDB
mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/user_management', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

Environment Variables

Variable	Description	Default
MONGODB_URI	MongoDB connection string	mongodb://localhost:27017/user_management
PORT	Server port	3000
NODE_ENV	Environment mode	development

🚨 Troubleshooting

Common Issues & Solutions

1. MongoDB Connection Error

   # Check if MongoDB is running
   sudo systemctl status mongod  # Linux
   brew services list | grep mongodb  # macOS

2. Port Already in Use

   # Find process using port 3000
   lsof -i :3000
   # Kill the process
   kill -9 <PID>

3. Nodemon Not Found

   # Install nodemon globally
   npm install -g nodemon
   # Or use npx
   npx nodemon app.js

4. Dependencies Issues

   # Clear npm cache and reinstall
   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install

🔐 Security Considerations

For production deployment, consider:

• Input validation and sanitization
• Rate limiting
• CORS configuration
• Environment variables for sensitive data
• HTTPS/SSL certificates
• Database connection security

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

*****This is created by IYKYK(7A) *****

Happy Coding! 🎉