Employee Management System

A full-stack web application to manage employees and departments efficiently. Built with Angular (frontend) and Node.js + Express (backend) with RESTful APIs and MongoDB.

---

🌐 Live Demo

🔗 Live Application

🧾 Table of Contents

• 🗂️ Folder Structure
• 🚀 Getting Started
• 🧱 Backend Setup
• 💻 Frontend Setup
• 🧪 Tech Stack
• 📸 Screenshots
• 🛠 Features
• 📃 License

📁 Folder Structure

Employee-Management/
├─ backend/
│  ├─ controllers/
│  ├─ models/
│  ├─ routers/
│  ├─ .env
│  ├─ .gitignore
│  ├─ Dockerfile
│  ├─ index.js
│  ├─ package-lock.json
│  └─ package.json
├─ frontend/
│  ├─ .angular/
│  ├─ src/
│  │  ├─ app/
│  │  ├─ environments/
│  │  ├─ guards/
│  │  ├─ models/
│  │  ├─ pages/
│  │  │  ├─ add employee/
│  │  │  ├─ add-department/
│  │  │  ├─ home/
│  │  │  └─ list-employees/
│  │  ├─ services/
│  │  ├─ shared/
│  │  │  ├─ confirm-dialog/
│  │  │  └─ edit-dialog/
│  │  ├─ index.html
│  │  ├─ main.ts
│  │  └─ styles.scss
│  ├─ .editorconfig
│  ├─ .gitignore
│  ├─ angular.json
│  ├─ package-lock.json
│  ├─ package.json
│  ├─ README.md
│  ├─ tsconfig.app.json
│  ├─ tsconfig.json
│  └─ tsconfig.spec.json
└─ README.md

🚀 Getting Started

🔁 Clone the Repository

git clone https://github.com/SanaShahSyeda/Employee-Management-WebApp.git
cd Employee-Management-WebApp

🧱 Backend Setup (Node.js + Express)

📦 Install Dependencies

cd backend
npm install

🔑 Setup Environment Variables

1. If you have MongoDB installed locally, use:

PORT=3000
MONGODB_URI=mongodb://localhost:27017/employee_management

2. Or use MongoDB Atlas by:

• Creating a cluster

• Getting a connection string

• Replacing the URI:

  MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/employee_management
  

  Make sure MongoDB is running before starting the server.

▶️ Start the Server

npm start

The backend runs at: http://localhost:3000

💻 Frontend Setup (Angular)

📦 Install Dependencies

cd ../frontend
npm install

▶️ Run Development Server

ng serve -o

The frontend will run at: http://localhost:4200

🧪 Tech Stack

Layer	Technology
Frontend	Angular 19, SCSS, Angular Material
Backend	Node.js, Express.js
Database	MongoDB
Utilities	RxJS, Angular CLI, Git, Docker

Screenshots

🏠 Home Page

👨‍💼 List Employees

➕ Add Employee

🛡️ Confirm Dialog

🛠 Features

• 🔍 View employees
• ➕ Add/edit employees and departments
• 🗑️ Delete with confirmation dialogs
• ✅ Form validations and CanDeactivate route guard
• 🔁 Reusable components (dialogs, snackbar)
• 🎨 Global SCSS styling with Angular Material

📃 License

This project is licensed under the MIT License.