Create a new API endpoint in the back end that will be responsible for displaying

a custom message.

Step $1$: Add a back$-$end endpoint

$1.$ Go to the back$-$end folder.

$2.$ Edit server.js$.$

$3.$ Add a new endpoint: $`$app$.$get$(\text{'}/$api$/$message$\text{'},...)`.$

$4.$ Define a custom message in the endpoint's response.

$5.$ Save and start the back$-$end server.

Step $2$: Fetch the message from the front end

$1.$ Go to the front$-$end folder.

$2.$ Open src$/$App$.$js$.$

$3.$ Import the necessary libraries.

$4.$ Add a new state: $`$const $[$customMessage$,$ setCustomMessage$]=$

useState$(\text{'}\text{'})$;$`.$

$5.$ Use $`$useEffect$()`$ to fetch a message from $"/$api$/$message$".$

$6.$ Update $`$customMessage$`$ with the fetched message.

$7.$ Display $`$customMessage$`$ in your app.

Step $3$: Run servers and check

$1.$ Run both back$-$end and front$-$end servers.

$2.$ Open your app in a web browser.

$3.$ You should see the original and custom messages displayed.