Preparing for frontend interview coding challenge

When you’re done with your technical interview, a team typically gives you some kind of coding challenge. After going to a lot of javascript job interviews, I found that quite often the coding challenges repeat themselves.

CRUD

Often times, interviewers like to see is that you’re capable at programming a real-world CRUD (create-read-update-delete) application using some API. So the task will usually ask you to do the following:

• use some public API,
• search for some items using this API,
• render the list of the items that you’ve found
• update them
• delete them

In order to solve those job coding challenges fast and easy, I recommend you to practice as much as possible. Use restdb or firebase as a backend to allow search and storage of your items and to provide search capabilities of your application.

Chained promises / nested callback

Another type of the task that I recommend you to do is something where you need to chain your http requests. Here’s an example of such a challenge:

The game DOTA has an open API. You can play around the API and then do the following:

• Create a list of public matches, using the https://api.opendota.com/api/publicMatches call
• For each match get a detailed information about it, using
  https://api.opendota.com/api/matches/{match_id} and match_id from the first call. The result will have the information about the players who played in this match.
• For each player that was involved in a match, get a detailed information about this player, using https://api.opendota.com/api/players/{account_id} and account_id of this player taken from the previous call call. The details
  about a player includes the infromation about the heroes that this player uses. We need a list of ids of these heroes.
• Now you have the ids of the heroes of the player. We need to know, how many games did each hero win. Use https://api.opendota.com/api/heroes/{hero_id}/durations call and a hero_id from a previous call.

You can render the result in any way you want, for example as an unordered list:

• Match 1:
  • Player 1 of Match 1:
    • Hero 1 of Player 1 of Match 1: the hero has 5 wins
    • Hero 2 of Player 1 of Match 1: the hero has 6 wins
  • Player 2 of Match 1:
    • Hero 1 of Player 2 of Match 1: the hero has 0 wins
    • Hero 2 of Player 2 of Match 1: the hero has 16 wins
• Match 2:
  • Player 1 of Match 2:
    • Hero 1 of Player 1 of Match 2: the hero has 50 wins
    • Hero 2 of Player 1 of Match 2: the hero has 0 wins
  • Player 2 of Match 2:
    • Hero 1 of Player 2 of Match 2: the hero has 10 wins
    • Hero 2 of Player 2 of Match 2: the hero has 46 wins
• Match 3:
  • …

Bonus tasks

• Render any information you find interesting, e.g.
  the avatars of the people, their ranks on a leaderboard.
• You can also add an indication of a progress that a certain information
  is not loaded yet.
• Go crazy on styling, use Material Design and Bootstrap, make it pretty
• Add a update button to the calls where the update makes sense.
• Do an automatic update without reloading the page, e.g. every 5 minutes.
  Show the time passed since the previous update.
• Handle the errors. Make sure that the whole application doesn’t crash if
  there’s an error in HTTP request.

Explanation and purpose

The main purpose of this coding challenge is to help you to understand how to make a
chain of asynchronous http calls, show you what’s a callback hell and a promise hell. A lot of javascript interview questions and coding challenges are about promises and callback hell.
You can solve this task using one of the following methods:

• callbacks and XMLHttpRequest
• XMLHttpRequest wrapped in promises
• fetch/axios wrapped in promises
• fetch/axios wrapped in async/await