Contacts

Difficulty: Medium

Build a contact list that supports sorting by name and searching by phone number. Users can toggle sorting between last name or first name, and search for contacts by matching phone number digits.

Requirements

Data Source

• Contacts are loaded from a JSON file, which can be bundled within the app or fetched remotely.
• Each contact has:

[
  {
    "firstName": "Jane",
    "lastName": "Doe",
    "phoneNumber": "123456789"
  },
  {
    "firstName": "John",
    "lastName": "Smith",
    "phoneNumber": "987654321"
  }
]

Sorting & Grouping

• Contacts are initially sorted by last name and grouped by the first letter of the last name (e.g., "Doe" → D, "Smith" → S).
• Within each group, contacts are sorted alphabetically by last name.
• Users can switch sorting between:
  • Sort by Last Name (default) → Displayed as LastName, FirstName (last name in bold).
  • Sort by First Name → Displayed as FirstName, LastName (first name in bold).

Search

• A search bar allows finding contacts by phone number.
• As the user types, only contacts whose phone number contains the entered digits remain visible. The matching digits within the phone number should be highlighted in a distinct color.
• If the search bar is empty, the full contact list is shown as usual.

UI Structure

• Search Bar at the top.
• Sorting Toggle (button or segmented control) to switch between first/last name sorting.
• List View displaying contacts grouped by the sorting key’s initial.
• Each Row contains:
  • The contact's name in the correct format, with the sorting key bolded.
  • The phone number, with matching search digits highlighted.

Edge Cases

• No Matches → Display an empty state when no contacts match the search input.
• Case Sensitivity → Grouping should be case-insensitive (e.g., "doe" and "Doe" both belong to D).