Preeti Swami

about the background by giving a brief introduction. So my name is Preeti Swamy. I have done my graduation from University of Chennai. And after that, I have completed my master's in computer. So I'm BTEC AMDEF qualified, and I'm having total experience of six plus. And if I'll be talking particularly for the front end, I have experience of five years in which I have worked on different technologies like Angular, Vue, Nuxt, React. I'm currently working in the Vue 3. And the different type of technologies which I have used for the back end, like I have done a diploma for the mean and one full stack developer. So I have a basic knowledge of MongoDB, Node.js. And currently the application which I'm building is belonging to the Apple. So I'm leading the team as a team leader. And whatever the communication will be happening from the client and whatever we have to guide to the junior to update them about the new technologies like Vue.js 3. So I'm guiding them for that also. And before that, I was working with the BFSI unit for the Citibank. And we were using a technology Angular in that one for the front end. And that also I was leading the team as a front end leader only.

What techniques would you employ to reduce the bundle size of Vue.js application introduction? Okay, so instead of just making the whole application in a single bundle, what I will be doing, I will be dividing the whole application in different different modules. So wherever that particular modules will be needed, I will be using that particular component only. So whenever the application is loaded, when the user is required, then only that particular bundle will be loaded. Otherwise, it will not be loaded for the application. So like that, the application for the production can be reduced and the optimization can also be increased. So we can use this type of technique.

How would you integrate a Node. Js back end with the Next. Js to handle server side? So whenever we are having a back end so we'll be having environment. We have to set an environment to your application. So we will be having ENV file for that one. So we are if we are having different type of environment, like, if if we are having IT environment, you waiting in production, so we have to give that particular URL in our application in next js. So on the basis of the requirement, whenever we are making a build, so that particular environment only will be used and other, uh, URLs will be committed. So like that one, we can integrate between the Node. Js and the Nuxt. Js. We are able to use the particular APIs in our components.

What is your approach for handling user authentication and authorization in Nextiva's application? So whenever we are, uh, using any authorization, so for that one, we are using guard. So whenever we are having particular authorization and authentication, authentication is done whenever is user logged inside the application, then we are verifying that which part of the application should be due to that particular user. And authorization is done whenever user is first time logging inside the application. So like that one, we can divide the things, and we can give the access on the basis of the user like it is a admin or a normal user. And then we can, uh, give the access to the particular user.

Can you use to implement real time update in a Vue JS application? Yes. For that one, we are using white. So b I t e white we are using for the Vue JS application. So it is up, uh, like a live server. So whenever we are making any changes in the application continuously, it is loading for the application. So instead of loading the application again and again, we can just have a real type updates in the Vue JS application with the help of clients.

How will you design a chat application front end using Vue. Js to ensure scalability will grow number of users? So whenever we are using any application, like, chat application for the front end, like, I will be using uh, so normal chat application like WhatsApp. I will be using UJS. So for that one, what I can do, I can, uh, um, have a divide the application on the basis of different things. Like, whatever the data will be coming, I will be having a different package for that one. So whatever the files they are having, that will be having a different package. And whatever the data they will be storing, like chat and other things, will be having a different package. So whenever we are having an application, we should be dividing the application in different parts. So the number of users, they will be having a different storage. And if the storage is full for the media file, it will not be affecting the number of users which we are having for the contact, like, contact I will be having a different application. And if they are having, uh, media full with the storage like documents, so it will be having that particular bundle only. They'll be getting a specification that it is full. But it will not be affecting the other specifications like other media, like folders and all and contact. So we can divide the things into small bundles and specify the storage for the application.

There's an issue with Vue. Js components below where the UI is not updated in the response to changes in their data property items. The items are fetched from the component creation by an API. Can you explain the problem caused and how would you debug this issue? Okay. So what we can do whenever we are having a response from the API, first, we have to check that one particular API response in the network. If we are getting the proper response from the network, then we are able to say that that that particular API is working fine. The second step to verify that one is we have to console that particular response in the console. Like, I can do console dot log, and I can put that response inside of a variable. And I can put that one inside the console, and I can see the response. So if we are getting that particular variable correctly in the console so that we can see that, that particular variable can be transferred. That particular variable can be implemented in the UI, and we are able to display that particular element in the UI. So if the console is okay, then we can move for the 3rd step where we are directly displaying that particular variable in the UI by interpolation. So whenever we are using the API integration with the UI, so we have to check these three basic steps starting from the network, then we can check with the console. Also, we can put a alert, then whenever that particular API is called, that alert message will be showing that it's that variable is directly going inside the API, and we are able to get the response or not.

Given this step, utilizing in pingas, stone, which is there is a logic error causing state leak across multiple instead of component. I identified the error in the code and explained the impact of this on the application state management. Okay. Export cons to use my store, define my store. They had defined the store, then they have defined the state item. And in action, they have add an item. I this dot items dot push item. Given stupid utilize pinion stone, there is a logic error causing state leak across multiple instant. So with that one, the state is declared as a arrow function. Correct. And that action, we have called add item. This dot items dot push. And then we are having the build store. We have not given the return type. So if we are able to define the return type, then it will be returning the particular variable correctly. So the function should return the value. Then only it will be working fine.

How do you optimize server side reading application in Next. Js for the improved SEO? So whenever we are having an application, we should be seeing that it is should be very optimized for the server side. So for optimization, we can do that. We can divide the application in smart bundles. So whenever the application is loaded, it will not be loading for the whole application as a bundle. Wherever the user is required to that particular feature only will be loaded for the application, not the whole bundle. And we can have optimization. So speed of the application will also be improved by like that.

Can you explain how to use AWS Cloud to reduce latency for the global Nextiva? Uh, I have not used AWS as part of now, so don't have that much of idea about AWS.

Discuss the approach for integrating AWS Cognizant as authentication, yeah actually I have not used AWS in my application so I don't have that much of idea about AWS.