Build a React Web application that has one screen. The top half has search, and the bottom half has add contact functionality. When the user submits the add contact form, collect the data from all the controls and send that data to the RESTFUL service you built $($see below$).$

Use Fetch API for searching and adding Contacts. When the user submits the search form by entering value for "First Name" and "Last Name", the entered values should be sent to RESTful service and the return results should be displayed on the top half of the screen and only display the first name, last name, email, and a view button for each contact.

When the user clicks on the view button, the contact from that row should be display in the bottom panel.

RESTFUL SERVICE

import javax.ws$.$rs$.*$;

import javax.ws$.$rs$.$core.MediaType;

import java.util.ArrayList;

import java.util.List;

$//$ Represents a contact with various attributes

class Contact $\{$

private String firstName;

private String lastName;

private String email;

private String phone;

private String address;

private String city;

private String state;

private String zipcode;

$//$ Constructor, getters, and setters for Contact class

$\}$

$//$ RESTful web service for managing contacts

@Path$("/$contacts$")$

public class ContactsService $\{$

$//$ Collection to store contacts

private List contacts $=$ new ArrayList$<>()$;

$//$ Endpoint to add a new contact

@POST

@Produces$($MediaType$.$APPLICATION$\_$JSON$)$

@Consumes$($MediaType$.$APPLICATION$\_$JSON$)$

public String addContact$($Contact contact$)\{$

try $\{$

$//$ Add the received contact to the contacts collection

contacts.add$($contact$)$;

$//$ Return success status as JSON

return $"\{\backslash "$Status$\backslash "$: $\backslash "$Success$\backslash "\}"$;

$\}$ catch $($Exception e$)\{$

$//$ If an exception occurs, return failure status as JSON

return $"\{\backslash "$Status$\backslash "$: $\backslash "$Fail$\backslash "\}"$;

$\}$

$\}$

$//$ Endpoint to search contacts based on first name and last name

@GET

@Produces$($MediaType$.$APPLICATION$\_$JSON$)$

@Consumes$($MediaType$.$TEXT$\_$PLAIN$)$

public List searchContacts$($@QueryParam$("$fname$")$ String fname, @QueryParam$("$lname$")$ String lname$)\{$

$//$ List to store matched contacts

List matchedContacts $=$ new ArrayList$<>()$;

$//$ Iterate over each contact in the contacts collection

for $($Contact contact : contacts$)\{$

$//$ Check if the contact's first name contains the provided first name query parameter

$//$ AND if the contact's last name contains the provided last name query parameter

if $($contact$.$getFirstName$().$toLowerCase$().$contains$($fname$.$toLowerCase$())$ &&

contact.getLastName$().$toLowerCase$().$contains$($lname$.$toLowerCase$()))\{$

$//$ If both conditions are met, add the contact to the list of matched contacts

matchedContacts.add$($contact$)$;

$\}$

$\}$

$//$ Return the list of matched contacts

return matchedContacts;

$\}$

$\}$