Take-Home Assignment Practice

Project: "User Directory & Search"

Objective: Build a React application that fetches a list of users from an API, displays them in a grid, and allows filtering by name.

1. API Endpoint

2. Core Requirements (MVP)

• Fetch data from the API on component mount.
• Display a loading state while fetching.
• Render a card for each user showing: Name, Email, Company Name.
• Implement a Search Bar at the top.
• Filtering should happen in real-time (client-side) as the user types.
• Handle error states (e.g., if the API fails).

3. Bonus Requirements (Senior Level)

• Debounce the search input to avoid excessive re-renders.
• Implement Sort by Name (A-Z / Z-A).
• Make the design Responsive (Grid: 1 col mobile, 3 cols desktop).
• Add a "Dark Mode" toggle using Context API.
• Write at least one Unit Test (e.g., testing the filter logic).

Evaluation Rubric

This is how your code would be graded:

Criteria	What we look for
Code Quality	Clean folder structure, meaningful variable names, small components.
Performance	No unnecessary re-renders. Use of `useMemo` for filtered lists.
UX/UI	Loading spinners, empty states ("No users found"), error messages.
Modern React	Functional components, Hooks (useEffect, useState), Custom Hooks.