Employee Management System (MERN Stack)

A comprehensive Employee Management System prototype built with the MERN stack (MongoDB, Express, React, Node.js).

Overview

This is a full-stack application designed for managing employees, tracking attendance, and handling leave requests. It features a modern admin dashboard with a responsive design and clean user interface.

Project Structure

employee-management-system/
├── frontend/                 # React application
│   ├── src/
│   │   ├── components/      # Reusable components
│   │   ├── pages/           # Page components
│   │   ├── App.jsx         # Main app component
│   │   └── index.css       # Global styles
│   ├── package.json        # Frontend dependencies
│   ├── vite.config.js      # Vite configuration
│   └── tailwind.config.js  # Tailwind CSS config
│
└── backend/                 # Node.js + Express API
    ├── models/             # MongoDB schemas
    │   ├── Employee.js
    │   ├── Attendance.js
    │   └── Leave.js
    ├── routes/             # API routes
    │   ├── employeeRoutes.js
    │   ├── attendanceRoutes.js
    │   └── leaveRoutes.js
    ├── server.js          # Express server
    ├── package.json       # Backend dependencies
    └── .env.example       # Environment variables template

Tech Stack

Frontend

• React 18 - UI library
• Vite - Build tool (fast development experience)
• Tailwind CSS - Utility-first CSS framework
• React Router - Client-side routing
• Lucide React - Icon library
• Axios - HTTP client

Backend

• Node.js - JavaScript runtime
• Express.js - Web framework
• MongoDB - NoSQL database
• Mongoose - ODM (Object Data Modeling)
• CORS - Cross-Origin Resource Sharing
• dotenv - Environment variable management

Features

1. Authentication

• Login page with email and password
• Role-based access control (ready for implementation)

2. Dashboard

• Overview of key metrics:
  • Total employees
  • Number of departments
  • Attendance today
  • Pending leave requests
• Recent activities feed
• Quick action buttons
• Department-wise employee distribution

3. Employee Management

• View all employees in a table format
• Search employees by name, email, or department
• Add new employees with complete details
• Edit employee information
• Delete employees (soft delete)
• View employee details modal

Employee Fields:

• Name, Email, Phone
• Department (Engineering, Sales, HR, Marketing, Operations, Finance)
• Role, Salary
• Joining Date, Address

4. Attendance Management

• Mark attendance for employees
• View attendance records with status
• Filter by date and employee
• Attendance status options: Present, Absent, Leave
• Daily attendance summary

5. Leave Management

• Submit leave requests with reason
• Leave types: Casual, Sick, Earned, Unpaid
• Approval workflow: Pending → Approved/Rejected
• View all leave requests
• Filter by status (Pending, Approved, Rejected)
• Add remarks when approving/rejecting

6. Settings

• Notification preferences
• Email alerts
• Two-factor authentication setup
• Password management
• Account settings

7. Responsive UI

• Collapsible sidebar navigation
• Responsive navbar with user profile
• Mobile-friendly design
• Modern gradient styling
• Smooth animations and transitions

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn
• MongoDB (local installation or MongoDB Atlas cloud)

Backend Setup

1. Navigate to backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Create a .env file (copy from .env.example):

   cp .env.example .env

4. Update .env with your MongoDB URI:

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/employee-management
   

   For MongoDB Atlas (Cloud):

   MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/employee-management
   

5. Start the server:

   npm run dev    # For development with auto-reload
   # or
   npm start      # For production

   Server will run on http://localhost:5000

Frontend Setup

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   Application will be available at http://localhost:3000

4. To build for production:

   npm run build

API Documentation

Employee Routes

GET    /api/employees              # Get all employees
GET    /api/employees/:id          # Get single employee
POST   /api/employees              # Create new employee
PUT    /api/employees/:id          # Update employee
DELETE /api/employees/:id          # Delete employee (soft delete)
GET    /api/employees/stats/department  # Get employees by department

Attendance Routes

GET    /api/attendance             # Get all attendance records
GET    /api/attendance/date/:date  # Get attendance for specific date
POST   /api/attendance             # Mark attendance
PUT    /api/attendance/:id         # Update attendance
GET    /api/attendance/summary/date/:date  # Get attendance summary

Leave Routes

GET    /api/leaves                 # Get all leave requests
GET    /api/leaves/:id             # Get single leave request
POST   /api/leaves                 # Create leave request
PUT    /api/leaves/:id             # Update leave request (approve/reject)
DELETE /api/leaves/:id             # Delete leave request
GET    /api/leaves/status/pending  # Get pending leave requests

Database Schemas

Employee Schema

{
  name: String,
  email: String (unique),
  phone: String,
  department: String (enum),
  role: String,
  salary: Number,
  joiningDate: Date,
  address: String,
  status: String (default: 'active'),
  createdAt: Date,
  updatedAt: Date
}

Attendance Schema

{
  employeeId: ObjectId (ref: Employee),
  date: Date,
  status: String ('Present', 'Absent', 'Leave'),
  remarks: String,
  createdAt: Date,
  updatedAt: Date
}

Leave Schema

{
  employeeId: ObjectId (ref: Employee),
  fromDate: Date,
  toDate: Date,
  reason: String,
  leaveType: String ('Casual', 'Sick', 'Earned', 'Unpaid'),
  status: String ('Pending', 'Approved', 'Rejected'),
  approvedBy: ObjectId (ref: Employee),
  remarks: String,
  createdAt: Date,
  updatedAt: Date
}

Development Notes

Mock Data

Currently, the frontend uses mock data for demonstration. To integrate with the backend:

1. Replace mock data with API calls using axios
2. Update component state management
3. Add error handling and loading states

Future Enhancements

• User authentication with JWT
• Role-based access control (Admin, Manager, Employee)
• Email notifications
• Report generation
• Salary management
• Performance reviews
• Payroll system
• Employee directory
• Document management
• Integration with HR policies

Production Deployment

• Use environment variables for sensitive data
• Implement proper error handling and validation
• Add request rate limiting
• Set up HTTPS
• Configure CORS properly
• Add database indexing for performance
• Implement caching strategies

Security Considerations

• Hash passwords before storing (backend ready with bcryptjs)
• Implement JWT for API authentication
• Use HTTPS in production
• Validate all inputs on both frontend and backend
• Implement CORS restrictions
• Add rate limiting to prevent abuse
• Sanitize user inputs
• Use environment variables for sensitive data

Troubleshooting

MongoDB Connection Issues

• Ensure MongoDB is running locally: mongod
• Check MongoDB Atlas connection string
• Verify network access in MongoDB Atlas

Port Already in Use

• Backend: lsof -i :5000 and kill -9 <PID>
• Frontend: lsof -i :3000 and kill -9 <PID>

Module Not Found

• Run npm install in both frontend and backend directories
• Clear node_modules and reinstall: rm -rf node_modules && npm install

Demo Credentials

• Email: admin@example.com
• Password: password

Contributing

1. Create a feature branch
2. Make your changes
3. Test thoroughly
4. Submit a pull request

License

This project is licensed under the MIT License.

Support

For issues or questions, please contact the development team.

Quick Start Commands

# Start MongoDB (if running locally)
mongod

# In one terminal - Start Backend
cd backend
npm install
npm run dev

# In another terminal - Start Frontend
cd frontend
npm install
npm run dev

Then open http://localhost:3000 in your browser.

---

Project Status: Development/Prototype Phase ✅ Last Updated: March 2024