My Enterpret Frontend Interview Experience | Remote | 2025

Overview

Enterpret is a company focused on building analytics for natural language processing, aimed at helping product development teams derive insights from customer feedback. They are backed by venture capital firms from Silicon Valley and India, partnering with product-led growth companies.

Interview Rounds

The interview process commenced shortly after an initial screening call. The first round was divided into two segments:

JavaScript & Machine Coding

The first part consisted of JavaScript questions covering:

1. Closures: The candidate was assessed on their understanding of JavaScript closures.
2. SEO: Questions focused on SEO considerations within a React environment. The candidate was expected to know that React, being client-rendered, isn't inherently SEO-friendly and that frameworks like Next.js (SSR) or Gatsby (SSG) can improve SEO through pre-rendering.
3. State Management: The candidate was asked about their experience with state management libraries and to compare useContext with Redux, justifying their choice. A re-rendering problem was presented to evaluate performance understanding in state management. useContext is suitable for smaller applications, while Redux is better suited for larger applications with shared state across many components.

Machine Coding Problem

The second part involved a machine coding challenge. The problem statement was:

Develop a collapsible folder structure UI based on a given JSON input of folders and files, with the following functionality:

• Expand/Collapse folders
• Ability to add new files dynamically

Example Input JSON:

{
  "id": "1",
  "name": "root",
  "isFolder": true,
  "items": [
    {
      "id": "2",
      "name": "public",
      "isFolder": true,
      "items": [
        {
          "id": "3",
          "name": "public nested 1",
          "isFolder": true,
          "items": [
            {
              "id": "4",
              "name": "index.html",
              "isFolder": false,
              "items": []
            },
            {
              "id": "5",
              "name": "hello.html",
              "isFolder": false,
              "items": []
            }
          ]
        },
        {
          "id": "6",
          "name": "public_nested_file",
          "isFolder": false,
          "items": []
        }
      ]
    },
    {
      "id": "7",
      "name": "src",
      "isFolder": true,
      "items": [
        {
          "id": "8",
          "name": "App.js",
          "isFolder": false,
          "items": []
        },
        {
          "id": "9",
          "name": "Index.js",
          "isFolder": false,
          "items": []
        },
        {
          "id": "10",
          "name": "styles.css",
          "isFolder": false,
          "items": []
        }
      ]
    },
    {
      "id": "11",
      "name": "package.json",
      "isFolder": false,
      "items": []
    }
  ]
}

Solution:

The candidate implemented a ReactJS solution with the following structure:

• App.js: Imports and renders the FileExplorer component.

import React from "react";
import FileExplorer from "./FileExplorer";

function App() {
  return (
    <div style={{ padding: "20px" }}>
      <h2>📂 File Explorer</h2>
      <FileExplorer />
    </div>
  );
}

export default App;

• FileExplorer.js: Contains the main logic for rendering the file explorer, including a recursive Folder component.

import React, { useState } from "react";

// Styling
import "./explorer.css";

// Recursive component to render folder & files
const Folder = ({ explorer, onAdd }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  if (explorer.isFolder) {
    return (
      <div className="folder">
        <div
          className="folder-label"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          📁 {explorer.name}
        </div>

        <div className="folder-children">
          {isExpanded && (
            <>
              {explorer.items.map((exp) => (
                <Folder 
                    key={exp.id} 
                    explorer={exp} 
                    onAdd={onAdd} 
                />
              ))}

              <div className="controls">
                <button 
                    onClick={() => onAdd(explorer.id, false)}
                >
                    + File
                </button>
                <button 
                    onClick={() => onAdd(explorer.id, true)}
                >
                    + Folder
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    );
  } else {
    return <div className="file">📄 {explorer.name}</div>;
  }
};

export default function FileExplorer() {
  const [explorerData, setExplorerData] = useState({
    id: "1",
    name: "root",
    isFolder: true,
    items: [
      {
        id: "2",
        name: "public",
        isFolder: true,
        items: [
          {
            id: "3",
            name: "public nested 1",
            isFolder: true,
            items: [
                { 
                    id: "4", 
                    name: "index.html", 
                    isFolder: false, 
                    items: [] 
                },
                { 
                    id: "5", 
                    name: "hello.html", 
                    isFolder: false, 
                    items: [] 
                },
            ],
          },
          {
            id: "6",
            name: "public_nested_file",
            isFolder: false,
            items: []
          },
        ],
      },
      {
        id: "7",
        name: "src",
        isFolder: true,
        items: [
            {
                id: "8",
                name: "App.js",
                isFolder: false,
                items: []
            },
            {
                id: "9",
                name: "Index.js",
                isFolder: false,
                items: []
            },
            {
                id: "10",
                name: "styles.css",
                isFolder: false,
                items: []
            },
        ],
      },
      {
        id: "11",
        name: "package.json",
        isFolder: false,
        items: []
      },
    ],
  });

  // Recursive function to add file/folder
  const insertNode = (tree, folderId, isFolder) => {
    if (tree.id === folderId && tree.isFolder) {
      tree.items.push({
        id: Date.now().toString(),
        name: isFolder ? "New Folder" : "New File",
        isFolder,
        items: [],
      });
      return tree;
    }

    let updatedItems = tree.items.map(
        (obj) => insertNode(obj, folderId, isFolder)
    );
    return { ...tree, items: updatedItems };
  };

  const handleAdd = (folderId, isFolder) => {
    const updatedTree = insertNode(
        { ...explorerData }, folderId, isFolder
    );
    setExplorerData(updatedTree);
  };

  return (
    <div className="explorer">
      <Folder explorer={explorerData} onAdd={handleAdd} />
    </div>
  );
}

• explorer.css: Provides basic styling for the file explorer.

.explorer {
  font-family: monospace;
  font-size: 14px;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 300px;
}

.folder-label {
  cursor: pointer;
  font-weight: bold;
  color: #2a5bd7;
  margin: 4px 0;
}

.folder-children {
  margin-left: 16px;
  border-left: 1px dashed #ccc;
  padding-left: 8px;
}

.file {
  margin: 3px 0;
}

.controls button {
  margin-right: 6px;
  margin-top: 4px;
  padding: 2px 6px;
  font-size: 12px;
  border: 1px solid #888;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
}

.controls button:hover {
  background: #e0e0e0;
}

Key Takeaways

Despite a competent performance in both the JavaScript and machine coding portions, the candidate received a rejection. The competitive nature of the job market, with a high volume of applications and a preference for immediate joiners, was cited as a contributing factor. The candidate's experience underscores the importance of strong fundamentals and problem-solving skills in frontend engineering interviews.