In this challenge, you will write the logic for THIS WIDGET.

Study its functionality and also inspect the Console, the Network tab and the Elements tab in Chrome Dev Tools:

• There are two versions of the widget, with identical functionality.
• The input box at the bottom of the page expects a valid email address.
• Email validation errors arrive from the server, as you can see in the Network tab, under "Preview".
• The payload sent to the server on form submit can also be seen in the Network tab, under "Payload".
• The origin of coordinates of the grid is at its top-left corner.
• One valid email in particular, [email protected], results in a server error.

• Node 16.x
• NPM 8.x (update NPM executing npm i -g npm)
• Chrome >= 96.x

Other configurations might work but haven't been tested.

• Postman (download here)

• Fork, clone, and npm install. You don't need to add any extra libraries.
• Launch the project on a dev server executing npm run dev.
• See your widget visiting http://localhost:3000 in Chrome.
• Run tests locally executing npm test. The test file is codegrade_mvp.test.js.

• The application includes an endpoint on POST http://localhost:9000/result.
• You can experiment with this endpoint using an HTTP client like Postman.
• The endpoint expects a payload like { "x": 1, "y": 2, "steps": 3, "email": "[email protected]" }:
  • x is an integer between 1 and 3.
  • y is an integer between 1 and 3.
  • steps is an integer larger than 0.
  • email is a valid email address.

• Replicate the functionality and DOM shown in the prototype linked at the top of this README.

• Keep your code inside frontend/components/AppFunctional.js and frontend/components/AppClass.js.

• The component exposed by AppFunctional.js must be a stateful functional component.

• The one in AppClass.js must be a stateful class-based component.

• The DOM produced by your components must match exactly the DOM in the prototype:

  • The HTML hierarchy, ids, class names etc must be the same.
  • The current square is marked with a capital B.
  • Success and error messages must be those sent by the API (see Network tab -> "Preview").
  • No frontend form validation code is required.

• The coordinates of each square of the grid are as follows:

    (1, 1) (2, 1) (3, 1)
    (1, 2) (2, 2) (3, 2)
    (1, 3) (2, 3) (3, 3)
  

• Make ALL the tests pass!

• Using codegrade_mvp.test.js as inspiration, write a few tests inside frontend/components/App.test.js:
  • From inside the test file, import a component of your choosing, either AppClass.js or AppFunctional.js.
  • Test that emails over 100 characters long result in a particular server error on the screen.
  • Inspect the API with Postman to see what this error actually is.

• Extract some of the stateful logic into a custom hook at the top of AppFunctional.js.
• Build a stateless component responsible for rendering the markup in the stateful components, so it does not have to be repeated.
• Do not break your MVP by pushing broken stretch goals. You must keep your tests passing at 100%.

• Design the state of the app before opening your editor. You might need fewer pieces of state than you think!
• Find the simplest data structure that describes effectively the state of the grid.
• "Product" works hard designing the messages: we must reproduce them faithfully, down to the last comma.
• If you start with Functional, don't switch to Class-Based until Functional is passing all tests (and viceversa).
• If the direction of the y axis surprises you, know that elements in HTML also have their origin of coordinates at their top-left corner.