Build & Deploy Full Stack Employee Management System in React js | MERN Stack Project 2026

Tech stack & project goal

• Built a full-stack Employee Management System using the MERN stack:
  • MongoDB, Express, React, NodeJS
• Supports two roles with separate portal entry points:
  • Admin
  • Employee
• Core business features:
  • Admin
    • Manage employee records
    • Approve/reject leave
    • Generate pay slips
    • Review leave history
    • View dashboard metrics
  • Employee
    • Clock in/clock out attendance
    • Apply for leave
    • View pay slip details
    • Update profile/password via Settings

---

Product/UI features demonstrated (Frontend)

Landing & authentication UI

• Landing page with buttons for:
  • Admin portal (/login/admin)
  • Employee portal (/login/employee)
• Login form supports:
  • Email + password inputs
  • Password visibility toggle
  • Loading + disabled submit state
  • Role-driven title/subtitle via props

App scaffolding & developer tooling

• React app created with Vite + React (JavaScript) using:
  • npm create vite@latest
• Styling:
  • Tailwind CSS configured via vite.config.ts plugins and index.css imports
• Routing:
  • react-router-dom routes include:
    • /login landing
    • /dashboard, /employees, /attendance, /leave, /paylips, /settings
    • nested layout route with a sidebar
    • print route: /print/paylips/:id
    • catch-all redirect to /dashboard
• UI utilities:
  • Lucide React icons
  • react-hot-toast for notifications

Reusable layout components

• Layout component:
  • persistent Sidebar
  • Outlet for child routes
• Sidebar features:
  • responsive (hamburger + overlay for mobile)
  • highlights active route via location.pathname
  • role-aware menu items:
    • Admin: employees, dashboard, leave, paylips, settings
    • Employee: attendance (instead of employees)
  • Logout button routes back to /login

Page structure (frontend UI logic)

Created separate pages for:

• dashboard.jsx
  • Admin vs employee dashboard cards
• employees.jsx
  • employee CRUD UI:
    • add/edit employee modal
    • search
    • filtering by department
• attendance.jsx
  • attendance status + stats/history table
  • check-in/out widget
• leave.jsx
  • leave stats + leave history table
  • admin approvals/rejections
• paylips.jsx
  • admin generates; employee downloads
• settings.jsx
  • profile update + password reset modal
• print paylip page
  • render + print as PDF

Admin/Employee dashboard differences

• Admin dashboard cards include
  • Total employees
  • Total departments
  • Today attendance
  • Pending leaves
• Employee dashboard cards include
  • Days present (current month)
  • Pending leaves (awaiting approval)
  • Latest pay slip summary
• Employee actions include:
  • Mark attendance
  • Apply for leave

Employees page capabilities

• Employee list with:
  • search
  • department dropdown filter
• Hover-reveal edit/delete icons on employee cards
• Admin actions:
  • Add employee modal
  • Edit employee modal (prefilled values)
  • Delete uses soft-delete:
    • UI shows “deleted” badge
    • disables updates

Attendance UI capabilities

• Check-in/out logic:
  • If checked in but checkout missing → shows Clock out
  • If both done → shows completion message
  • Loading state during attendance submission
• Attendance history table:
  • date, check-in, check-out, working hours, day type, attendance status
• Uses frontend helpers for:
  • day type display
  • working hours display
• Introduces date-fns for readable date formatting

Leave management UI capabilities

• Leave stats cards:
  • sick, casual, annual
• Leave history table:
  • Employee name (admin only), leave type, date range, reason, status
  • Admin sees approval/rejection buttons with loader while processing
• Employee Apply for leave modal:
  • leave type dropdown
  • from/to dates (min date set to tomorrow)
  • reason text area
  • submit/cancel + loading + validation-like constraints

Pay slip UI capabilities

• Pay slips list for both roles:
  • Employee
    • period, basic salary, net salary
    • download → opens print page
  • Admin
    • includes employee name column
    • supports Generate pay slip modal
• Generate pay slip modal:
  • employee dropdown
  • month selection (1–12) and year
  • basic salary, allowance, deductions
  • net salary calculation handled by backend
• Print pay slip view:
  • fetch pay slip by ID
  • render employee name, position, email, period, salary breakdown
  • “print pay slip” triggers window.print()

Settings UI capabilities

• Profile settings:
  • loads profile from dummy data initially
  • supports saving bio (other fields disabled)
• Password reset:
  • modal with current password + new password
  • loading state and success/error messages
• Deactivated accounts:
  • cannot update profile

---

Code review / analysis integration (CodeRabbit)

• Integrates CodeRabbit AI code reviews:
  • connects to a GitHub private repo
  • workflow:
    • develop branch → PR → CodeRabbit review → merge
• Notes:
  • Free plan: PR summarization
  • Pro plan: comprehensive review + unlimited PRs
  • Includes CLI-based local review modes:
    • default interactive mode
    • fixed suggestions mode
    • prompt-only mode optimized for AI agents
• CLI setup:
  • installs WSL on Windows (Ubuntu)
  • installs CodeRabbit CLI
  • uses CR / CR-base / CR-interactive commands to analyze branches (example: development)

---

Backend architecture & APIs (Express + MongoDB)

Server setup

• server.js runs Express on port 4000 (env override via process.env)
• Uses:
  • cors
  • express.json
  • multer (for parsing form data in future flows)
  • jsonwebtoken for auth
  • bcrypt for password hashing
  • mongoose for MongoDB
  • nodemon for development auto-restart
• Environment variables via .env:
  • MongoDB URI
  • JWT secret
  • additional keys later

MongoDB connection

• Uses MongoDB Atlas
• Adds config/db.js exporting connectDB():
  • mongus.connect(process.env.MONGODB_URI)
  • logs success/failure

Data models (Mongoose)

• User model
  • email (unique), password, role (admin/employee), timestamps
• Employee model
  • userId ref to User
  • first name, last name, email, phone, position
  • financial fields: basicSalary, allowances, deductions
  • employment fields:
    • department (enum via constants)
    • employmentStatus (active/inactive)
    • joinDate
  • soft deletion:
    • isDeleted boolean
  • bio
• Attendance model
  • employeeId ref + date
  • check-in/check-out timestamps
  • status enum: present/absent/late
  • workingHours and dayType (full/half/quarter/sort-day style)
• Leave Application model
  • employeeId ref
  • type enum: sick/casual/annual
  • start/end dates
  • reason
  • status enum: pending/approved/rejected (default pending)
• Paylip model
  • employeeId ref
  • month/year
  • basic salary, allowances, deductions
  • net salary

Key controllers & endpoints

Authentication (O controller)

• POST /API/o/login (role-aware admin/employee authorization)
• GET /API/o/session (session verification)
• POST /API/change password
• Middleware:
  • protect: validates Authorization Bearer token (JWT.verify)
  • protectAdmin: restricts admin-only routes

Employees (/API/employees)

• GET /
  • get employees
  • supports department query filtering
• POST /
  • create employee:
    • hash password
    • create User + Employee
• PUT /:id
  • update employee
  • optionally re-hash password and update role
• DELETE /:id
  • soft-delete:
    • set isDeleted=true
    • set employmentStatus=inactive

Attendance (/API/attendance)

• POST /
  • clock in/out:
    • if no record for today → create check-in
    • if check-in exists but checkout missing:
      • set checkout
      • compute workingHours, dayType
      • set status (late/present)
• GET /
  • get recent attendance history
  • default limit 30; supports query limit

Leave management (/API/leave)

• POST /
  • create leave application:
    • validates fields + date rules
    • must be future; end date ≥ start date
• GET /
  • list leaves:
    • admin: can filter by a_status
    • employee: only their own leaves
• PATCH /:id
  • update leave status (admin only)

Pay slips (/API/payslips)

• POST /
  • create pay slip (admin only)
  • netSalary computed as: basicSalary + allowances − deductions
• GET /
  • list pay slips:
    • admin: all pay slips with employee populated
    • employee: their own pay slips
• GET /:id
  • get pay slip by ID (populate employee)

Dashboard metrics (/API/dashboard, protected)

• Admin returns
  • total employees
  • total departments
  • today attendance
  • pending leaves
• Employee returns
  • current month attendance (days-present style)
  • pending leaves
  • latest pay slip

Admin seeding script

• Adds server/seed.js to create an initial admin user using env vars:
  • admin email from process.env.adminEmail
  • temp password admin123 (example)
• Adds npm script seed in server package config
• Run:
  • npm run seed after backend setup

---

Background jobs & reminders (Inngest)

Uses Inngest for scheduled and triggered tasks

• Adds an Inngest endpoint to Express:
  • app.use('/API/ingest', serve(...))
• Adds Inngest functions:

1. Auto checkout reminder for attendance

   • Trigger: event like employee/checkout
   • Sleeps until 9 hours later
   • If checkout missing:
     • sends email reminder
     • waits 1 more hour
     • auto-updates checkout fields
     • sets status late + workingHours/dayType

2. Leave application reminder

   • Trigger: leave/pending with leaveApplicationId
   • Sleeps 24 hours
   • If still pending:
     • sends admin reminder email

3. Chron job for daily attendance reminders

   • Runs at configured UTC time aligned to 11:30 IST
   • Steps:
     • compute UTC date range for “today” in IST
     • find active non-deleted employees
     • find approved leave employee IDs
     • find checked-in employee IDs today
     • send reminder email to employees absent from both lists
   • Uses node mailer

Email sending

• Uses nodemailer with SMTP credentials stored in .env
• Adds config/nodeMailer.js:
  • sendEmail() helper using HTML templates

Deployment + syncing

• Backend deployed to Vercel, then Inngest app synced
• Required adjustment:
  • updated chron schedule format (timezone + trigger object structure)
  • to avoid “invalid chron schedule”

---

Frontend integration with backend (Axios + Context)

Axios API layer

• Adds axios
• Creates src/API/axios.js:
  • base URL from import.meta.env.VITE_BASE_URL
  • requests include Authorization: Bearer <token> from localStorage

Auth Context

• Creates src/context/Ocontext.jsx:
  • stores user, token, loading
  • refreshSession() calls GET /session
  • login(email, password, role) calls /login and stores token
  • logout() clears token and state

Route protection in layout

• layout.jsx checks context:
  • while loading: shows loading component
  • if no user: redirects to /login

Replacing dummy UI data with API calls

Major pages updated to use Axios:

• dashboard → GET /API/dashboard
• employees → GET /API/employees?department=...
• leave → GET /API/leave and admin approvals via PATCH /API/leave/:id
• attendance → POST /API/attendance and GET /API/attendance
• paylips → GET /API/payslips and preview via /print/paylips/:id
• settings
  • profile via GET /API/profile
  • password reset via /API/change password

Final end-to-end tests & deployment

• Updated frontend Vercel environment variable so Axios base URL points to deployed backend
• Demonstrated:
  • admin login: dashboard, employee management, approvals, pay slip generation
  • employee login: attendance clocking, apply leave, pay slip viewing/download, settings updates

---

Main speakers/sources

• Speaker/creator: likely the channel host (“we” referenced throughout)
• Primary referenced sources/tools:
  • Great Stack
  • CodeRabbit AI
  • Inngest
  • Vercel
  • MongoDB Atlas
  • Tailwind CSS, React Router DOM, Lucide React, react-hot-toast, Axios, Nodemailer, JWT, bcrypt