Frontend Interview Experience at Flipkart | UI Engineer 1

This was scheduled couple of days after Round2. In this round focus was mainly on DSA and Problem Solving (Using JavaScript), Time/Space Complexity Analysis

• Question 1: String manipulation question [LC - Easy/Medium]. Was asked a follow up question which was to basically add this function to the Function prototype chain.
• Question 2: Flatten Array for example Input: [[1,2],[[3,4]],[5]] Output: [1,2,3,4,5]
• Question 3: Don't quite remember the exact question but it was related to DOM tree traversal.

This was scheduled the next day and went on for 60mins of discussion around HTML/CSS, JavaScript and Web API related questions.
Some questions I recall:

• Was given a task where I had to write HTML and CSS for a grid of images where in one row there are 3 images. I used flexbox for this task. Follow up questions like what if the image sizes are not same.
• What happens when you hit a domain/website in your browser.
• How the Web works (good article on this available on mdn)
• JavaScript Fundamentals and tricky output based questions which indirectly covered topics like closures, hoisting, var scope vs let,const scope, IIFE, callback vs promises vs async await, how to handle dependent promise logic / promise chaining.
• Implement Function.prototype.bind polyfill
• Http Methods and when to use them (GET, PUT,PATCH,POST, DELETE,OPTIONS).
• display none vs visibility hidden
• box model
• Event loop, and how setTimeout and Promises are queued.

This round was scheduled on the same day after Round 3.

This round was more of a discussion on my past experience and role/team at flipkart. Interviewer deep dived into my past projects and how I solved certain challenges. This round was relatively short around 35-40 mins.

Round 1 was Machine coding round where I was given 90 mins to code the problem statement and then had 30mins of discussion on the same with the interview.

• I was asked to implement the Frontend of a chat application, similar to web.whatsapp.com
• There were some mandatory features and some bonus features which were optional.
• Had to build it using Vanilla JavaScript and plain CSS. No framework/library allowed.
• I wrote the code using classes (OOJS) and tried to make reusable components.

I was given an api endpoint url which returned mock data required. Basically it was array of objects which had contact details as well as message list.

  {
    "id": 1,
    "title": "title",
    "imageURL": "someUrl",
    "orderId": "OD123",
    "messageList": [
      {
        "messageId": "msg1",
        "message": "Hi",
        "messageType": "text"
      },
      {
        "messageId": "msg2",
        "message": "need assistance",
        "messageType": "text"
      }
    ]
  },
  {
    "id": 2,
    "title": "title2",
    "imageURL": "someUrl2",
    "orderId": "OD1234",
    "messageList": []
  },
]

Using this data, had to build the following features

• left view / panel- contains scrollable list of contacts with image, title, date etc
• right view / panel - on click of any contact open a chat window which shows previous messages as well as input to send messages that need to be persisted (used localStorage)
• left panel has a search box which can be used to search contact by id and title
• styling according to design which was shared (was very similar to whatsapp web)

Bonus features:

• feature to attach images, files, videos etc to the chat

There were some more features which I am unable to recall at the moment.