DESIGN TECHNOLOGIES FRONTEND CHALLENGE

The task

Create a list of departments. Every department must have its related employees attached to it. Every employee should be represented by a card that displays their avatar and name, and also has a checkbox. You should be able to filter employees by department and name. You should be able to, via the checkbox, select individual employees, all employees in a department, or every employee in the organization.

Requirements

  • The task can be written in any modern javascript framework, but we encourage using React
  • The task MUST have a responsive UI. You can make it as simple or as complex as you want, but it should be functional and intuitive.
  • You can use whatever you want for the UI. (Material UI, bootstrap, tailwind, any other library, or you can just use custom css)
  • The task MUST be unit tested
  • Use the information provided in data.json

Example of page layout (You can use the example below as a guideline):

Filters:

Department - dropdown

Employee name - Text Input

  • Acme (Company name)

  • Managers:

  • {AVATAR} - Liam

  • {AVATAR} - Lara

  • Operators:

  • {AVATAR} - Sam