Visal Yadav

Hello? Yeah. Hi. My name is Vishal. Um, I am listening from. Currently working as a softening software engineer in Kotak Interactive Private Limited. I currently I have total, uh, 5.5 years of experience, and in the years, I have experience of 5 years. Uh, kindly, I'm working with a project called Williams. So Mine. So it is a basically basically ecommerce domain. So it is a e commerce site where I I have my responsibilities. I I'd like in from the design in the Figma, I need to create the same UI using the VJ and the tailwind CSS and also creating the unit text pieces for that company and creating and also integrate with the backend API, right, in the front end. Uh, also for the store management, we are using UX. And also for unit test cases for the components we have created in the future, we are using the Gist as a unit test framework. So I other than that, I worked on another ecommerce domain, an ecommerce website called Molekule. So it is also, um, a Air Purifier. You will see user can go to the website, and they can check all the models of the, uh, Air Purifier. And they and they can order and may add the address and create the order and make the payment, and it will be delivered like that. So I I'm in both projects in my current organization. I worked as a content developer in that. So other than that, I have only very less, uh, I mean, 3 months of experience in the

Yeah. For that, we need to check the dependency. We like, uh, what are in the dependency? What are the things we can keep? It is, uh, without third party library. If we can create that component. So we'll create. Otherwise, we'll, um, uh, we'll install the library in in our project. And based on the dependency, it means how much it is, uh, it's taking the uh, taking the space, how the page performance is. If it is affecting the page performance, also, response time also, then we'll try to find the solution for that. And for API call, normally, you know, project for API call, we use that 20, um, library, like, Axios, we are using. So with Axios, we are making the all the API calls and all the all the data from the back end, we are taking from

So for that, the feature for feature, we need to, first, we'll create the view component. And if it is the page if it is a new page, then that page will have we have the feature. So we'll create the component for the feature, and we add the means for API call in store management. We'll use UX so that so through the store, we'll take the data and the data. And for Vue. Js, we create the that component, we create HTML part. And for CSS, we'll try to, um, we'll try to create a a common CSS template. So in that in that, we'll keep all the CSS for that component. And for API calls, we'll use

Yeah. For user's performance, for for optimizing the performance, um, so we can use a lazy loading. Means, based on our based on our requirement, we can load the, uh, data. Means if, uh, if user needs only, uh, data and also the component, we means at once, we'll not not, uh, load all the components. Uh, if user performs any particular action based on that, we can, uh, we can populate the components. And for a REST API, like, uh, we can use, uh, means, uh, async, uh, async await, uh, calls. So based on that means, simultaneously, when page loads, API call also gonna happen. And, also, we'll manage all the error handling also. Means if any error happens or any any any any error occurs, so based on that, we can show the, proper errors and also for means, uh, data in that page. So we can, uh, we can use the Vuex so we don't need to pass all the data to the props in the component. From the to, uh, centralized store, we can take the data in the component. And for CSS rendering, we can use, um, minify version of the CSS. And all the unnecessary CSS, we can remove all the unnecessary

Yeah. So in the in the Vue. Js, you managing the state, we use Vuex. So Vuex is a, um, centralized store from where we can take all the data, where the all the data in the components or in page. So, like, if we need some data, directly, we can click from the, uh, UX code. We don't need to pass through the props in the component, or we need from the child component, if we need to pass in the parent component something. So we can directly, uh, directly get it, and we can take the data in the, uh, in the component through the store. So it will be helpful means means with no need to it will reduce the same, uh, similar code or similar API call, uh, right in the similar, uh, API call multiple times. At one time, if we need, we'll just call the API to the store, and we'll get the data.

Yeah. So in in the view in Vue. Js, there are 8 life cycle groups. Before create created, before update, updated, before mount, mounted, and before destroy, destroyed. So most in the mount, we we, uh, we call all the in the page load, we we call all the API call in the mounted. So based on the main page load at the mounting mounting state, we'll call all the API needed. All the data needed, we'll add that in the mounted life cycle room. And other than that, if anything anything we need to to load before, uh, means before mounted mounting process, so we need to, uh, write in that

Actually, in this question, I'm not able to see any This is very only flat background.

Sorry. I'm not able to understand this question. Means here in the function get book, we are passing in the parenthesis, uh, title and author in the in the read variable. We are just adding the function of reading title, whatever the algorithm is we are passing and the offset by, uh, Paulo Coelho. And in the, uh, in the return, we are determining object defining object title, author, and read. And here, down there that we are passing means we are creating. Okay. We are assigning the value, and here we are calling

Yeah. So in the large, if we need to migrate a large scale project to the from the general I mean, uh, and JavaScript application to view this this to view this. So we can create, uh, step means we can take page wise, and we can first, we need to set up the store where all the APIs will be there. And based on that, we by taking 1 taking the pages 1 by 1, uh, we can migrate all the all the pages and all the code from when we're there to let's pull it here. Sorry. To view

Yes. So for the progressive web app technique, we need to our, uh, view this application should be should be responsive. Like, in in mobile, it will be it and the UI should not break. So we need to work on the media queries for the CSS. Or if we are using any in in other, like, Tailwind CSS. So when writing, we need to first we need to first create the design for mobile first, then it will be going for tablet and then desktop. Like that, we need to to do that.