Samrat Gems Impex Front Office Coordinator Interview Questions and Answers

Codility consists of two Angular questions: the first involves creating a form, while the second pertains to developing a searchable input field, along with one DSA coding question.

Q1. How do you build form validations in angular
Ans. 
Form validations in Angular are built using Angular forms and validators.
• Use Angular forms to create form controls and group them together

• Apply built-in validators like required, minlength, maxlength, pattern, etc.

• Create custom validators for complex validation requirements

• Display error messages based on validation status

• Use reactive forms for more control and flexibility
Answered by AI
Add your answer
Q2. How will you create reusable loading logic in angular
Ans. 
Create a service with a loading state and methods to show/hide loading indicators
• Create a loading service with a boolean property 'isLoading'

• Add methods in the service to set isLoading to true/false

• Inject the loading service in components where loading indicators are needed
Answered by AI
Add your answer
Q3. JS questions which includes closure and promise.race
Add your answer

Q1. Discussion about my previous project
Add your answer
Q2. Question on html, css, javascript & react
Add your answer
Q3. Explain about promises
Ans. 
Promises are objects representing the eventual completion or failure of an asynchronous operation.
• Promises are used to handle asynchronous operations in JavaScript.

• They can be in one of three states: pending, fulfilled, or rejected.

• Promises can be chained using .then() to handle success and .catch() to handle errors.

• Example: const myPromise = new Promise((resolve, reject) => { ... });
Answered by AI
Add your answer
Q4. Use state, context api
Add your answer
Q5. Box modelling in css, css pre processors
Ans. 
Box model in CSS refers to the way elements are rendered in a web page. CSS preprocessors like SASS or LESS help streamline CSS development.
• Box model in CSS includes content, padding, border, and margin.

• CSS preprocessors like SASS or LESS allow for variables, nesting, and mixins to be used in CSS.

• Example: box-sizing: border-box; in CSS changes the box model to include padding and border in the element's total width and
Answered by AI
Add your answer

Q1. Interviewer was not letting complete my response
Add your answer
Q2. If i was giving correct response, then he was interrupting and changing the question.
Add your answer

Online Hackathon test was taken.

Q1. Tell Me About Yourself.
Ans. 
I am a passionate React Js Frontend Developer with experience in building user-friendly and responsive web applications.
• Experienced in developing web applications using React Js

• Proficient in HTML, CSS, and JavaScript

• Familiar with state management libraries like Redux

• Strong understanding of responsive design principles

• Ability to work collaboratively in a team environment
Answered by AI
View 1 more answer
Q2. Tell me about your roles and responsibilities in your current project.
Ans. 
I am responsible for developing and maintaining the frontend of the project using React Js.
• Developing user-friendly interfaces using React Js

• Implementing responsive design and ensuring cross-browser compatibility

• Collaborating with backend developers to integrate frontend with backend services

• Optimizing application performance and troubleshooting issues

• Participating in code reviews and providing feedback to team members
Answered by AI
Add your answer
Q3. How we implement SSR in React.
Ans. 
SSR in React is implemented using server-side rendering to pre-render React components on the server before sending them to the client.
• Use libraries like Next.js or Gatsby to implement SSR in React.

• Configure server to render React components on the server side.

• Optimize server-side rendering for performance by caching rendered components.
Answered by AI
Add your answer
Q4. How can we change our project in production mode from development mode.
Ans. 
To change a React project from development mode to production mode, you need to build the project using the 'npm run build' command.
• Run 'npm run build' command in the terminal to create a production build of the project.

• This command will generate a 'build' folder with optimized and minified files for production.

• You can then deploy the contents of the 'build' folder to a web server for production use.
Answered by AI
Add your answer
Q5. What is lazy loading and how we can implement in our project.

Ans. 

Lazy loading is a technique used to defer loading non-essential resources until they are needed.

• Lazy loading helps improve performance by only loading resources when they are required.

• In React, lazy loading can be implemented using React.lazy() and Suspense components.

• Example: const MyComponent = React.lazy(() => import('./MyComponent'));

• Example: Loading...

}>

Add your answer