Employee Management System (Angular + Firebase)

Overview

This is an Angular application with Angular Material for managing employee records. It provides CRUD operations using Firebase Firestore. The project features a visually appealing UI, input validations, and a responsive design.

Features

• Add employees with auto-generated IDs
• Edit employee details using a form
• Delete employees from Firestore database
• Display employees in a data table with sorting and filtering
• Search employees by name, email, and phone number
• Real-time UI updates from Firestore

Tech Stack

• Frontend: Angular, Angular Material
• Backend: Firebase Firestore (Cloud Firestore)
• Hosting: Firebase Hosting

Installation & Setup

Prerequisites

• Node.js and npm installed
• Angular CLI installed (npm install -g @angular/cli)
• Firebase CLI installed (npm install -g firebase-tools)

Steps to Run Locally

1. Clone the repository: git clone https://github.com/Mithileshraj123/Employee-Mangement-System.git

2. Install dependencies: npm install

3. Set up Firebase:

   • Create a Firebase project at https://console.firebase.google.com/
   • project name will be like this "employee-management-test-57c56"
   • create a collection under this project called "Employee" with below fields -
   • { "employeeId": "", "firstName": "", "lastName":"", "emailAddress": "", "phoneNumber": "" }

• get firebae api key,secret,url and use it in firebase.config.ts

4. Start the development server: ng serve
5. Open http://localhost:4200/ in your browser.

Deploy to Firebase

1. Build the project: ng build --configuration=production

2. Deploy to Firebase:

   firebase login (please login using firebase credentials) firebase init firebase deploy

3. The app will be hosted at a URL similar to "https://employee-management-test-57c56.web.app/"

Project Structure

employee-management-system/
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├──  employee-list/  # employee listing component to display employee lists and edit/update employee.
│   │   │   ├──  add-update-employee/  # Dialog for adding employees
│   │   ├── services/
│   │   │   ├── employee.service.ts  # CRUD operations with Firestore
│   │── interfae.ts  # Employee interface
└── ...

## API & Database Schema
- **Firestore Collection: `employees`**
  ```json
  {
    "employeeId": "1",
    "firstName": "Mithilesh",
    "lastName":"Raj",
    "emailAddress": "[email protected]",
    "phoneNumber": "9798666045"
  }

My Personal Contact Information

• Email: [email protected]
• Phone: 9798666045
• GitHub: https://github.com/Mithileshraj123/Employee-Mangement-System
• Live App: https://employee-management-test-57c56.web.app/