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;

Filename: components/StarRatingWidget.js

import React, { useState } from 'react';
import Star from './Star';

const StarRatingWidget = ({ totalStars = 5 }) => {
  const [rating, setRating] = useState(0);        // Selected rating
  const [hoverRating, setHoverRating] = useState(0); // Rating on hover

  const handleClick = (e, index) => {
    const isHalf = e.nativeEvent.offsetX < e.target.offsetWidth / 2;
    const newRating = index + (isHalf ? 0.5 : 1);
    setRating(newRating);
  };

  const getFillState = (index, ratingValue) => {
    if (index + 1 <= ratingValue) return { filled: true };
    if (index + 0.5 === ratingValue) return { half: true };
    return {};
  };

  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      {[...Array(totalStars)].map((_, index) => {
        const displayRating = hoverRating || rating;
        const { filled, half } = getFillState(index, displayRating);

        return (
          <Star
            key={index}
            filled={filled}
            half={half}
            onClick={(e) => handleClick(e, index)}
            onMouseMove={(e) => {
              const isHalf = (
                  e.nativeEvent.offsetX < e.target.offsetWidth / 2
              );
              setHoverRating(index + (isHalf ? 0.5 : 1));
            }}
            onMouseLeave={() => setHoverRating(0)}
          />
        );
      })}
    </div>
  );
};

export default StarRatingWidget;

Key Takeaways

• High Competition: The frontend engineering job market is highly competitive, and even a minor oversight or missed edge case can lead to rejection.
• Emphasis on Edge Cases: Apple places significant importance on handling edge cases and ensuring code optimization.
• Thorough Evaluation: Apple's interview process is thorough, and candidates should be prepared to demonstrate a strong understanding of frontend principles and best practices.
• Compensation Expectations: Companies like Apple offer competitive compensation packages, reflecting the high demand for skilled frontend engineers.