Frontend Interview Experience at Visa

Hello folks,
I recently had the chance to interview for the Senior Software Engineer - Frontend position at Visa. This role focuses primarily on frontend development, and in this post, I'll be sharing my interview experience.

How did I get to know about this opportunity?

I discovered this opportunity on LinkedIn. I submitted my application through Visa's careers page, and a few days later, I received a link for the online test for the first round.

Interview Rounds

In total, there are 3 rounds:

React Machine Coding Online Test
Technical Round 1 - React Coding
Technical Round 2 - DSA & React Concepts

React Machine Coding Round

Duration: 90 minutes

The test consisted of 4 levels, each requiring a solution. React was permitted for use during the round. The platform was proctored, and all activities were monitored.

Problem Statement:

The first level required creating a presentational employee card component. This tested the ability to pass props to the component and render it correctly.
The second level involved adding a form to assign an employee to a department, focusing on form handling.

The third level required fetching departments and their employees from an API and displaying the results.
Sample API response structure:

  // Departments API Structure
  // GET https://dummydomain.com/departments
  [
      { 
          "id": "departmentId1",
          "name": "departmentName1",
          "employees" : ["employeeId1" , "employeeId2"]

      },
      { 
          "id": "departmentId2",
          "name": "departmentName2",
          "employees" : ["employeeId3" , "employeeId4"]
      },
  ]

  // Employees API Structure
  // GET https://dummydomain.com/employees/<employeeId>
  {
      "id": "employeeId1",
      "name": "employeeName",
      "address" : "employeeAddress",
      ...
  }

The fourth level involved changing the department of each employee, which included adding to one list and removing from another. This doesn’t require saving the changes to backend API. It needs to be done on frontend only.

Solution:
The first and second levels were relatively simple. For the third level, it was necessary to retrieve all department information from the departments API and then loop through each department to gather details of the employees associated with it by calling the employees API with the employee ID. This scenario was ideal for using Promise.all to fetch employee information for all departments simultaneously. Additionally, Promise.allSettled could handle cases where a specific employee did not exist and the API returned an error.

Here is a replica link for the solution to the level 3 problem: CodeSandbox.

Although the test was straightforward, the platform and editor experience were problematic. The editor sometimes failed to refresh the preview, lagged, and had network connectivity issues. Time management was crucial to solve all the 4 challenges, but I could only complete 3 levels due to these constraints.

Technical Round 1 - React Coding

Duration: 60 minutes

The task was to develop a fully functional calculator app using React. The solution needed to be modular and extensible. I provided a detailed walkthrough of my code and then inquired about the company's environment and frontend development culture at Visa.

Technical Round 2 - DSA & React Concepts

Duration: 60 minutes

The round began with a tree data structure problem akin to the boundary traversal of a binary tree. You can find the implementation of this problem on GFG.

I was asked to compare Redux and React Context API for state management, identifying the appropriate use cases for each. Additionally, I was tasked with writing a React component that uses the Context API to share state across multiple components. Here’s the solution for this:

// Write a React component that utilizes the Context API to share state across multiple components?

const Context = React.createContext()

const ParentComponent = ({children}) => {
    return <Context.Provider value={{data}}>{children}</Context.Provider>
}

const ChildComponent = () => {
    const data = useContext(Context)
    const [state, setState] = useState(false)

    const toggle = () => {
        setState(prev => !prev)
    }
}

I also provided a solution to prevent child components from re-rendering when the Context API is updated in the parent component of a react application. The next task was to write a custom react hook for force updating a react component.

I was asked about the factors to consider when choosing between Angular and React for a web application project and the appropriate situations for each choice.

I asked about the team I would be joining and learned that the role is for a customer-facing team. The primary technology stack includes React and Angular for the frontend and Java for the backend. I also inquired about the possibility of frontend developers transitioning to backend roles.

Note: There might have been an additional round with the hiring manager, but since the position was frozen, my application was forfeited after this round.

Conclusion

Two weeks after completing the interviews, the recruiter notified me that the position had been frozen and my application was no longer being considered.

Nevertheless, I gained many insights and identified areas for improvement from this interview experience.

Thank you, guys, for reading up till here, I hope you enjoyed and learnt something new! You can connect with me on X, LinkedIn & GitHub.

Happy Coding! ✌️

Interview Experience Series

In this series on Hashnode, I've compiled advice, resources, and real-world interview experiences to help you prepare for your front-end developer interview.