👥 EMS — Employee Management System

Clean, Secure Admin Tooling for Managing People Data

A full-stack MERN application that lets administrators perform CRUD operations on employee records, protected by JWT authentication and role-based access control.

---

🖼️ Preview

(Drop a screenshot of the employee table and the add/edit modal here)

---

🧩 What Is This?

This is Task-02 of the Full-Stack Web Development Internship at Prodigy InfoTech — an Employee Management System that lets an authenticated administrator create, view, update, and delete employee records through a clean dashboard interface.

Unlike a public-facing app, this one is deliberately admin-only: there's no self-serve signup flow in the UI. Access is protected end-to-end — a JWT is required to reach any employee data, and the backend additionally checks the user's role, so only accounts explicitly marked admin can view or modify records. Every write operation (create/update) is validated both client-side (immediate feedback) and server-side (the source of truth), and destructive actions like delete require an explicit confirmation step.

---

✨ Features

🔐 Security

• JWT-based authentication reused from a proven auth pattern
• Role-based access control — every /api/employees/* route requires an admin role, not just a logged-in user
• Passwords hashed with bcrypt, never stored in plain text
• Non-admin accounts are redirected to an explicit "Access Denied" page rather than a silent failure

🗂️ Employee CRUD

• Create, view, edit, and delete employee records
• Fields: name, email, phone, department, job title, salary, date of joining, status
• Live search by name/email and filter by status
• Confirmation dialog before any delete

✅ Validation

• Client-side validation with inline field errors (email format, phone format, non-negative salary, required fields)
• Server-side Mongoose schema validation as the final safeguard — duplicate emails, invalid formats, and missing fields are all rejected with clear error messages

🎨 Interface

• Clean, professional admin dashboard: fixed sidebar navigation, data table, modal-based forms
• Status badges (active/inactive) for quick scanning
• Fully responsive down to mobile

---

🛠️ Tech Stack

Layer	Technology
Frontend	React 18 · Vite · React Router · Axios
Backend	Node.js · Express · Mongoose
Database	MongoDB (Atlas)
Auth	JSON Web Tokens · bcryptjs

---

📂 Project Structure

PRODIGY_FS_02/
├── backend/
│   ├── config/db.js
│   ├── controllers/authController.js
│   ├── controllers/employeeController.js
│   ├── middleware/authMiddleware.js
│   ├── models/User.js
│   ├── models/Employee.js
│   ├── routes/authRoutes.js
│   ├── routes/employeeRoutes.js
│   ├── server.js
│   └── .env.example
└── frontend/
    ├── src/
    │   ├── api/axios.js
    │   ├── context/AuthContext.jsx
    │   ├── components/Sidebar.jsx
    │   ├── components/ProtectedRoute.jsx
    │   ├── components/EmployeeFormModal.jsx
    │   ├── components/ConfirmDialog.jsx
    │   ├── pages/Login.jsx
    │   ├── pages/EmployeesPage.jsx
    │   ├── pages/AccessDenied.jsx
    │   ├── App.jsx
    │   └── index.css
    ├── vercel.json
    └── .env.example

---

📊 Project Status

Area	Status
Backend API — auth + employee CRUD	✅ Done
Role-based access control on all employee routes	✅ Done
Client-side + server-side validation	✅ Done
Admin dashboard UI (sidebar, table, modals)	✅ Done
Search & status filtering	✅ Done
Delete confirmation flow	✅ Done
Responsive layout	✅ Done
Deployment	⏳ Optional

---

🚀 Run It Locally

1. Backend

cd backend
npm install
cp .env.example .env       # fill in your real MONGO_URI and JWT_SECRET
npm run dev                 # → http://localhost:5000

2. Frontend

cd frontend
npm install
npm run dev                  # → http://localhost:5173

3. Create the demo admin account

The login page displays demo credentials for easy testing/evaluation, but that account has to be created once. There's no signup screen in the UI on purpose — this is an admin tool, not a public app. Create the account via the API directly, using these exact credentials (they match what's shown on the login page):

curl -X POST http://localhost:5000/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{"name":"Demo Admin","email":"admin@prodigy.dev","password":"Prodigy@123"}'

Then promote it to admin directly in MongoDB:

db.users.updateOne({ email: "admin@prodigy.dev" }, { $set: { role: "admin" } })

Now anyone testing the app — including an evaluator — can click "Autofill Demo Credentials" on the login page and sign in immediately.

---

API Endpoints

Method	Endpoint	Description	Auth Required
POST	/api/auth/register	Register a new account (defaults to user role)	No
POST	/api/auth/login	Log in and receive a JWT	No
GET	/api/auth/me	Get the current logged-in user	Yes
GET	/api/employees	List employees (supports ?search=&status=)	Yes (admin)
GET	/api/employees/:id	Get a single employee	Yes (admin)
POST	/api/employees	Create a new employee	Yes (admin)
PUT	/api/employees/:id	Update an employee	Yes (admin)
DELETE	/api/employees/:id	Delete an employee	Yes (admin)

---

🔮 Next Steps

1. Add real screenshots of the dashboard and modal forms
2. Optional: pagination for large employee lists
3. Optional: CSV export of employee records
4. Optional: deploy backend to Render and frontend to Vercel

---

📄 License

MIT — open source and free to use.

---

Built for the Full-Stack Web Development Internship at Prodigy InfoTech 👥
by Aditya Dixit