How long should this code challenge take?

I applied for a job and they sent a code challenge.

I have a React boilerplate to start from, but no other things to start from so would need to make from scratch.

The design they expect looks very material-ui.

The project description (edited to remove company identifying info):

Build a simple web app using React and Apollo/Graphql and style it

1. The application should include:

a. A simple page with:

  i. Some graphical elements to resemble the Company look & feel (see attachment for inspiration)

  ii. An input text box that will take in a numeric value between 1 and 10 characters

  iii. A button

b. A Graphql Back-End (you could call it http://my-graphql-server)

c. A mocked REST Service (you could call it http://my-service) with the following endpoints: /person, /facility and /exposure

2. The button:

a. Will be disabled for invalid input values and

b. when clicked will call the Graphql Back-End, which should perform the following, and return the end result:

The server calls the mocked service on http://my-service/person/$input$ (pass the input value in place of $input$) The service will respond with the following structure: { "val1": "", "val2": "" }

The server then calls http://my-service/facility/$val1$ (pass in val1 from call to person as $val1$)

The service returns the following structure: { "val3": "", "val4": "" }

Then the server calls http://my-backend/exposure/$val2$ (pass in val2 from call to person as $val2$)

The service returns the following structure: { "val5": "" }

Eventually the Grapqhl call should return val3 and val5

3. Upon completion of this chain show an overlay that contains the result of multiplying val3 by val5.

4. You don’t need to do the full styling, instead please focus on single elements to show off your skills. Animations are also welcome.

5. Please add a README.md to your submission that explains how to use the system

Enjoy