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:
- The component should have six individual input fields for the OTP digits (or customizable length).
- Only numeric input (0-9) should be allowed.
- Auto-focus on the next field after entering a digit.
- Automatically move to the previous field if the user presses backspace on an empty field.
- Provide a method for the user to paste the entire OTP, filling in the fields automatically.
Validation:
- Add basic validation to ensure all input fields are filled before submission.
- Provide real-time feedback if a non-numeric character is entered.
Accessibility: optional
- Ensure that the component is keyboard accessible (e.g., arrow keys for navigation between fields).
- Screen readers should announce appropriate input instructions.
Customization:
- The component should be flexible to support a variable OTP length (e.g., 4-digit or 8-digit OTP).
Error Handling:
- Handle any edge cases like handling rapid user inputs, invalid characters, or incomplete OTP submission.
Conceptual Questions
- Lifecycle methods in JS. How do promises work?
- Which CSS library would you use and why?
- When to use class selectors and inline styling in CSS?
- Explain the role of Content Security Policy in HTML.
- Role of event loop in JS.
- Difference between map and forEach in JS.
- What are some of the HTML errors that can negatively affect SEO?
- How does HTML remain compatible with different browsers?
