🏢 Employee Management System

A modern Employee Management System built with React, TypeScript, Tailwind CSS, React Hook Form, Context API, and Axios. This project allows you to manage employee data efficiently with features like adding, editing, filtering, and deleting employees.

---

🚀 Features

• View Employees: Display a list of employees with details like name, position, and email.
• Add Employees: Use a form to add new employees with validations.
• Edit Employees: Modify employee information with an easy-to-use form.
• Delete Employees: Remove employees from the list with a single click.
• Filter Employees: Search for employees by name or position.
• Notification System: Displays success or error messages for user actions.
• API Integration: Fetch and save employee data with Axios.

---

🛠️ Technologies Used

• React ⚛️: Frontend library for building the user interface.
• TypeScript 🟦: For strong typing and better developer experience.
• Tailwind CSS 🎨: For fast and responsive UI styling.
• React Hook Form 📝: For managing forms and validation.
• Context API 🌐: For managing global state across the application.
• Axios 📡: For API requests and data fetching.

---

🚀 Getting Started

Follow these steps to get started with the project:

1️. Prerequisites

Make sure you have the following installed:

Node.js: Download Node.js

npm or yarn package manager.

2️. Installation

Clone the repository and install dependencies:

git clone https://github.com/azadeh-frau/Employee-Management-System.git

cd employee-management-system

npm install

3️. Run the Application

Start the development server:

npm start

The app will be available at http://localhost:3000.

⚙️ Features in Detail:

🖥️ View Employees:

Displays a list of employees with name, position, and email. Designed for fast and responsive performance.

➕ Add Employees:

Simple form for adding new employees. Input validation using React Hook Form and Yup.

✏️ Edit Employees:

Editable forms for updating employee details. Changes are immediately reflected in the list.

❌ Delete Employees:

Remove employees with a single click. Confirmation alerts can be added as an enhancement.

🔍 Filter Employees:

Quickly search for employees by name or position. Filters update dynamically as you type.

📡 API Integration:

Uses Axios for seamless data fetching and manipulation. Can be connected to a custom backend or mock API.

🛠️ Development Workflow:

Context API:

Manage global state for employee data. Functions for adding, editing, and deleting employees.

React Hook Form:

Use for form validation and submission. Simplifies handling of form data.

Tailwind CSS:

Create a clean and responsive UI. Use utility-first classes for fast development.

Axios Integration:

Fetch data from an API for employees. Use services for reusable API calls.

🌟 Future Enhancements

Add pagination for the employee list. Implement authentication for managing employee data. Add confirmation modals for critical actions (e.g., deleting employees). Build a dashboard with charts for employee statistics.

🤝 Contributing

🌻 Azadeh Sharifi Soltani

Feel free to contribute to this project by submitting a pull request or opening an issue! Made with 💻, ☕, and 🌻 by Azadeh Sharifi Soltani