There is no standard format for technical interviews, but a common one is a coding challenge done on the spot. For a front end developer this will either be an algorithms and data structures challenge, or a small react app. In this article I will explain how to prepare for one of these interviews using ChatGPT.
For the environment I would recommend using CodePen. Often the businesses will prepare a sandbox in advance (either CodePen or CodeSandbox) but they may not, so it’s good to get familiar with an online editor and especially how to get a React app working from scratch.
For a React interview challenge:
Create a CodePen account and create a new pen:
Open the settings and change the JS preprocessor to TypeScript (or Babel) to process the JSX:
Scroll down in the JS settings and add React and ReactDOM:
This will add them to your pen.
Next you need to create the html element that your react app will mount to, the React app itself and call the render function with ReactDOM:
Here is a minimum working example of a react app to fork or copy, but I would recommend memorizing this setup.
Next sign into ChatGPT and ask it the following:
I am interviewing for a javascript react developer position. Give me a live coding problem
ChatGPT then gave me a list of acceptance criteria for a counter app. This is very realistic for a coding interview:
Syntax highlighting and code completion is very different/minimal when compared with an IDE like VSCode which is why it’s worth getting used to the debugging experience in a sandbox before the interview. The button to display the console is on the toolbar at the bottom.
Keep asking ChatGPT for more by asking “Give me another” and get more specific with the prompts if you want to practice specific areas.
For example, I asked it:
Give me another, with side effects
It gave me the prompt to fetch a random quote and display it.
For a test API to connect to I recommend JSONPlaceholder
It has a few endpoints which you can query and even post and delete.
For my challenge I used the album endpoint to achieve a similar result without a real quote API.
For algorithms challenges, the setup on CodePen is simpler. You only need to call your function in a console log. No need for any special settings.
In ChatGPT you can ask:
I am interviewing for a JavaScript React developer position. Give me a live coding algorithms problem
It is good practice in the interview to also comment the expected result next to the statement, as if it were a unit test.
You can ask ChatGPT to give you an ideal answer to compare your function to at the end of the challenge.
Good luck!
