- EMPLOYEE ORGANIZATION CHART -

The ideal platform to search, filter, drag and drop employees listed out under different managers.
Users can Search an Employee based on the id, name, designation, reporting manager.
Users can Filter out an Employee based on the designation.
Users can Drag and Drop an Employee from Reporting Manager to Another Manager.

Visit Live - Live-Demo

Screenshots

Video Demo

Employee.Organization.Chart.-.Final.mp4

TechStack Used

• React
• Typescript
• CSS3
• Vite
• react-organizational-chart
• Styled-Components
• Unit-Testing-Vitest-React-Testing-Library
• Hosting- Netlify

1. Setting up the project locally

To clone and run this application, you'll need Git and Node.js (which comes with yarn installed on your computer)

1. Fork this repository and clone the project

   git clone https://github.com/Prakash-Ravichandran/org_chart.git

2. Go to the project directory

   cd org_chart

3. Install dependencies

   npm install

4. Start the server

   npm run dev

5. Run Test Cases

   npm run test

Features

• Search: Search funtionality in the app renders the employees based all properties of an employee fetched from mock data.
• Dropdown: Dropdown functionality in the app renders the employees based on the designation of an employees fetched from mock data.
• Drag & Drop: Drag and Drop functionality changes the employee from reporting to one manager to other.
• List Out in Card: The Employee card listouts the details of name, designation, reporting Manager.

Unit Testing

• Search: Written a Unit Testing for Search Component & Placholder for Search.
• Dropdown: Written a Unit Testing for Dropdwon Component & Options for Dropdwon.

Current Contributors

Contact

• Github - @Prakash-Ravichandran
• LinkedIn - @prakash-ravichandran
• Twitter - @dev_hustler

Show Your Support

Give a ⭐️ if you liked this project!

---