🚀 My Tekion Frontend Engineer Interview Experience (2025) | Software Engineer II

📌 Role: Software Engineer II (Frontend)
🏢 Company: Tekion Corp
🎯 Topics Covered: JavaScript DSA, Currying, Polyfills, Machine Coding, System Design
🗓️ Total Rounds: 4 (DSA, Machine Coding, LLD + HLD, HM Discussion)

🧠 Round 1: Data Structures & Algorithms

1️⃣ Polyfill for bind() Method in JavaScript

📌 Concept Tested: Understanding of this, closures, and function binding.

// ✅ Polyfill for Function.prototype.bind
Function.prototype.myBind = function (thisContext, ...argsArray) {
  const parentFunction = this; // 👉 Store the original function (the one we're binding)

  // 👇 Return a new function that captures both initial & later arguments
  return function bindedFun(...funArgs) {
    // 👇 Use apply() to call the original function with 'thisContext' and combined arguments
    return parentFunction.apply(thisContext, [...argsArray, ...funArgs]);
  };
};

const obj = {
  name: 'Gourav',
};

function test(age) {
  console.log(this.name, age); // 👉 'this' refers to the bound context
}

let bindedFunc = test.myBind(obj); // 🔗 Bind 'obj' as the context
bindedFunc(29); // ✅ Output: Gourav 29

💡 Key Takeaways

• apply(context, args) allows dynamic function invocation with custom this.
• The polyfill ensures:
  • this context is fixed.
  • Arguments can be passed in two stages: at bind time and at call time.
• This is helpful in React event handlers, callbacks, and more.

💡 JavaScript Tip: .bind() returns a new function with a fixed this context. Closures help preserve context across invocations.

2️⃣ Currying Function in JavaScript

📌 Concept Tested: Higher-order functions, recursion, and argument handling.

// ✅ Generic Curry Function in JavaScript
function curry(func) {
  // Returns a new function that handles currying
  return function myCurried(...args) {
    // 👉 If enough arguments are provided, call the original function
    if (args.length >= func.length) {
      return func(...args); // ✅ Call original function with collected args
    } else {
      // 🔁 Not enough args yet – return a function that takes more
      return (...args2) => myCurried(...args, ...args2); // 🔁 Keep collecting
    }
  };
}

function test(a, b, c) {
  return a + b + c; // Simple function that takes 3 arguments
}

const curriedFunction = curry(test);

console.log(curriedFunction(1, 2, 3));     // ✅ Output: 6
console.log(curriedFunction(1, 2)(3));     // ✅ Output: 6
console.log(curriedFunction(1)(2)(3));     // ✅ Output: 6

🧠 JavaScript Tips

• func.length gives the number of expected parameters for a function.
• This technique is useful when:
  • You're building functional pipelines.
  • You want partial application (pre-filling some arguments).
• Currying helps make your code more modular and reusable ♻️

💡 Note: Currying transforms a multi-argument function into a series of unary functions.

3️⃣ Machine Coding – 🕒 Stopwatch Component (React)

📌 Functionalities:

• Play / Pause ⏯️
• Stop ⏹️
• Reset 🔄

💡 Tip: Use useRef to persist timers and useEffect for cleanup.

🧩 Round 2: Low-Level Design (LLD)

1️⃣ Word Guess Game 🟩🟨⬛ (Similar to Wordle)

📌 UI-Driven Machine Coding Task

Asked:

• Error & success handling logic
• Grid rendering performance
• Keyboard UX design

💡 Tip: Use a 2D array to represent the board state, map user input to that structure, and validate against the correct word using character-wise comparisons.

2️⃣ Polyfill for componentDidUpdate() in Functional Components

import { useEffect, useRef } from 'react';

/**
 * 🔄 useComponentDidUpdate
 * A custom React hook that mimics `componentDidUpdate` lifecycle behavior.
 * It skips the initial render and only runs the callback on updates.
 *
 * @param {Function} callback - Function to be called on update.
 * @param {Array} deps - Dependency array to watch for changes.
 */
function useComponentDidUpdate(callback, deps) {
  const hasMounted = useRef(false); // 🧠 Keeps track if component has mounted

  useEffect(() => {
    if (hasMounted.current) {
      // ✅ Run callback only on updates (not initial mount)
      callback();
    } else {
      // 🛑 Skip the first render
      hasMounted.current = true;
    }
  }, deps); // 👀 Watch these dependencies
}

💡 Note: Mimics class-based componentDidUpdate() for functional components by skipping the first render.

🏗️ Round 3: High-Level Design (HLD)

1️⃣ tekion.com Performance Optimization 🌐

• Lazy Loading & Code Splitting – with React.lazy and dynamic imports
• SSR & Caching – Reduce FCP & TTFB
• CLS, LCP, TBT fixes – Optimize image loading, reduce heavy JS
• Debounce API Calls & use IntersectionObserver for lazy UI

2️⃣ Machine Coding: 🧱 Dynamic Grid Component

📌 Build a reusable grid based on:

• Row/column input
• Efficient rendering on large data

💡 Use memoization (React.memo, useMemo) and virtualization (react-window) to handle large datasets.

🤝 Round 4: Hiring Manager Discussion

Topics Discussed:

• Current architecture & tech stack at my company
• System Design for 🔍 Flipkart Search Bar (pagination, throttling, autocomplete)

• Verbal Design of 🔔 LinkedIn Notification Section
• Real-world conflict handling with dev teams
• My motivation to join Tekion

💸 Offer Details

Hey there from LearnYard! 👋

Glad to see you exploring the free content from our course! We’ve shared 10 valuable articles at no cost to help you get a real feel of what’s inside.

If you’ve found these helpful, we’d love to know! 💬
Share your thoughts or key takeaways on LinkedIn, Twitter, or Instagram — and don’t forget to tag Gourav Hammad & Mohammad Fraz. We’ll personally respond to your post!

Thanks for being part of the LearnYard journey. Keep learning, keep growing! 🚀

Loved the free content? Want access to the full course — for free? 💸

Here’s how: share the course with your friends using your affiliate link (you’ll find it on your profile or home page), and earn 20% commission on each sale.

Just 4–5 sales and you’ll recover the full course price of ₹999/- 🔁
So why wait? Start sharing, start earning, and unlock the rest of the course effortlessly! 🛠️📈

💡 Tips to Crack the Tekion Interview

• Master JavaScript fundamentals: closures, this, promises, async/await
• Practice Polyfills for core JS methods (bind, call, apply, debounce, throttle)
• Build and refactor real-world UI components (e.g., Stopwatch, Grid, Wordle)
• Focus on DSA with JavaScript — arrays, strings, maps, recursion
• Be ready for machine coding and system design discussions
• Show clarity in code structuring, naming, and performance optimizations
• During HM round: Highlight ownership, decision-making, and team collaboration

📚 Recommended Topics to Prepare

• JavaScript ES6+ (spread, rest, destructuring, arrow functions)
• React Hooks (useEffect, useMemo, useCallback, custom hooks)
• Component lifecycle and render optimizations
• Low-Level Design (LLD): Modals, Search Bar, Grid, Wordle
• High-Level Design (HLD): Architecture of scalable apps
• Problem Solving with recursion, sliding window, and frequency maps
• Event loop, microtasks/macrotasks, and async behavior

📢 Hashtags for Visibility

#TekionInterview #FrontendInterview #JavaScriptDSA #ReactMachineCoding #SystemDesignFrontend #TechInterviewTips #FrontendEngineering #WebDevelopment #JavaScriptMastery #TechJourney #LearnYard