# Leveraging ReactJS in HackerEarth Assessment Environment

DevFeed: [Leveraging ReactJS in HackerEarth Assessment Environment](<https://devfeed.tech/articles/leveraging-reactjs-in-hackerearth-assessment-environment-20007.md>)

Original publisher: [Read original article](<http://engineering.hackerearth.com/2017/03/07/leveraging-reactjs-in-hackerearth-assessment-environment/>)

Published: 2017-03-07T00:00:00Z

Content type: article

Language: en

Sources: [HackerEarth](<https://devfeed.tech/sources/hackerearth.md>)

Topics: [reactive](<https://devfeed.tech/topics/reactive.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Programming](<https://devfeed.tech/topics/programming.md>), [HTML](<https://devfeed.tech/topics/html.md>), [HTTP](<https://devfeed.tech/topics/http.md>), [Ajax](<https://devfeed.tech/topics/ajax.md>), [Code](<https://devfeed.tech/topics/code.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [html](<https://devfeed.tech/tags/html.md>), [http](<https://devfeed.tech/tags/http.md>), [make](<https://devfeed.tech/tags/make.md>), [programming](<https://devfeed.tech/tags/programming.md>), [reactive](<https://devfeed.tech/tags/reactive.md>), [render](<https://devfeed.tech/tags/render.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

This article explains how HackerEarth uses ReactJS to build a reactive programming assessment interface. It describes the existing architecture, including question navigation, HTTP and Ajax requests, server-rendered HTML, a code editor, and recording coding sessions as replayable frames. The supplied text ends while introducing implementation pain points.

## Source excerpt

ReactJS, as the name suggests, helps create reactive (read interactive) UIs. If we have a UI with many interactive elements and on each interaction a bunch of elements change, ReactJS efficiently updates and renders the required elements. At HackerEarth, one such UI is the programming assessment environment. Programming assessment environment is one of the most critical products of HackerEarth. The mockup below is a broad idea of what it is composed of. The system in place Let's briefly understand the components in the mockup above. There are three major components: The left pane This is the primary navigational part of the interface. This controls which question is visible in the right pane. It enables candidates to switch between questions as per their convenience. The upper right pane This contains the detailed description of the question which is selected in the left pane. The lower right pane This is a medium for the candidate to submit answer to the question above. As of now, we are assuming that we have a programming question. So let's have a Code Editor here. Now, let's take a look at how things work in the current architecture. In the first HTTP response, we render all the questions in the left pane. There's no html in right pane. On selecting a question in left pane, an ajax call is made to fetch the data. The call returns a pre-rendered html of the entire question description, and it provides the candidate with a way to make further ajax calls to load the code editor. We won't get into the details of each part of the question description, however, for now, let's assume that it is composed of many smaller components. When the candidate is ready to attempt the question, another ajax call is made to render the code editor. We have extended ace editor and written a wrapper over it to fit in our requirements. One such requirement is to record every keystroke and create a frame for it. Later, we can play all those frames and see the entire code editing session