Senior Software Engineer — Frontend Interview experience at Headout

Overview

The interview process for the Senior Software Engineer - Frontend position at Headout was designed to assess a candidate's technical skills and experience through a series of three rounds. These rounds covered JavaScript coding, system design, and a hiring manager interview. The goal was to evaluate the candidate's ability to build user-centric interfaces, solve complex problems, and demonstrate an ownership mindset.

Interview Rounds

Round 1: JavaScript Coding Challenge – Real-Time Movie Search & Filter (Vanilla JS)

This round focused on assessing the candidate's proficiency in vanilla JavaScript, HTML, and CSS. The candidate was tasked with building a movie search component with the following requirements:

• Rendering an unstyled list of movies.
• Implementing real-time search using substring matching.
• Adding basic styling to display movies as cards.
• Enabling genre-based filtering.
• Supporting subsequence matching (e.g., input 'hp' should match 'Harry Potter').

The candidate fetched movie data using fetch() on page load and stored it in memory. They created an input box and dropdown for genre filtering using plain HTML and added event listeners to update the filtered list on each change. The filtering logic was implemented using JavaScript loops and conditionals. Substring matching used movie.title.toLowerCase().includes(query), and subsequence matching utilized a custom function. Matched substrings were highlighted using a <span> tag with bold styling. The movie cards were styled with basic CSS, including poster images, movie titles, years, and genres.

Challenges included efficiently handling both substring and subsequence matching, maintaining UI responsiveness without frameworks, and structuring the code without module bundlers or build tools.

Round 2: System Design – Building Excel from Scratch

This round was a system design session focused on designing an Excel-like spreadsheet application, emphasizing data structures and performance. Key requirements included:

• Data Structure Design: Efficiently storing and retrieving cell values, supporting formatting at each cell, and handling formulas and references across the spreadsheet.
• Formula Support: Supporting complex expressions like =SUM(A1:A20, B1, C1:C22), including cell ranges, individual cell references, and multiple arguments inside a single function.
• Cell Dependencies: Automatically triggering recalculation of a cell (e.g., A1) when its dependent cells (e.g., B1 and C1) are updated.
• Performance Optimization: Supporting large spreadsheets and avoiding unnecessary recomputation through dependency tracking.

The candidate proposed a 2D map structure to store raw cell values and formulas separately, with each cell object holding either a raw value or a formula. A dependency graph was built with cells as nodes and directed edges pointing to dependent cells. For formulas like SUM(A1:A20, B1, C1:C22), a parser was used to extract referenced cells and ranges, which were then linked to the formula cell in the dependency graph. Topological sorting was implemented to handle recalculations in the correct order. A cache system with dirty flags was suggested to avoid repeated computation.

The candidate did not cover circular dependency detection in depth and could have discussed formula parsing and security implications in more detail. Large-scale performance optimizations were also slightly rushed.

Round 3: Hiring Manager Round – Deep Dive into Experience

This round was a conversational discussion focusing on the candidate's experience, technical ownership, and collaboration with cross-functional teams. Topics included:

• Project contributions and ownership, highlighting improvements in performance, scalability, or user experience.
• Responsibilities in the current company, including frontend architecture, performance optimizations, and collaboration with backend teams.
• Technical discussions on the candidate's projects to understand the thought process behind technical decisions.

The interviewer assessed the candidate's depth of knowledge and ownership mindset.

Key Takeaways

The interview process at Headout comprehensively evaluated the candidate's frontend engineering skills. It covered a range of topics, from JavaScript fundamentals and UI/UX considerations to system design principles and collaborative experience. The process emphasized the importance of both technical expertise and a proactive, ownership-driven approach to problem-solving.