The app was made with the help of react JS acting as the frontend supporting all the UI components and the API calls to the server were handled with the help of node JS which made further calls to an external API provided by the company which returned the result and it was displayed on the frontend of the application.
1.React JS and its hooks
2.Axios
The form input element inputs the data with the help of controlled components.The form takes input in the form of commma separated roll numbers which is split with the help of string split function and stored in an array state. The array is passed down as a prop to the result component which handles it. The submit button renders the result component only on inputting something in the input box using conditional rendering.
The result component handles the array of roll numbers passed down as props to it by the InputRoll component. It sends the array to the local server created with node js in the form a JS object with "rollNumber" key and the array of roll numbers as the value, with the help of an axios post request. The response to the axios post request is handles by storing it as an array of Pass/Fail string array in a useState variable called resData. The resData array is then converted to a JSX table using the array map function and correlating every result to its corresponding roll number and displaying it as a table.
The Loader components displays a Loading message while the api calls are being executed and since it takes time a loader animation is shown to keep the client a bit engaged while the table which displays the result, is being rendered. The loader animation is conditionally rendered when the resData array has some sort of value input in it which is only possible when the api call is completed and the array is assigned to the state.
1.Node Js
2.Express
3.CORS
The express module is installed in the backend and an express app is created is created. The app is used to handle the POST request that the axios request made from the frontend react app. It takes the incoming array and loops over each roll number and makes an external API call for each roll number. The response from the external API is pushed in an array and at the end of fetching all the results the response is is sent back to the frontend which handles it. The "cors" module was reuired in thenode js/express application because the API calls from the client side was not allowed due to data safety protocols and the calls needed to be made made from the server side using CORS.
