Live Coding Example

Task Overview

You are given a small React project with a minimal setup:

• React and React DOM already configured
• A simple <App /> component where you can add your code
• A working API mock function fetchUsers() that returns a list of users after a short delay

Your goal is to build a User List component that fetches and displays user data with proper states.

Requirements

1. Fetch Data

   • Use the provided fetchUsers() function to load data.
   • The function returns a promise that resolves to an array of user objects with { id, name, email }.

2. Display Users

   • Render the list of users in a simple table or list.
   • Show name and email for each user.

3. Handle States

   • Show a loading indicator while data is being fetched.
   • Show an error message if the API call fails.
   • Show an empty state if the API returns no users.

4. Add Interaction

   • Provide a simple text input that filters users by name in real time.

Use of Libraries

You may install external libraries if you believe they help solve the problem faster or more clearly. However, you must:

• Explain what the library does and why it is relevant here.
• Show (at least briefly) how the same functionality could be done without it, so the interviewer knows you understand the underlying problem.

For example:

• Using a library like axios for data fetching is acceptable, but you should mention that fetch() is already available natively and demonstrate how it would work.
• Using a library like classnames is fine, but be clear that conditional class handling can also be done manually with string concatenation.

The interviewer wants to see judgment, not dependency.

Expectations

• The component should be small, focused, and easy to follow.
• Styling can be minimal; clarity and structure are more important than polish.
• Write code in small, working increments and narrate your reasoning as you go.
• If you run out of time, a partial but structured solution with clear communication is better than rushing.