Mock interview scenario

scenario.md

Mock Interview Scenario: React Component Design

Context

You're building a simple task management feature for a productivity app. Users should be able to view tasks, mark them as complete, and add new tasks.

Your Task

Design and plan the implementation for three React components using TypeScript:

1. TaskList - Displays a list of tasks
2. TaskItem - Represents a single task with a checkbox and text
3. AddTaskForm - A form to add new tasks

Requirements

• Tasks should have: id, title, and completed status
• Users can toggle a task's completion status by clicking a checkbox
• Users can add new tasks through a simple form with a text input and submit button
• The task list should update when tasks are added or their status changes

What We're Looking For

• How you think about component structure and data flow
• Your approach to TypeScript types/interfaces
• How you handle state management
• Component composition and props design

Time

Take 20-30 minutes to:

1. Explain your component architecture and data flow
2. Define the TypeScript interfaces/types you'll need
3. Write out the component signatures (props and basic structure)
4. Walk through how the components interact

You don't need to implement every detail, but show your thinking process.

You can use https://codesandbox.io/p/sandbox/react-ts to implement your code

Here is some starter code

function App() {
  const [tasks, setTasks] = useState<Task[]>([
    { id: "1", title: "Complete mock interview", completed: false },
    { id: "2", title: "Review React concepts", completed: true },
  ]);

  return (
    <div
      style={{
        maxWidth: "600px",
        margin: "40px auto",
        padding: "20px",
        fontFamily: "Arial, sans-serif",
      }}
    >
      <h1>Task Manager</h1>
    </div>
  );
}

export default App;