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 Backendcd backend
npm install
npm run dev
# In another terminal - Start Frontendcd frontend
npm install
npm run dev

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

---

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