My Apple Frontend Interview Experience | 85 LPA | Hyderabad

Overview

This document details a frontend engineer's experience interviewing at Apple for a role in Hyderabad, with a target compensation of 85 LPA. The interview process included a screening round and a technical round focused on machine coding. While the candidate successfully built a working solution during the technical round, they were ultimately not selected to move forward.

Interview Rounds

Screening Round:

The initial screening round was conducted on Apple's platform. Further details about this round are available in a separate article (linked in the original post).

Round 1: Machine Coding

• Format: The round was a pure machine coding test. It began with a brief introductory conversation.
• Interviewer: The interviewer had approximately 9 years of experience in frontend development and was described as humble and approachable.
• Technology Choice: The candidate was given the freedom to choose any framework, including ReactJS or VanillaJS.
• Problem Statement: The candidate was tasked with building a star review system. The system should allow users to click on a star, filling all stars up to the selected point, similar to review systems on e-commerce websites.
• Edge Cases: The candidate was instructed to consider the following edge cases:
  • Half-filled stars
  • Scalability to 1000 stars
  • Code optimization
• Candidate's Solution: The candidate implemented a working solution using filled and unfilled images instead of emojis. Due to time constraints, the half-filled star functionality was not fully implemented. The candidate verbally explained their approach to handling this case.

Correct Working Solution:

The following code represents a working solution for the star rating widget problem.

Filename: components/Star.js

import React from 'react';

const Star = ({ filled, half, onClick, onMouseMove }) => {
  // Decide which star to show
  let starChar = '☆';
  if (filled) starChar = '★';
  else if (half) starChar = '⯨'; // or use CSS for better visuals

  return (
    <span
      onClick={onClick}
      onMouseMove={onMouseMove}
      style={{
        cursor: 'pointer',
        color: filled || half ? '#ffc107' : '#e4e5e9',
        fontSize: '32px',
        transition: 'color 200ms',
        userSelect: 'none',
      }}
    >
      {starChar}
    </span>
  );
};

export default Star;