Swiggy | SDE-2 Full Stack | Interview Experience

There was a Google form floating around on LinkedIn by Swiggy HR for SDE II Full stack Developer role. I filled out and received an email from HR stating my profile was shortlisted for the next stage of the selection process i.e. online test. I was instructed to complete the online test within 3 days.

Round 0 - HackerEarth Online Test (3 hours)

This was a long OA containing 2 questions focused on both frontend and backend-heavy development. In both questions, technical specifications, implementation details/rules, and testing/submission instructions were provided.

Question 1 - Build an API for a word game application in NodeJS, fetching from SQLite DB.
Question 2 - Develop a home inventory manager application using React with TypeScript.

I received a call from HR after a couple of days of taking the test, stating that I have cleared and moved forward to the interview stages. She gave the flexibility to choose a date/time that worked for me. Since my current week was packed, I requested to schedule the interview early next week.

Round 1 - JavaScript Coding and HTML CSS Concepts (1 hour)

This round was taken by InterviewVector on behalf of Swiggy. The title of the round was 'JavaScript Coding and HTML CSS Concepts'.
I was given one JS problem to build an OTP input component in 40 mins and use a platform like JSFiddle/CodePen. The functional requirements were bit too much even for an experienced developer to complete in such a short span, and top of that my speed is not that great, honestly. The last 10 minutes were for HTML/CSS conceptual questions, which I answered most. Regardless, I was not able to build all the features properly (there was a rendering/event listener issue which I could not debug successfully under pressure).

Later in the day, I got rejection mail with the following scope of improvement:

• Should practice more JavaScript-related problems and also work on debugging skills
• Learn about different UI events. Also, work on writing modular and scalable code.

Overall, a good experience and a chance to improve in future and bounce back stronger.

JS Question:

Build an otp input component

Input Fields:

1. The component should have six individual input fields for the OTP digits (or customizable length).
2. Only numeric input (0-9) should be allowed.
3. Auto-focus on the next field after entering a digit.
4. Automatically move to the previous field if the user presses backspace on an empty field.
5. Provide a method for the user to paste the entire OTP, filling in the fields automatically.

Validation:

1. Add basic validation to ensure all input fields are filled before submission.
2. Provide real-time feedback if a non-numeric character is entered.

Accessibility: optional

1. Ensure that the component is keyboard accessible (e.g., arrow keys for navigation between fields).
2. Screen readers should announce appropriate input instructions.

Customization:

1. The component should be flexible to support a variable OTP length (e.g., 4-digit or 8-digit OTP).

Error Handling:

1. Handle any edge cases like handling rapid user inputs, invalid characters, or incomplete OTP submission.

Conceptual Questions

1. Lifecycle methods in JS. How do promises work?
2. Which CSS library would you use and why?
3. When to use class selectors and inline styling in CSS?
4. Explain the role of Content Security Policy in HTML.
5. Role of event loop in JS.
6. Difference between map and forEach in JS.
7. What are some of the HTML errors that can negatively affect SEO?
8. How does HTML remain compatible with different browsers?