I recently spent some time preparing for Front End interviews and found the suggested ‘Software Engineer’ interview prep pretty lacking: the common advice is to spend most of your time grinding Leetcode and, for Front End interviews, get ready for countless trivia-style questions.

After half a dozen interviews with Bay Area companies, I personally experienced just one Leetcode-style algorithmic question (a pretty basic graph question) and zero FE trivia questions.

My interview experience was roughly: 25% culture fit, 25% system design/experience (e.g. discussing a project I worked on and choices I made), and 50% practical Front End coding.

This also matches my experience as an interviewer at my previous company, where we phased out both algorithmic and trivia questions (in favor of practical FE coding) after finding they were poor indicators of future success.

IMPORTANT NOTE: your experience may vary, especially with companies based in other states or countries!

I feel like there’s a huge lack of practice questions suited for practical Front End interviews, so I wanted to share a handful of my favorite Front End coding practice questions (with slight variations) that came up for me. But first, a few tips for getting the most out of these practice questions:

  • Use codepen.io – I was asked to use this in nearly every interview. Get familiar with the environment: shortcuts, layouts, how to add libraries, etc

  • Read the question prompt, and think about what clarifying questions you might ask in a real interview (e.g. unclear requirements, edge cases you might need to account for)

  • Run through the question once with a time limit. After completing, review your approach: what went well, did you get stuck on any specific parts, what could be improved, etc

  • Complete the question and think about how you could refactor it for readability, extensibility, re-usability, and performance

  • Come back to the question later and try it again, but this time using a different approach. e.g. vanilla JS vs framework, React class components vs hooks

Front End coding practice questions

Data fetching and visualization

  • Prompt: retrieve a list of numbers from an endpoint, then plot a histogram showing the frequency of each number in the list. The histogram should have appropriately numbered x and y axes

In the example below, the list contained 24 ones, 17 twos, 30 threes, and so on.

r/webdev - I wanted to share some Front End practice interview questions, after interviewing and finding it nothing like Leetcode
  • Time limit: 40 minutes

  • Hints

    • There are three main parts to this question: fetching the data, manipulating the data (i.e. into a format that can be visualized as a histogram), and drawing the histogram. Start by considering at a high-level how each of these will work

    • After fetching the data, you should have an array of numbers. Think about what format you need the data to be in to make it easier to draw the chart

    • Consider using reduce to convert your list of numbers to an object of { number: frequency of that number }

    • How are you going to draw the chart? If you decide to use plain HTML with some styling, think about what the HTML structure will look like (e.g. how will you draw the axis, how will you dynamically size the bars, etc)

  • Possible extensions

    • Ensure your histogram displays correctly with extremes, e.g. how does it handle very high frequencies of a single number, what about negative numbers?

    • Use different colors for each bar in the histogram

    • Add a button to refetch/regenerate the data (the endpoint will return random numbers each time)

    • On hovering over a bar in the histogram, change the color and show a label above the bar with the precise value

    • You may notice that the random.org URL takes query parameters that will change the numbers generated: include a form that will dynamically generate the URL to provide a different set of numbers (e.g. more numbers, min/max value)

Image carousel

  • Prompt: create an image carousel that cycles through images fetched from an endpoint (displaying a new image every 3 seconds), and allows the user to skip to the next/previous image

The example endpoint contains images within the response as follows:

{
  data: {
    children: [
      {
        data: {
          url_overridden_by_dest: "*.jpg"
        }
      },
      ...
    ]
  }
}

Below is a mockup of what the UI should look like (the carousel should be horizontally centered, with at least some top margin):

r/webdev - I wanted to share some Front End practice interview questions, after interviewing and finding it nothing like Leetcode
  • Time limit: 60 minutes

  • Hints

    • As with the previous question, start by thinking about what the main parts of this question are and how to tackle them at a high-level: fetching the data, getting the image URLs from the response, displaying an image, automatically cycling through the images, and allowing the user to go forward and back through the images

    • There are two ways you could start: stub the endpoint and fully build out the component first (e.g. create a static array of image URLs to use for testing), or fetch the data first and then build the component

    • Make sure that the data fetching and extraction of the image URLs is cleanly separated from the code that displays the interactive carousel component. Ideally, the carousel component itself should just accept an array of image URL strings

  • Possible extensions

    • When the user presses next/previous, make sure that the timer resets

    • After the last image, make sure the image cycles back to the first

    • Add image selector circles. The highlighted circle should have the same index of the current image, and the user should be able to click on a circle to jump to that image

r/webdev - I wanted to share some Front End practice interview questions, after interviewing and finding it nothing like Leetcode
  • Allow the user to select from a (static) list of subreddits to change the cycled images

  • Allow the user to see top images from the day, week, month, year, or all time by dynamically appending a query param to the URL: e.g. https://www.reddit.com/r/aww/top/.json?t=day
    (or t=week, t=month, t=year, t=all)

Snake game

r/webdev - I wanted to share some Front End practice interview questions, after interviewing and finding it nothing like Leetcode
  • Time limit: 60 minutes

  • Hints

    • This is a pretty open-ended question with many different approaches (e.g. HTML canvas, vanilla JS with styled DIVs, framework). Think about the tradeoffs of each, and how you can decouple the model (the game state, logic, and main loop) from the view (how you take that state and render it to the screen)

    • Begin by thinking about how you will represent the game state

    • One simple way to represent the game state would be: current apple position as {x,y}, snake body as an array of positions [{x,y},{x,y},…], and score as a number

    • Build the features very incrementally (planning the order in which you’ll tackle them), and test constantly. Start by just getting a single square moving around the grid

  • Possible extensions

    • When the game is over, display a game over message with the score and allow the user to press space to restart

    • As well as the current score, display the player’s high score (you could also persist this with localStorage

    • Before the game starts, display an intro message (e.g. game title, controls, high score) and wait for the player to press a key

    • Consider ways to increase the difficulty over time (or add selectable difficulty modes): increasing the speed of the snake, adding random obstacles

    • At this point, you have a pretty complete game: congratulations!

More questions?

I have a bunch more practice questions, but it takes a little time to rewrite them in such a way as to test the same concepts and be of similar scope, while also being different enough from the original question asked (while I didn’t sign any NDAs, I have been on the other side of the interviewing fence and it’s frustrating when your exact question appears on Glassdoor).

If even a few people find these practice questions helpful, I’ll spend some time writing and sharing more. Also, if anyone knows of a good repository of Front End practice questions then please share!



Source link

Write A Comment