EmployeeHub

A modern Employee Directory Management Application built with React.js and Tailwind CSS. The platform provides a clean and intuitive interface for managing employee information, searching records, filtering employees by department or company, and viewing detailed employee profiles.

The application follows a modern dashboard design inspired by contemporary Figma UI templates and focuses on responsive design, usability, and component-based architecture.

Live Demo

Add your deployed link here:

employee-directory-app-rho.vercel.app

Features

Employee Management

• View employee directory
• Employee profile cards
• Detailed employee information modal
• Add new employee
• Edit employee details

Search & Filtering

• Search employees by name
• Filter by department
• Filter by company
• Sort employee records

User Interface

• Modern Figma-inspired dashboard design
• Responsive layout for desktop and mobile
• Dark mode support
• Professional card-based UI
• Loading skeleton screens
• Smooth transitions and hover effects

Data Handling

• REST API integration
• Dynamic employee data rendering
• State management using React Hooks
• Reusable component architecture

Screenshots

Dashboard

• Employee Statistics
• Search & Filters
• Employee Directory Grid
• Pagination Controls

Employee Details

• Personal Information
• Professional Information
• Address Information
• Banking Information

Employee Management

• Add Employee Modal
• Edit Employee Modal

Technology Stack

Frontend

• React.js
• JavaScript (ES6+)
• Tailwind CSS
• React Hooks

Development Tools

• Vite
• Git
• GitHub
• VS Code

API

• DummyJSON API

Project Structure

src
│
├── components
│   ├── Navbar.jsx
│   ├── EmployeeCard.jsx
│   ├── EmployeeModal.jsx
│   ├── AddEmployeeModal.jsx
│   ├── EditEmployeeModal.jsx
│   ├── Pagination.jsx
│   └── SkeletonCard.jsx
│
├── hooks
│   └── useDebounce.js
│
├── services
│   └── employeeService.js
│
├── pages
│   └── Home.jsx
│
├── App.jsx
└── main.jsx

---

Installation

Clone Repository

git clone https://github.com/prathyusha031/employee-directory-app.git

Navigate to Project

cd employee-directory-app

Install Dependencies

npm install

Run Development Server

npm run dev

Application will start on:

http://localhost:5173

Production Build

npm run build

Preview Production Build

npm run preview

Key Functionalities

Employee Dashboard

Displays:

• Total Employees
• Total Departments
• Total Companies

Employee Search

Users can search employees instantly using employee names.

Employee Filters

Filter employees by:

• Department
• Company

Employee Details

View detailed information including:

• Personal Details
• Contact Information
• Education
• Company Information
• Address Details
• Banking Information

Employee Management

• Create new employee records
• Update existing employee records

Design Approach

The user interface was redesigned using modern Figma-inspired dashboard principles:

• Clean visual hierarchy
• Consistent spacing system
• Card-based layouts
• Modern typography
• Soft shadows and rounded corners
• Professional color palette
• Dark mode support

Learning Outcomes

This project demonstrates practical experience with:

• React Component Architecture
• State Management
• API Integration
• Responsive Web Design
• CRUD Operations
• Modal Management
• Dynamic Rendering
• Tailwind CSS Styling
• Modern Dashboard Development

Future Enhancements

• Authentication & Authorization
• Employee Delete Functionality
• Advanced Filtering
• Employee Analytics Dashboard
• Export Employee Reports
• Backend Integration
• Database Support
• Role-Based Access Control

Author

Bailapudi Prathyusha

Computer Science Engineering (Data Science)

GitHub: https://github.com/prathyusha031

LinkedIn: https://www.linkedin.com/in/prathyusha031

License

This project is developed for educational and portfolio purposes.