Katkat
Back

Build a React team builder with role constraints

AdobeSoftware Engineer · Technical Screen
MediumSoftware EngineerTechnical ScreenCoding & Algorithms

Last updated

This problem tests your ability to manage complex UI state in React, enforce business constraints (role limits) during data manipulation, and implement stable UI rendering based on sorted state.

Problem Statement

You are building a "Team Builder" component for Adobe’s internal project portal. Your task is to implement a React component that allows users to add employees to a team, subject to the following rules:

  1. Role Constraints: The team must have exactly 1 'Lead', 1 'Designer', and between 1-3 'Engineers'.
  2. Uniqueness: An employee cannot be added to the team more than once.
  3. Sorting: The team list must always remain sorted alphabetically by name.
  4. Interactivity: Provide a way to add an employee from a list of available candidates to the team, and a way to remove an existing team member.

Requirements

  • Create a TeamBuilder component that receives an array of allEmployees as a prop. Each employee object has { id: number, name: string, role: 'Lead' | 'Designer' | 'Engineer' }.
  • Implement a local state to manage teamMembers.
  • Ensure the "Add" button for a candidate is disabled if the role limit for that specific role is met.
  • Provide visual feedback (or disable buttons) to prevent adding duplicate team members.

Example

// Initial state: team = []
// Adding 'Alice' (Lead) -> team = [{id: 1, name: 'Alice', role: 'Lead'}]
// Adding 'Bob' (Engineer) -> team = [{id: 1, name: 'Alice', role: 'Lead'}, {id: 2, name: 'Bob', role: 'Engineer'}]
// Note: List must be sorted alphabetically by name.

Edge Cases

  • What happens if the user tries to remove the last 'Lead'? (You can choose to allow or block this; just state your reasoning).
  • How do you handle empty states?

Hints

Hint 1

Use a helper function to calculate the current count of each role in your team state before enabling/disabling the add button.

Hint 2

Maintain the sorted order by sorting the array immediately after every state update (addition or removal) using the `.sort()` method.

Hint 3

Consider using a `useMemo` hook to derive the list of 'available' candidates based on the current `teamMembers` state to prevent stale data bugs.

Follow-up questions

  • How would you optimize this component if the list of employees contained thousands of entries?
  • If we wanted to persist this team to a backend API, how would you handle optimistic updates versus waiting for a server response?
  • How would you refactor this component to make the role constraints configurable (e.g., passing a `constraints` object as a prop) rather than hardcoded?