Frontend Interview Experience at Mindtickle

Overview

This document details a frontend interview experience at Mindtickle. The process rigorously evaluated candidates across a range of frontend skills, from JavaScript fundamentals to system design principles and UI development expertise. This case study aims to provide valuable insights for individuals preparing for similar roles.

Interview Rounds

Round 1 (Part 1): JavaScript Fundamentals

This round primarily focused on JavaScript concepts and coding proficiency. The candidate faced challenges that tested their understanding of core language features.

1. Implement a Polyfill for Array.prototype.reduce

The candidate was tasked with creating a custom reduce function that mirrors the behavior of the built-in method.

Array.prototype.myReduce = function (callback, initialValue) {
    if (this == null || typeof callback !== 'function') {
        throw new TypeError('Array.prototype.myReduce called on null or undefined');
    }
    let accumulator = initialValue !== undefined ? initialValue : this[0];
    let startIndex = initialValue !== undefined ? 0 : 1;
    
    for (let i = startIndex; i < this.length; i++) {
        accumulator = callback(accumulator, this[i], i, this);
    }
    return accumulator;
};
// Example usage
const arr = [1, 2, 3, 4];
const sum = arr.myReduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 10

2. Implement a Currying Function (Infinite Arguments)

The challenge involved implementing a currying function, a technique where a function accepts arguments one at a time.

function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        } else {
            return (...moreArgs) => curried(...args, ...moreArgs);
        }
    };
}
// Example usage
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // Output: 6

3. Implement a Memoized Function

The candidate was asked to implement memoization to optimize function performance by caching results.

function memoize(fn) {
    const cache = new Map();
    return function (...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}
// Example usage
const factorial = memoize((n) => (n <= 1 ? 1 : n * factorial(n - 1)));
console.log(factorial(5)); // Output: 120

Round 1 (Part 2): Machine Coding

This round centered on building a UI component based on a provided design. The assessment focused on the ability to handle edge cases, write modular code, and implement a responsive UI.

Task: Design a calculator following the provided guidelines.

// Example React Calculator Component
import React, { useState } from "react";

const Calculator = () => {
  const [input, setInput] = useState("");
  const handleClick = (value) => {
    setInput((prev) => prev + value);
  };
  const calculateResult = () => {
    try {
      setInput(eval(input).toString());
    } catch {
      setInput("Error");
    }
  };
  return (
    <div className="calculator">
      <input type="text" value={input} readOnly />
      <div className="buttons">
        {["1", "2", "3", "+", "4", "5", "6", "-", "7", "8", "9", "*", "C", "0", "=", "/"].map((char) => (
          <button key={char} onClick={() => (char === "=" ? calculateResult() : char === "C" ? setInput("") : handleClick(char))}>
            {char}
          </button>
        ))}
      </div>
    </div>
  );
};
export default Calculator;

Round 2: JavaScript Concepts & JSON Formatting

This round involved discussions on advanced JavaScript concepts, along with a practical task related to JSON manipulation.

Task: JSON Prettifier

function prettifyJSON(jsonString) {
    try {
        const parsed = JSON.parse(jsonString);
        return JSON.stringify(parsed, null, 4);
    } catch (error) {
        return "Invalid JSON";
    }
}

// Example usage
const inputJSON = '{"name":"John","age":30,"city":"New York"}';
console.log(prettifyJSON(inputJSON));
/* Output:
{
    "name": "John",
    "age": 30,
    "city": "New York"
}
*/

Round 3: JavaScript System Design — Synchronous Task Runner with Concurrency

The candidate was asked to design a synchronous task runner with concurrency control.

class TaskRunner {
    constructor(concurrency = 1) {
        this.tasks = [];
        this.concurrency = concurrency;
        this.runningTasks = 0;
    }

    addTask(task) {
        this.tasks.push(task);
    }
    async runNext() {
        if (this.tasks.length === 0 || this.runningTasks >= this.concurrency) {
            return;
        }
        this.runningTasks++;
        const task = this.tasks.shift();
        await task();
        this.runningTasks--;
        this.runNext();
    }
    run() {
        for (let i = 0; i < this.concurrency; i++) {
            this.runNext();
        }
    }
}
// Example usage
const runner = new TaskRunner(2); // Allows up to 2 concurrent tasks
runner.addTask(() => new Promise(resolve => setTimeout(() => {
    console.log("Task 1 completed");
    resolve();
}, 1000)));
runner.addTask(() => new Promise(resolve => setTimeout(() => {
    console.log("Task 2 completed");
    resolve();
}, 500)));
runner.addTask(() => new Promise(resolve => setTimeout(() => {
    console.log("Task 3 completed");
    resolve();
}, 700)));
runner.run();

Key Takeaways

The Mindtickle frontend interview process emphasizes a strong foundation in JavaScript, practical coding skills, and an understanding of system design principles. Candidates should be prepared to demonstrate their ability to solve problems, write clean and efficient code, and design UI components.