Overview
HackerRank Interviews introduces dedicated tiles/entry points for popular Front-end frameworks: Angular and React. It also lets you use an improved IDE to provide a swift and hassle-free interview experience for both interviewers and candidates. This article will walk you through how to use these interview tiles and the latest features of the new Front-end IDE available for some of the flows.
Once you are logged into an interview as an interviewer, you can start the Front-end interview right from the Interview landing page by clicking on the desired framework below.
Here is a quick video to get you started with the Interview tiles.
Or, if you prefer to follow directions, here are the steps for your ready reference.
Steps
Inside the interview landing page, you can find the Angular, and React frameworks, Select one to start an interview based on that framework.
Upon clicking on your desired framework, there are three options to start a Front-end interview.
Start from scratch
In this option, HackerRank Interviews provides you with a simple project for you to use as a starting point. You can modify the project before or during the interview to suit your needs. This option also gets a new, improved collaborative IDE.
Improved IDE Features
Built-In Real-time Preview
- The IDE opens with a built-in preview window on the right pane. Any changes made by you or the candidate can be seen on the preview window in real-time.
- You can hide or unhide it by clicking on the Preview toggle key on the top of the preview window.
Dependency Manager
- On the left pane of the IDE, you will find the Dependencies search bar. Here you can search for your desired dependencies and add them by clicking on add. Dependencies added will be updated in package.json. Below is a snippet that shows the functionality.
External CSS and Javascript Support
- Enter the URL of the external CSS and JavaScript resources in the External Resources address bar placed on the left pane to format and style the UI.
Built-in Dev Tools
- Dev Tools are available in the bottom part of the preview pane. You can click on the Dev Tools option for the respective framework and launch the console.
- The console works as a collaborative tool. The interviewer and the candidate can see their changes in real-time.
Import From Question Library
This will take you to the Library section inside the Interviews. Here you can select a question from HackerRank Library or a question created by your company inside HackerRank Library. Click on Use to launch the question along with the IDE.
Import Your Own Project
This will allow you to select your own starter code for interviews by uploading your own project zip file or adding it from a public Git URL. Save the project with a name to retrieve it in subsequent interviews. Once imported, the projects will load in HackerRank’s Projects IDE.
Note: The maximum file size allowed for the project is 5MB. This flow does not get the new IDE features. This flow is currently in beta. The future of this feature will be based on the feedback we receive from customers like you. The data will stay intact even if the feature is closed.
Once you have uploaded a project, you can find it in the Recently Used section on the landing page whenever you start a new interview.