Upload Button Icon Add office photos

Filter interviews by

SurveySparrow Front end Developer Interview Questions, Process, and Tips

Updated 10 May 2024

Top SurveySparrow Front end Developer Interview Questions and Answers

SurveySparrow Front end Developer Interview Experiences

3 interviews found

Interview experience
4
Good
Difficulty level
Moderate
Process Duration
Less than 2 weeks
Result
No response

I applied via Company Website and was interviewed in Feb 2024. There was 1 interview round.

Round 1 - Technical 

(2 Questions)

  • Q1. Basics of html,css and react,css flexbox,grid,where to use what,css units,how to change the value of rem,how do you create an error boundary,what are the hooks are you familiar with,explain usecallback
  • Q2. Gave this card to design and implement the rating functionality using html,css and js -----

Interview Preparation Tips

Interview preparation tips for other job seekers - Cover the basics of html,css and js,even if you are a pro in building applications using modern tech stacks like MERN,we don't give importance to basics which is mostly asked in interviews,so spend some time for basics..
Interview experience
5
Excellent
Difficulty level
-
Process Duration
-
Result
-
Round 1 - Resume Shortlist 
Pro Tip by AmbitionBox:
Keep your resume crisp and to the point. A recruiter looks at your resume for an average of 6 seconds, make sure to leave the best impression.
View all tips
Round 2 - Technical 

(3 Questions)

  • Q1. Basics of HTML,CSS and React questions were asked , really basic questions like semantic elements , void elements , Sass for css questions , CSS box model
  • Q2. CSS box model and why we use box-border
  • Ans. 

    CSS box model defines the design and layout of elements on a webpage. Box-border is used to include padding and border in the total width and height of an element.

    • CSS box model includes content, padding, border, and margin of an element

    • By default, padding and border are not included in the total width and height of an element

    • Using box-border property includes padding and border in the total width and height of an eleme

  • Answered by AI
  • Q3. Flex,grid questions and scss questions
Round 3 - Technical 

(2 Questions)

  • Q1. This is live coding round in react
  • Q2. Do post HTTP method for the given API
  • Ans. 

    The POST method is used to submit data to the server in the given API.

    • Use POST method to create a new resource on the server

    • Data is sent in the body of the request

    • Commonly used in forms and when submitting user input

  • Answered by AI

Skills evaluated in this interview

Front end Developer Interview Questions Asked at Other Companies

Q1. Non-Decreasing Array Problem Statement Given an integer array ARR ... read more
Q2. Find Unique Element in Array You have been provided an integer ar ... read more
asked in JUSPAY
Q3. Dijkstra's Shortest Path Problem Statement You are given an undir ... read more
asked in JUSPAY
Q4. Encode N-ary Tree to Binary Tree Problem Statement You are provid ... read more
Q5. Sort Linked List Based on Actual Values You are given a Singly Li ... read more
Interview experience
5
Excellent
Difficulty level
Moderate
Process Duration
Less than 2 weeks
Result
Not Selected

I applied via LinkedIn and was interviewed in Nov 2023. There was 1 interview round.

Round 1 - One-on-one 

(2 Questions)

  • Q1. Difference between splice and slice
  • Ans. 

    splice is used to add or remove elements from an array, while slice is used to extract a portion of an array without modifying it.

    • splice modifies the original array by adding or removing elements, while slice returns a new array with the extracted elements

    • splice takes in parameters for index, number of elements to remove, and optional elements to add, while slice takes in parameters for start and end index

    • Example: cons...

  • Answered by AI
  • Q2. Css visiblity none vs visiblity hidden
  • Ans. 

    visibility: hidden hides an element but still takes up space, visibility: none hides an element and removes it from the layout

    • visibility: hidden hides the element but it still occupies space on the page

    • visibility: none hides the element and removes it from the layout

    • visibility: hidden can be used to hide an element while keeping its space reserved, useful for animations

    • visibility: none is useful when you want to comple

  • Answered by AI

Interview Preparation Tips

Interview preparation tips for other job seekers - Be strong in basics

Skills evaluated in this interview

Interview questions from similar companies

Interview experience
4
Good
Difficulty level
-
Process Duration
-
Result
-
Round 1 - One-on-one 

(2 Questions)

  • Q1. JavaScript Related Questions
  • Q2. ReactJs Related Questions
Round 2 - One-on-one 

(2 Questions)

  • Q1. Reactjs Use Effects and UseRef
  • Q2. JavaScript Closures,Map,CallBack

Interview Preparation Tips

Interview preparation tips for other job seekers - NA
Interview experience
5
Excellent
Difficulty level
-
Process Duration
-
Result
-
Round 1 - Coding Test 

Coding a frontend UI from provided image. And creating a fucntional star rating system

Round 2 - Technical 

(2 Questions)

  • Q1. Designing a Component API in React using Typescript.
  • Ans. 

    Designing a Component API in React using Typescript involves defining props, state, and methods for the component.

    • Define the props interface to specify the expected input data for the component

    • Use typescript types to ensure type safety and prevent runtime errors

    • Define the state interface to manage the internal state of the component

    • Implement methods to handle user interactions and component logic

    • Document the component

  • Answered by AI
  • Q2. Create a function that can clear all the timer ids at once.
  • Ans. 

    Function to clear all timer ids at once

    • Create an array to store all timer ids

    • Iterate through the array and clear each timer id using clearTimeout() function

  • Answered by AI

Skills evaluated in this interview

Interview experience
3
Average
Difficulty level
Moderate
Process Duration
Less than 2 weeks
Result
Not Selected

I applied via Campus Placement and was interviewed in Sep 2024. There were 3 interview rounds.

Round 1 - Aptitude Test 

Average,Time Speed Distance , Stream and Boat , Proportions , SI and CI

Round 2 - SVAR 

(2 Questions)

  • Q1. Read the Given Sentence
  • Q2. Tell the description about the topic
  • Ans. 

    The topic is about describing a specific subject or concept in detail.

    • Provide a comprehensive overview of the topic

    • Include key details and characteristics

    • Explain the significance and relevance of the topic

    • Use examples to illustrate key points

  • Answered by AI
Round 3 - Coding Test 

Java , SQL , Front end quesstion

Interview Preparation Tips

Interview preparation tips for other job seekers - Average
Interview experience
3
Average
Difficulty level
Moderate
Process Duration
Less than 2 weeks
Result
No response

I applied via Naukri.com and was interviewed in Mar 2024. There was 1 interview round.

Round 1 - Technical 

(14 Questions)

  • Q1. Let var const in JavaScript
  • Ans. 

    var and const are used to declare variables in JavaScript, with var being mutable and const being immutable.

    • var is used to declare variables that can be reassigned and updated

    • const is used to declare variables that cannot be reassigned or updated

    • let is another keyword used for declaring variables, similar to var but with block scope

  • Answered by AI
  • Q2. Error boundary and how to handle
  • Ans. 

    Error boundary is a React component that catches JavaScript errors anywhere in a component tree and logs those errors.

    • Error boundaries are React components that catch JavaScript errors in their child component tree.

    • They are used to prevent the entire UI from crashing due to a single error.

    • Error boundaries work like a JavaScript catch {} block, but for components.

    • They are defined using componentDidCatch lifecycle method

  • Answered by AI
  • Q3. Event.bind and event.property
  • Q4. Use of never in typescript
  • Ans. 

    The 'never' type in TypeScript represents a value that will never occur.

    • Used to indicate that a function will not return a value

    • Commonly used in union types to exclude certain values

    • Helps catch potential errors at compile time

  • Answered by AI
  • Q5. What hooks you have used
  • Ans. 

    I have used React hooks such as useState, useEffect, useContext, and useRef in my projects.

    • useState

    • useEffect

    • useContext

    • useRef

  • Answered by AI
  • Q6. What is difference between use reducer and use state
  • Ans. 

    useReducer is preferred for managing complex state logic, while useState is simpler for basic state management.

    • useReducer is more suitable for managing complex state logic and multiple state values

    • useState is simpler and more straightforward for basic state management with a single value

    • useReducer allows for more organized and centralized state updates through actions and reducers

    • useState is commonly used for simple co

  • Answered by AI
  • Q7. Why we use state and props
  • Q8. How you will pass data from parent to child
  • Ans. 

    Data can be passed from parent to child components in React using props.

    • Pass data as props from parent component to child component

    • Use state management libraries like Redux or Context API for complex data sharing

    • Use callback functions to pass data from child to parent components

  • Answered by AI
  • Q9. Write your own custom hook
  • Ans. 

    Custom hook to fetch data from an API

    • Create a function that uses the useState and useEffect hooks

    • Use the fetch API to make a request to the desired endpoint

    • Return the fetched data and loading state in an array

  • Answered by AI
  • Q10. Explain map filter and reduce functions
  • Ans. 

    Map, filter, and reduce are higher-order functions in JavaScript used to manipulate arrays.

    • Map: Transforms each element in an array and returns a new array with the transformed elements.

    • Example: [1, 2, 3].map(num => num * 2) returns [2, 4, 6].

    • Filter: Returns a new array with elements that pass a certain condition.

    • Example: [1, 2, 3].filter(num => num > 1) returns [2, 3].

    • Reduce: Applies a function against an accumulator ...

  • Answered by AI
  • Q11. How you can clone an object
  • Ans. 

    To clone an object in JavaScript, you can use the spread operator or Object.assign() method.

    • Use the spread operator to create a shallow copy of an object: const clonedObj = { ...originalObj };

    • Use Object.assign() method to create a shallow copy of an object: const clonedObj = Object.assign({}, originalObj);

    • For deep cloning, you can use libraries like Lodash or write a custom function to recursively clone nested objects.

  • Answered by AI
  • Q12. What are the three stages of event propagation and how to handle it
  • Ans. 

    Event propagation consists of three stages: capturing, target, and bubbling.

    • Capturing phase: Events are captured from the outermost element to the target element.

    • Target phase: Event reaches the target element where the event originated.

    • Bubbling phase: Events bubble up from the target element to the outermost element.

  • Answered by AI
  • Q13. How to handle errors in your react application
  • Ans. 

    Errors in a React application can be handled by using error boundaries, try-catch blocks, and displaying error messages to users.

    • Use error boundaries to catch errors in components and display a fallback UI

    • Wrap code that may throw errors in try-catch blocks to handle exceptions

    • Use libraries like React Error Boundary to easily implement error handling

    • Display error messages to users to inform them about the issue and poss

  • Answered by AI
  • Q14. Write code to call fake api and display the title where category is “some category “

Skills evaluated in this interview

Interview experience
4
Good
Difficulty level
-
Process Duration
-
Result
Selected Selected

I applied via Referral

Round 1 - Technical 

(1 Question)

  • Q1. It was a array question. I was told to return a object from a function which would contain getting all the array elements, adding a element, deleting a element. The test was on hacker rank.
Round 2 - Technical 

(1 Question)

  • Q1. This was basically a one on one round. I was asked basics of HTML, CSS and React. Questions like Hoisting, Prop Drilling, Context API. Not only do you need to know what the topics are. But I was asked to i...
Round 3 - HR 

(1 Question)

  • Q1. Basic Company Details and Salary Negotiations

Interview Preparation Tips

Topics to prepare for IBM Front end Developer interview:
  • React.Js
  • HTML
  • Javascript
  • OOPS
Interview preparation tips for other job seekers - Prepare your best. Do some leetcode and go through previous interview experiences. Get to know the IDE in which they interview you . Trust me that makes a lot of difference. Last part helped me a lot. You do not have to be a code parrot and learn everything by heart. The challenge is to receive a completely new problem and on the spot try to solve it. You will fail multiple times and you have to communicate with the interviewer about your approach. If you are close then he might give you a hint and voila the impossible problem would seem somewhat possible. All the best to everyone reading this!
Interview experience
5
Excellent
Difficulty level
-
Process Duration
-
Result
-
Round 1 - Coding Test 

Find reverse string using array

Round 2 - Technical 

(1 Question)

  • Q1. What are Routing Guards?
  • Ans. 

    Routing guards are used in Angular to control access to certain routes based on certain conditions.

    • Routing guards are used to protect routes in Angular applications.

    • They can be used to control access based on authentication status, user roles, etc.

    • There are different types of routing guards like CanActivate, CanActivateChild, CanDeactivate, CanLoad.

    • Example: CanActivate guard can be used to check if a user is authentica

  • Answered by AI

Skills evaluated in this interview

Interview experience
5
Excellent
Difficulty level
Easy
Process Duration
Less than 2 weeks
Result
-

I applied via Naukri.com and was interviewed in Feb 2024. There were 3 interview rounds.

Round 1 - Technical 

(4 Questions)

  • Q1. What is react and it's advantage
  • Ans. 

    React is a JavaScript library for building user interfaces.

    • React allows for the creation of reusable UI components

    • It uses a virtual DOM for efficient rendering

    • React is declarative, making it easier to understand and debug code

  • Answered by AI
  • Q2. React life cycle
  • Q3. Questions related to Redux
  • Q4. Simple app using redux
  • Ans. 

    Creating a simple app using Redux for state management in a front end application.

    • Set up Redux store with reducers and actions

    • Connect components to Redux store using mapStateToProps and mapDispatchToProps

    • Dispatch actions to update state in Redux store

    • Use combineReducers to manage multiple reducers

  • Answered by AI
Round 2 - One-on-one 

(2 Questions)

  • Q1. Previous project
  • Q2. Agile process followed in project
  • Ans. 

    Agile process involves iterative development, frequent collaboration, and adaptability to changes.

    • Daily stand-up meetings to discuss progress and roadblocks

    • Sprints for focused development and testing

    • Continuous feedback and iteration based on user input

    • Use of tools like Jira or Trello for project management

  • Answered by AI
Round 3 - HR 

(2 Questions)

  • Q1. Salary discussion
  • Q2. Work location discussion

Interview Preparation Tips

Interview preparation tips for other job seekers - Strong in basics and coding

Skills evaluated in this interview

SurveySparrow Interview FAQs

How many rounds are there in SurveySparrow Front end Developer interview?
SurveySparrow interview process usually has 1-2 rounds. The most common rounds in the SurveySparrow interview process are Technical, Resume Shortlist and One-on-one Round.
What are the top questions asked in SurveySparrow Front end Developer interview?

Some of the top questions asked at the SurveySparrow Front end Developer interview -

  1. CSS box model and why we use box-bor...read more
  2. do post HTTP method for the given ...read more
  3. Css visiblity none vs visiblity hid...read more

Tell us how to improve this page.

SurveySparrow Front end Developer Interview Process

based on 4 interviews

Interview experience

4.8
  
Excellent
View more
SurveySparrow Front end Developer Salary
based on 9 salaries
₹7.2 L/yr - ₹8.7 L/yr
23% more than the average Front end Developer Salary in India
View more details

SurveySparrow Front end Developer Reviews and Ratings

based on 1 review

3.0/5

Rating in categories

5.0

Skill development

2.0

Work-life balance

4.0

Salary

3.0

Job security

3.0

Company culture

2.0

Promotions

3.0

Work satisfaction

Explore 1 Review and Rating
Product Developer
15 salaries
unlock blur

₹5 L/yr - ₹9.2 L/yr

Front end Developer
9 salaries
unlock blur

₹7.2 L/yr - ₹8.7 L/yr

Senior Accounts Manager
9 salaries
unlock blur

₹7.5 L/yr - ₹15 L/yr

Senior Product Developer
8 salaries
unlock blur

₹8 L/yr - ₹17 L/yr

Associate Product Manager
7 salaries
unlock blur

₹10 L/yr - ₹15.3 L/yr

Explore more salaries
Compare SurveySparrow with

Freshworks

3.5
Compare

Zoho

4.3
Compare

WebEngage

4.0
Compare

CleverTap

3.6
Compare
Did you find this page helpful?
Yes No
write
Share an Interview