Skip to main content
⏱ 0:01est. 30 min

Apollo

/**
 https://www.glassdoor.co.in/Interview/Apollo-io-Senior-Frontend-Engineer-Interview-Questions-EI_IE1468521.0,9_KO10,34.htm
 During the interview, I was tasked with designing a todo app, adhering to specific guidelines. Additionally, there was a live debugging session for a demo app. The High-Level Design (HLD) round emphasized excellent web practices and SEO considerations.

 https://www.glassdoor.co.in/Interview/Apollo-io-Senior-Frontend-Developer-Interview-Questions-EI_IE1468521.0,9_KO10,35.htm
 Design a todo. Implementation speed === production-readiness


 two easy and one hard algorithm problem.
 Algorithm problems and create app from scratch.


 How would you deal with abstraction? (Provide examples)

 https://www.glassdoor.co.in/Interview/Apollo-io-Front-End-Engineer-Interview-Questions-EI_IE1468521.0,9_KO10,28.htm
 Online Coding Round with React Application and problem solving, Assignment to build a player with transcription, live-coding to build a todo app

https://www.glassdoor.co.in/Interview/Apollo-io-Senior-Software-Engineer-Interview-Questions-EI_IE1468521.0,9_KO10,34.htm
There was an initial screening round on Coderbyte - 2 medium leetcode problems
Next was a Data Structure and Algorithms onsite virtual round.
Question was again leetcode question - Largest Sum Contiguous Subarray (Kadane’s Algorithm)
So basically, to clear the first round, practice leetcode questions, and that's it.

Next was a system design round, but it doesn't look like I'll be moving forward.


Normal system design questions related to scale and web facing application were asked

5 Rounds: - Motivation & Reflection - 2 Rounds of DSA - medium level difficulty - System Design - both high & low level - Value & Competency - culture fitment
DSA problems were based on DFS and stacks

You have two strings. Both strings are series of numbers.
Implement a function to check whether the second string is a valid pop sequence of the first string.
Ex.
"12345" "32145"
"12345" "54321"
"12345" "21543"

*/

// https://codesandbox.io/p/sandbox/interesting-bose-srmhwx
// https://docs.google.com/document/d/1WVfJM3hUylAZndupHv9oYwvfvUvSQzoOj1l5fv8pWzA/edit#heading=h.xr7evvrbkxep
// https://couds.github.io/react-bulma-components/?path=/docs/components-dropdown--overview
// https://bulma.io/documentation/elements/button/
// https://todomvc.com/examples/vanilla-es6/
// App.jsx
import "bulma/css/bulma.min.css";
import "./styles.css";

import React, { useReducer } from "react";
import { Form, Box, Section, Button, Dropdown } from "react-bulma-components";
import { v4 as uuidv4 } from "uuid";

import TodosList from "./TodosList";

const Actions = {
  ADD_TODO: "ADD_TODO",
  DELETE_TODO: "DELETE_TODO",
  TOGGLE_TODO: "TOGGLE_TODO",
  CLEAR: "CLEAR",
  FILTER: "FILTER",
};

function reducer(state, action) {
  switch (action.type) {
    case Actions.ADD_TODO: {
      // Check the description
      state.todos = state.todos.concat([
        {
          id: uuidv4(),
          description: action.payload,
          done: false,
        },
      ]);

      break;
    }

    case Actions.CLEAR: {
      const pendingTodos = state.todos.filter((todo) => !todo.done);
      state.todos = [...pendingTodos];
      break;
    }

    case Actions.DELETE_TODO: {
      state.todos = state.todos.filter((todo) => {
        return todo.id !== action.payload;
      });

      break;
    }

    case Actions.FILTER: {
      const filterValue = action.payload;
      switch (filterValue) {
        case "active":

        case "all":
      }
    }

    case Actions.TOGGLE_TODO: {
      const todo = state.todos.find((_todo) => _todo.id === action.payload);

      if (todo) {
        todo.done = !todo.done;
      }

      break;
    }

    default: {
      break;
    }
  }

  return {
    ...state,
  };
}

const TodoFooter = ({ count, clearHandler, filterListHandler }) => {
  const handleClear = () => {
    clearHandler();
  };

  const filters = [
    {
      label: "All",
      value: "all",
    },
    {
      label: "Active",
      value: "active",
    },
    {
      label: "Completed",
      value: "completed",
    },
  ];

  const filterList = (item) => {
    console.log(item);
    filterListHandler(item);
  };

  return (
    <div className="todos-footer">
      <div className="pending-info">
        <div className="stat">{count}</div>
        items left
      </div>
      <div>
        <Dropdown
          closeOnSelect={false}
          color=""
          label="All"
          onChange={filterList}
        >
          {filters.map((filter) => {
            return (
              <Dropdown.Item
                key={filter.value}
                renderAs="a"
                value={filter.value}
              >
                {filter.label}
              </Dropdown.Item>
            );
          })}
        </Dropdown>
      </div>
      <div>
        {count ? (
          <button
            className="button is-primary is-inverted"
            onClick={handleClear}
          >
            Clear completed
          </button>
        ) : (
          <></>
        )}
      </div>
    </div>
  );
};

export default function App() {
  const [state, dispatch] = useReducer(reducer, {
    todos: [],
    filtered: [],
  });

  function submitHandler(event) {
    event.preventDefault();

    const data = new FormData(event.target);
    const description = data.get("description");
    // 1.
    event.target.reset();

    dispatch({
      type: Actions.ADD_TODO,
      payload: description,
    });
  }

  function deleteHandler(todoId) {
    dispatch({
      type: Actions.DELETE_TODO,
      payload: todoId,
    });
  }

  function toggleHandler(todoId) {
    dispatch({
      type: Actions.TOGGLE_TODO,
      payload: todoId,
    });
  }

  function clearHandler() {
    dispatch({
      type: Actions.CLEAR,
    });
  }

  function filterListHandler(filterValue) {
    dispatch({
      type: Actions.FILTER,
      payload: filterValue,
    });
  }

  return (
    <Section size="small">
      <Box>
        <form onSubmit={submitHandler}>
          <Form.Field>
            <Form.Input
              placeholder="Add item"
              name="description"
              autoComplete="off"
              required
            />
            {/* 2 */}
          </Form.Field>
        </form>

        <TodosList
          onDelete={deleteHandler}
          onToggle={toggleHandler}
          todos={state.todos}
        />
        <TodoFooter
          count={state.todos.filter((t) => !t.done).length}
          clearHandler={clearHandler}
          filterListHandler={filterListHandler}
        />
      </Box>
    </Section>
  );
}

// TodoList.jsx
import React from "react";
import { Button } from "react-bulma-components";

const Item = ({ todo, onToggle, onDelete }) => {
  const [isDeleteVisible, setIsDeleteVisible] = React.useState(false);

  const toggleDelete = (value) => {
    setIsDeleteVisible(value);
  };

  return (
    <li
      key={todo.id}
      className="todo"
      data-done={todo.done}
      onMouseEnter={() => {
        toggleDelete(true);
      }}
      onMouseLeave={() => {
        toggleDelete(false);
      }}
    >
      <div className="todo-toggle-block">
        <Button
          className="switch"
          size="small"
          onClick={() => {
            onToggle(todo.id);
          }}
          rounded
        >
          {todo.done ? <>&#x2713;</> : ""}
        </Button>
        <div className="todo-description">{todo.description}</div>
      </div>
      {isDeleteVisible && (
        <Button
          className="remove"
          remove
          onClick={() => {
            onDelete(todo.id);
          }}
        />
      )}
    </li>
  );
};
/**
 * @param {{
 *  todos: { id: string; description: string; done: boolean; };
 *  onToggle: (id: string) => void;
 *  onDelete: (id: string) => void;
 * }} props
 *
 * @returns {JSX.Element}
 */
export default function TodosList({ todos, onToggle, onDelete }) {
  if (todos.length === 0) {
    return null;
  }

  return (
    <ul>
      {todos.map((todo) => {
        return <Item todo={todo} onDelete={onDelete} onToggle={onToggle} />;
      })}
    </ul>
  );
}

// style.css
ul {
  margin-top: 0.5rem;
}

.todo + .todo {
  margin-top: 0.2rem;
}

.todo[data-done="true"] .todo-description {
  text-decoration: line-through;
}

/*  */
.todo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.todo .todo-toggle-block {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.todo .todo-toggle-block .switch {
  margin-right: 10px;
}

.todos-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pending-info {
  margin: 10px 0;
  display: flex;
}
.pending-info .stat {
  margin-right: 10px;
}


/**
 Glass door questions
 #DS Count the characters in a string
 #DS Parse a nested json but don’t use pojos

 -- 
 #SD During the interview, I was tasked with designing a todo app, adhering to specific guidelines. Additionally, there was a live debugging session for a demo app. The High-Level Design (HLD) round emphasized excellent web practices and SEO considerations.

 -- 
 #FA In one round I had to make Tic-Tac-Toe. In another I had to make TODO List.

 -- 
 #DS Leetcode mediums questions. Standard ones can be found easily.

 -- 
 #SD Normal system design questions related to scale and web facing application were asked

 --
 #DS DSA problems were based on DFS and stacks

 --
 #SD Second question was to design an application keeping in mind the scale of users.

 --
 #DS question on Binary Seach written in a vague description. Interviewee picked up a binary search question from leetcode and tried to customize it using his by adding Apollo.io which made no sense at all.

 --
 #FA Online Coding Round with React Application and problem solving, Assignment to build a player with transcription, live-coding to build a todo app

 --
 #DS Two programming questions, one is about strings and other is about binary search trees

 --
 #DS 3. Live Coding interview - Combination of Stack & Queue data structure problem
 You have two strings. Both strings are series of numbers.
 Implement a function to check whether the second string is a valid pop sequence of the first string.
 Ex.
  "12345" "32145"
  "12345" "54321"
  "12345" "21543"

  --
 #FA Create an input where we can add options dynamically, delete, edit, sort, filter, styles, etc.

 #HM what was the most challenging task you had

 --
 #DS 1. Coding test: To split a hexadecimal string so that the result of the split are both perfect squares. You need to return the number of splits?
  2. Phone interview: To write a program to update the board after every move in Go game.

#SD Design the live comment section for a streaming platform.
Provided a high level design with deep diving for the connection handler for all the connected devices. Interviewer was satisfied with the approach.
https://leetcode.com/discuss/interview-experience/3914431/Stay-away-from-Apollo.io

#SD Design the Pricing module for a ride sharing application, pricing will be calculated on the basis of some features such as distance, time of the day, demand of rides etc. System should be designed in such a way where we can add and remove features from the system.
Provided the solution using factory pattern, Coded the complete solution in the coderbyte within the given time. Interviewer seemed satisifed.
 */

/**
TODO
- Array
- String
- DFS
- stacks
- Binary Seach
- binary search trees
- Stack & Queue data structure
- Count the characters in a string
- Parse a nested json but don’t use pojos
- You have two strings. Both strings are series of numbers.
 Implement a function to check whether the second string is a valid pop sequence of the first string.
 Ex.
  "12345" "32145"
  "12345" "54321"
  "12345" "21543"
 
 - To split a hexadecimal string so that the result of the split are both perfect squares. You need to return the number of splits?
 - To write a program to update the board after every move in Go game.

 - isBST
 - isBiPartite
 - heapSort
 - insertionSort
 - printKDistantNodes
 - mergeSort
 
 Array
 - left_rotate_array
 - largest_subarray_0_1
 - max_sum_no_adjacent
 - max_sum
 - min_jump
 - online_median_algo
 - search_in_pivoted_array
 - get_median_two_array https://leetcode.com/problems/median-of-two-sorted-arrays/description/
 - juggling_left_rotate

 String
 - interleave
 - longest_palindrom
 - longest_unique_substring
 - pattern_searching_automata
 - pattern_searching
 - permutation
 - reverse_recur

LinkList
 - reverse
 - reverse_k_nodes
 - palindrome
 - pair_wise_swap
 - ll_to_bst
 - detect_n_remove

 Practice
 - multiply2
 - nextPermutation
 	- permutationIterative
 	- permutationRecursive
 - quickSort
 - treeBraketStructure
 - urlTotalHits
 - validCombinations
 - makeChange
 - binarySearch
 - permute
 - findPath
 - findAllSubset
 - findMissing
 - findAncestor
 - preorder
 - ApplyPermutation
   */
  
 // https://www.youtube.com/playlist?list=PLgUwDviBIf0oF6QL8m22w1hIDC1vJ_BHz

 /**
  * 
// We have a 2D grid with N rows and M columns. Each cell in the grid either has a solid block or empty space. Some blocks may be floating above empty space. Assume blocks are not sticky. In other words, a block in a column will move independently of any blocks in neighboring columns. In the presence of gravity, which blocks will move?
// Example:
// input:   [
            // [0, 1, 1],
// 		    [1, 1, 0],
// 		    [0, 0, 0]
//          ]
        
// output:  [[0, 0, 0]
//          [0, 1, 0], 
// 		    [1, 1, 1]]

int main() {
    vector<vector<int>> matrix = {
        {0, 1, 1},
        {1, 1, 0},
        {0, 0, 0}
    };
    // [0, 1, 1, 1, 1, 0, 0, 0, 0]
    // create temp vector = [0, 0, 0, 0, 0, 1, 1, 1, 1]
    vector<int> temp;
    

    // fill temp with all elements 
    for(int i=0; i< matrix.size(); i++) {
        for (int j=0; j<matrix[i].size(); j++) {
            temp.push_back(matrix[i][j]);
        }
    }
    // sort temp;
    sort(temp.begin(),temp.end());
    for (int i=0; i<temp.size(); i++) {
        cout << temp[i] << "\t";
    }
    cout << endl;

    // fill back from temp
    
    
    // print
    for(int i=0; i< matrix.size(); i++) {
        for (int j=0; j<matrix[i].size(); j++) {
            cout << matrix[i][j] << "\t";
        }
        cout << "\n";
    }
    

    std::cout << "Hello LeetCoder";
}
-----------------------------------------------------------------------------------------

// We are working on a security system for a badged-access room in our company's building.

// We want to find employees who badged into our secured room unusually often. We have an unordered list of names and entry times over a single day. Access times are given as numbers up to four digits in length using 24-hour time, such as "800" or "2250".

// Write a function that finds anyone who badged into the room three or more times in a one-hour period. Your function should return each of the employees who fit that criteria, plus the times that they badged in during the one-hour period. If there are multiple one-hour periods where this was true for an employee, just return the earliest one for that employee.

// badge_times = [
//   ["Paul",      "1355"], ["Jennifer",  "1910"], ["Jose",    "835"],
//   ["Jose",       "830"], ["Paul",      "1315"], ["Chloe",     "0"],
//   ["Chloe",     "1910"], ["Jose",      "1615"], ["Jose",   "1640"],
//   ["Paul",      "1405"], ["Jose",       "855"], ["Jose",    "930"],
//   ["Jose",       "915"], ["Jose",       "730"], ["Jose",    "940"],
//   ["Jennifer",  "1335"], ["Jennifer",   "730"], ["Jose",   "1630"],
//   ["Jennifer",     "5"], ["Chloe",     "1909"], ["Zhang",     "1"],
//   ["Zhang",       "10"], ["Zhang",      "109"], ["Zhang",   "110"],
//   ["Amos",         "1"], ["Amos",         "2"], ["Amos",    "400"],
//   ["Amos",       "500"], ["Amos",       "503"], ["Amos",    "504"],
//   ["Amos",       "601"], ["Amos",       "602"], ["Paul",   "1416"],
// ];

// Expected output (in any order)
//    Paul: 1315 1355 1405
//    Jose: 830 835 855 915 930
//    Zhang: 10 109 110
//    Amos: 500 503 504

// n: length of the badge records array 


(function main() {
    const badge_times = [
      ["Paul",      "1355"], ["Jennifer",  "1910"], ["Jose",    "835"],
    ["Jose",       "830"], ["Paul",      "1315"], ["Chloe",     "0"],
    ["Chloe",     "1910"], ["Jose",      "1615"], ["Jose",   "1640"],
    ["Paul",      "1405"], ["Jose",       "855"], ["Jose",    "930"],
    ["Jose",       "915"], ["Jose",       "730"], ["Jose",    "940"],
    ["Jennifer",  "1335"], ["Jennifer",   "730"], ["Jose",   "1630"],
    ["Jennifer",     "5"], ["Chloe",     "1909"], ["Zhang",     "1"],
    ["Zhang",       "10"], ["Zhang",      "109"], ["Zhang",   "110"],
    ["Amos",         "1"], ["Amos",         "2"], ["Amos",    "400"],
    ["Amos",       "500"], ["Amos",       "503"], ["Amos",    "504"],
    ["Amos",       "601"], ["Amos",       "602"], ["Paul",   "1416"],
    ];
    
    // sorted with time
    const sorted_badge_times = badge_times.sort((a,b) => b[1]-a[1]);

    // store result
    const result = {};


    // iterate of all
    for (let i=0; i<sorted_badge_times.length; i++) {
        // if user is baged in next 60 minutes push
        const [userName, userTime] = sorted_badge_times[i];
        for (let j=i; j<sorted_badge_times.length; j++) {
            if (userName===sorted_badge_times[j][0] && sorted_badge_times[j][1]<userTime+100) {
                // create a map of names {name: [times,times]}
                const name = sorted_badge_times[j][0];
                const time = sorted_badge_times[j][1];
                if (!result[name]) {
                    result[name] = new Set();
                    result[name].add(time);
                } else {
                    result[name].add(time);
                }
            }
        }
    }
    console.log(result);
    console.log('Hello LeetCoder');
}());
 

  */

/**
https://leetcode.com/discuss/interview-question/system-design/1729681/Compilation-or-Microsoft-Design-Questions-or-SDE-ISDE-II
I've read all the interview experiences of Microsoft for SDE-1/SDE-2 role which were posted on LeetCode in the past 6-months. Following is the compilation of all the design questions being asked:

Tiny URL
Google Docs
Twitter
LeetCode
API Rate Limiter
BookMyShow
Chat Application
E-Commerce Portal
Splitwise
Vending Machine
Google Autosuggest
Uber
Parking Lot
Stock Exchange
Logging System
Authentication Service

[x] Tiny URL
[] Parking Lot and 
[] BookMyShow were asked the most number of times :)
[] Snake and Ladder game
[] E-Commerce Portal
[] API Rate Limiter
[] Chat Application

[] Splitwise
[] Logging System

[x] Zero to million https://www.youtube.com/watch?v=rExh5cPMZcI

https://github.com/mrbajaj/system-design
[x] TinyURL
Instagram | Photo hosting platform
Timeline | Newsfeed | Twitter
Dropbox | Google Drive
Whatsapp | Facebook Messenger NL GS Ref
MakeMyTrip | BookMyShow
Amazon | Flipkart
Youtube | Netflix NL
Uber | IRCTC
Swiggy | Zomato
Yelp | Nearby
Twitter Search
Google Search
SplitWise
Zerodha
API Rate Limiter
Web Crawler
Rate limiting system
Distributed cache
Typeahead Suggestion | Auto-complete system
Recommendation System
Design a tagging system like tags used in LinkedIn
Low Level Design Problems (Machine Coding Round) Reference
Elevator system
Snake and Ladder game
[x] Tic Tac Toe
ATM machine - https://medium.com/swlh/atm-an-object-oriented-design-e3a2435a0830
Traffic Control System
Vehicle Parking System
Online Coding Platform problem-statement
File Sharing System
Object Oriented Design Prerations [https://www.oodesign.com/]
SOLID Principles
Design Patterns [https://refactoring.guru/design-patterns]
More Problems List
More Good Resources:
https://refactoring.guru/design-patterns/what-is-pattern
http://www.cs.unibo.it/~cianca/wwwpages/ids/esempi/coffee.pdf Recomended by - sudoCode
https://cseweb.ucsd.edu//~wgg/CSE210/ecoop93-patterns.pdf Recomended by - sudoCode
 */

/**
 * 
Sean O’Connor - Lessons Learned Building Distributed Systems at Bitly https://vimeo.com/96844401

 */

/**
 * Design chess  - HLD, LLD
 */

/**
 * 

- How to lock event when two users try to select same game in real-time 
    - https://stackoverflow.com/questions/129329/optimistic-vs-pessimistic-locking
    When dealing with conflicts, you have two options:

    You can try to avoid the conflict, and that's what Pessimistic Locking does.
    Or, you could allow the conflict to occur, but you need to detect it upon committing your transactions, and that's what Optimistic Locking does.
    Now, let's consider the following Lost Update anomaly:

    Lost Update

    The Lost Update anomaly can happen in the Read Committed isolation level.

    In the diagram above we can see that Alice believes she can withdraw 40 from her account but does not realize that Bob has just changed the account balance, and now there are only 20 left in this account.

    Pessimistic Locking
    Pessimistic locking achieves this goal by taking a shared or read lock on the account so Bob is prevented from changing the account.

    Lost Update Pessimistic Locking

    In the diagram above, both Alice and Bob will acquire a read lock on the account table row that both users have read. The database acquires these locks on SQL Server when using Repeatable Read or Serializable.

    Because both Alice and Bob have read the account with the PK value of 1, neither of them can change it until one user releases the read lock. This is because a write operation requires a write/exclusive lock acquisition, and shared/read locks prevent write/exclusive locks.

    Only after Alice has committed her transaction and the read lock was released on the account row, Bob UPDATE will resume and apply the change. Until Alice releases the read lock, Bob's UPDATE blocks.

    Optimistic Locking
    Optimistic Locking allows the conflict to occur but detects it upon applying Alice's UPDATE as the version has changed.

    Application-level transactions

    This time, we have an additional version column. The version column is incremented every time an UPDATE or DELETE is executed, and it is also used in the WHERE clause of the UPDATE and DELETE statements. For this to work, we need to issue the SELECT and read the current version prior to executing the UPDATE or DELETE, as otherwise, we would not know what version value to pass to the WHERE clause or to increment.

    Application-level transactions
    Relational database systems have emerged in the late 70's early 80's when a client would, typically, connect to a mainframe via a terminal. That's why we still see database systems define terms such as SESSION setting.

    Nowadays, over the Internet, we no longer execute reads and writes in the context of the same database transaction, and ACID is no longer sufficient.

    For instance, consider the following use case:

    Application-level transactions and Optimistic Locking

    Without optimistic locking, there is no way this Lost Update would have been caught even if the database transactions used Serializable. This is because reads and writes are executed in separate HTTP requests, hence on different database transactions.

    So, optimistic locking can help you prevent Lost Updates even when using application-level transactions that incorporate the user-think time as well.

    Conclusion
    Optimistic locking is a very useful technique, and it works just fine even when using less-strict isolation levels, like Read Committed, or when reads and writes are executed in subsequent database transactions.

    The downside of optimistic locking is that a rollback will be triggered by the data access framework upon catching an OptimisticLockException, therefore losing all the work we've done previously by the currently executing transaction.

    The more contention, the more conflicts, and the greater the chance of aborting transactions. Rollbacks can be costly for the database system as it needs to revert all current pending changes which might involve both table rows and index records.

    For this reason, pessimistic locking might be more suitable when conflicts happen frequently, as it reduces the chance of rolling back transactions.

- How to fetch data with pagination when the list is real time 
    - 
 */