Google FrontEnd Coding Interview: Recreating the AlgoExpert Questions List

Ever wondered what a frontend coding interview at Google is like? This article summarizes a YouTube video featuring Clément Mihailescu (of AlgoExpert fame) interviewing Connor Leech (creator of FrontEnd Expert) on a challenging frontend coding question. The task? Recreate the look and functionality of the AlgoExpert question list page using vanilla JavaScript. Let's dive into the breakdown!

The Challenge: Rebuilding the Questions List

The interview focuses on rebuilding the AlgoExpert question list page. Connor receives prewritten HTML and CSS, and the main task is to use JavaScript to fetch data from an API and dynamically render the questions, grouped by category.

Fetching and Transforming the Data

The first step is to fetch question data from a provided API endpoint. This involves using the fetch API and handling the JSON response.

Next, the raw data needs to be transformed. The API returns a flat list of questions, but the desired output is a data structure grouped by category. This requires iterating through the questions and creating an object where each key is a category name, and each value is an array of questions within that category. This transformation simplifies the rendering process.

Rendering the Categories and Questions

With the data properly structured, the next step is to dynamically create the HTML elements for each category and question. This involves using document.createElement to create div, h2, and h3 elements and setting their appropriate class names and text content.

Each category is rendered as a div with the class "category", containing an h2 heading for the category name and a series of div elements with the class "question" for each question.

Adding Complexity: UserSpecific Submissions and Status Indicators

To make the challenge more realistic, userspecific submission data is introduced. A second API call is made to fetch submission statuses (correct, incorrect, partially correct) for each question. This data is crucial for displaying submission status indicators (green, red, yellow circles) next to each question.

Fetching and Transforming Submission Data

Similar to the question data, the submission data is also transformed. An object is created where each key is the question ID, and the value is the submission status. This allows for efficient lookup of submission statuses when rendering the questions.

To optimize performance, the two API calls (for questions and submissions) are made concurrently using Promise.all.

Rendering Status Indicators

The rendering logic is updated to include status indicators. A new div element with the class "status" is created for each question. Based on the submission status (or lack thereof), an additional class (e.g., "correct", "incorrect", "unattempted") is added to the status div to apply the appropriate styling.

The category headings are also updated to display the number of correctly submitted questions out of the total number of questions in that category.

Code Improvement Suggestions

Even with a successful solution, there's always room for improvement. Connor suggests several ways to clean up the code:

• Consolidate Data Structures: Combine the question data and submission data into a single data structure where each question object includes its submission status.
• Break Down Functions: Divide the createCategory function into smaller, more manageable functions, such as a createQuestion function.
• Use Array Reduce: Consider using Array.reduce to calculate the number of correctly submitted questions, potentially improving readability.

Bonus Challenge: Implementing Random Grouping

As a final challenge, Connor is asked how he would implement a "group randomly" feature, which would shuffle the questions across the columns.

He suggests two possible approaches:

1. Regenerate HTML on Click: When the "group randomly" button is clicked, the HTML could be cleared, and the questions would be randomly assigned to columns and rerendered.
2. Pregenerate Both HTML Structures: Both the categorygrouped HTML and the randomlygrouped HTML could be generated initially. The unused HTML would be hidden with display: none, and clicking the button would simply toggle the visibility of the two structures. This approach is favored for better performance, especially with a large number of questions.

Conclusion

This Google frontend coding interview provides valuable insights into the types of challenges frontend engineers face. The task of dynamically rendering data, handling userspecific information, and optimizing for performance are all crucial skills. Connor's successful solution and his suggestions for code improvement demonstrate his expertise and problemsolving abilities.