Preeti Swami

I'm Preeti Swamy, and I hold a degree from the University of Chennai. Following my graduation, I pursued a master's in computer science. I am BTEC AMDEF qualified and have a total of six plus years of experience. Specifically, in the front-end domain, I have five years of experience, during which I have worked with various technologies, including Angular, Vue, Nuxt, and React. Currently, I am working with Vue 3. In terms of back-end technologies, I have completed a diploma in Mean and am a full-stack developer with a basic understanding of MongoDB and Node.js. The application I am currently building is for Apple, and I am leading the team as a team leader. As such, I am responsible for communicating with clients, guiding junior team members on new technologies like Vue.js 3, and keeping them updated on the latest developments. Prior to this, I worked with the BFSI unit at Citibank, where I was also leading the front-end team using Angular.

To reduce the bundle size of a Vue.js application, I would employ the following techniques: 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 would be doing is dividing the whole application into different modules. So wherever that particular module will be needed, I will be using that particular component only. So whenever the application is loaded, the user requires it, then only that particular bundle will be loaded. Otherwise, it will not be loaded for the application. So that, the application for 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 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, 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.

We're using guard for authorization, so whenever we're using any authorization, guard is utilized. For authentication and authorization, we're separating the processes. Authentication occurs when a user logs in to the application, and we verify the user's role. Authorization is performed when a user first logs in, and we determine which parts of the application they should have access to. This allows us to grant access based on the user's role, whether they're an admin or a normal user, and provide specific access to each user.

Yes, we can implement real-time updates in a Vue JS application. So, we are using Webpack Dev Server for the Vue JS application. So it is up like a live server. So whenever we are making any changes in the application continuously, it is reloading for the application. So instead of reloading the application again and again, we can just have real-time updates in the Vue JS application with the help of WebSockets or Webhooks.

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, so normal chat application like WhatsApp. I will be using UJS. So for that one, what I can do, I can, 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, 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.

I'm having trouble with Vue.js components below where the UI is not updated in response to changes in their data property items. The items are fetched from the component creation by an API. So, what we can do when we're having a response from the API is, first, check that one particular API response in the network. If we're getting the proper response from the network, then we can say that particular API is working fine. The second step is to verify that one is by logging that particular response in the console. Like, I can do console.log and put that response inside a variable. And I can log that one in the console, and I can see the response. So, if we're getting that particular variable correctly in the console, then we can see that particular variable can be transferred. That particular variable can be implemented in the UI, and we can display that particular element in the UI. So, if the console is okay, then we can move to the third step, where we're directly displaying that particular variable in the UI by interpolation. Whenever we're using API integration with the UI, we have to check these three basic steps, starting from the network, then check with the console. We can also use an alert, and whenever that particular API is called, that alert message will show that the variable is directly going inside the API, and we can get the response or not.

Given the step, utilizing in pings, 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 const to use my store, define my store. They had defined the store, then they have defined the state item. And in action, they have added an item. I this dot items dot push item. Given stupid utilization of Pinia store, there is a logic error causing state leak across multiple instances. So with that one, the state is declared as an 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? I have not used AWS as part of now, so I don't have that much of an idea about AWS.

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