Jatin Saini

We have to understand more about your background by giving a brief introduction to yourself. I am sure. So, myself, Jonathan, I'm basically lead front and delivery at Onefinet. So I've been managing, team of 4 people including myself. For front end development. I've been overlooking all the front end development. Related to b to our b to b products and b to c products, which includes, AI screening platform and including platform for b to b with which have AI features, AI screening, AI job promoting. And, other than that on B2C side, I have worked on AI networking platform spot, chat platform, notification systems, subscription model. For buying the subscription for platform and, some events. So I've been living in, from Delhi, living in

Imagine you have an existing PHP application. How would you react to the code into or to introduce React conference without disrupting the current To introduce React components, to So on this particular approach, I'll basically see, all the functional approaches I have. All the functional components, all the functionalities which, we have. On, PHP, and I'll start by, migrating components for that particular flow. I mean, the single functionality, like adding a card, that could be functionality. That could be, restructured into React code. So, by you know, putting bits and pieces of that particular groups, 1 small components at the start. And then updating the whole flow. Based on, the updated components we have in the React. That would be the approach I take here. To in Refactor all the PHP code into the React. And slowly migrate all the

How would you refactor a poorly written JavaScript code that is difficult to read and maintain? So, uh, personally, I think I mean, I'll basically see what all the functionalities are, what exactly, uh, the JavaScript code is doing. Uh, but at the end, I would like I personally like to rewrite the code itself as a refactoring complex who takes more time than writing the code from scratch. So that's my general perception on that. But I'll basically see all the functionalities which are there, all the edge cases which, uh, have been taken care of. And I'll see if there are any data leaks in there, uh, if the if we are using uh, more stories than it is required, some, uh, empty states are there. So, I mean, I'll try to reflect and made it more readable by updating the variable names, uh, adding some comments if necessary. But I believe, uh, component names would be more, uh, than enough, uh, to component names, function names, variable names will be more than enough, uh, to, uh, to, uh, to, uh, let the developer read that what exactly this code does instead of adding come adding comments. Uh, comments will be necessary if the code is a little bit more complex. So I'll basically see through what exactly that code is, and I'll update, uh, all the things which are necessary and rewrite the code from scratch, uh, to have the same functionality.

Explain the process of creating a responsive or design layout using CSS 3, uh, media queries. Oh, yeah. So for our while using CSS media queries, there are 2 different approaches I could take. Uh, first 1 is mobile first approach and, uh, second 1 is desktop first approach. So as of now, I have been I've worked on both the approaches, but I'll explain, uh, mobile first only. Uh, as it's, uh, more users are using mobile as of now instead of desktop. So, uh, for mobile, uh, first queries, uh, mobile first, uh, responsive design, uh, we basically design, uh, the CSS for the mobile, and we use media query. And I'll I'll use media queries, uh, could, uh, define the different different screen sizes for tablets, text stops. So So there will be media queries under the CSS code, which is, uh, basically updated for, uh, tablets, text stops, uh, large screen size, 4 k monitors. So that uh, but, uh, as generally, what I do is I basically wrap the whole website in a component which doesn't go above, uh, a certain, uh, pixels, which is 14:40 in my case. So if we use a bigger monitor, we'll have a larger white space on, uh, left and right of the app, and we'll have a app on the, uh, center. So I'll basically, uh, use CSS. Uh, I mean, Marillis CSS or other CSS which we are, uh, I believe we can guess variables, we'll use vanilla CSS or CSS. And any pre processor. I'll, uh, create the CSS for mobile and then using the media queries for mid screen sizes, large screen sizes, x l, double x l. Uh, I'll basically update the CSS based on the screen size and the layout which is required.

Explain a strategy to optimize react confidence in dealing with, uh, complex state logic. So I mean, like, we could use multiple things here. I mean, if you if we have a complex state logic, then, uh, that means we have multiple states that, uh, 1 state is dependent on other, another state is dependent on 3rd. Uh, so there might be a complex logic, uh, to update the state. And to deal with that, I believe, uh, the most, uh, viable solution or you can say, uh, the first thing which comes to my mind is, uh, use reducer as we can use that. Uh, it will basically, uh, we can create the reducer. We can create the states that based on this particular, uh, case, what exactly the states needs to be. So we do not have to handle, uh, all the states separately. Like, we let's say we had 3 different states for use USD, and we were managing, I mean, uh, all 3 states based on some condition. So that would be more inefficient. I mean, we were up there were we were updating 3 states. We are pushing 3 different function, uh, 3 different, uh, uh, updates in the, uh, queue. Uh, but with use reducer, there's only 1 operation, and we'll basically upgrade all the things. Uh, so that is 1 thing. Apart from that, I believe we could use some external libraries like Redux, that it also provides, uh, a highly complex, uh, street logic. And we could also use context API, which, uh, also provides the same, uh, if we have a smaller scale of application.

What strategies would you implement for state management and arts, uh, scale react application? And so, uh, for street management, I believe there would, uh, there's require there would be requirement for Global State. So for global state, I would, uh, introduce Redux as it is really good for our large scale applications, Uh, while, uh, introduce let me get to the screen if this happens again. What the QRII can't connect to iCloud. Got it. Sorry about that. I mean, uh, there was a pop up about, uh, not, uh, pop up about, uh, signing in. Yeah. So where was I? Shit. So, uh, basically, I would implement Redux for our global street management and, uh, uh, also for consuming, uh, API responses so that we have, uh, the access, uh, uh, to any of the API response, uh, to in any of the component. So that would be, uh, the major goal there. Apart from that, uh, I'll go ahead with the, uh, use state for local states, uh, like some, uh, metal states, sturling state, which are some sometimes necessary. So I'll go ahead with that, uh, while having a larger set of, uh, states available, uh, global states available for me to consume.

Analyzing, uh, analyzing the phone and the also could, uh, not identify the logical error in the effort statement of that may lead to an expected response. It's not even formatted. Uh, I must use a resolution. Name, Alice age null. Okay. The user is close. Okay. And function check age user and we pass user in that age. And if user dot age equals to personal or type of user dot age equals equals to undefined. Okay? Or type user dot age equals equals to empty string. Then console dot log. H is not provided. Else, if user.h is less than 18, uh, then console dot log user dot 0 uh, considered log user is an adult and check age user. User pass key unexpected results. 0 admin, uh, 0 admin. So, uh, this word will type of user dot, uh, age equals undefined. It's written in quotes, which is, I believe, are not correct. So if, uh, for any user, the age is not, uh, I mean, age is not present. It'll, uh, still say, um, it'll not say that age is not provided. It will say that, uh, it'll go ahead with 1 less than anything. No less less than anything. It'll go as a user is undergrad. So, uh, the issue with, uh, here is an, uh, with undefined as it's provided in the codes, uh, as it's a string, not, uh, the actual type. So that's the, uh, major issue here. Another another 1 is if you provide age as 0 I mean, by default, if you provide it as 0, and I believe there should be another, you can say, if it's condition for that as the age is not provided. Other than in this case, it is going to say that, uh, the user is under that when the age is 0, which doesn't make sense.

Give me the given lab component. Uh, codes will explain the issue as with the current implementation of the user for token, how it might affect the components performance. So, uh, user from the app and and hyphen hyphen function use profile user ID, uh, const use, uh, user set user, uh, use statement. Okay. User is is a sync function fetch user. Const response equals to await fetch, uh, API users user ID user ID. Okay. Function is a defined. Okay. Report taken. User ID. User data is equals to fetch use case. We await response to JSON. Async copied with fetch? You know, fetch user. Machine which user. So there are 2 things, uh, which I believe are issue here. 1st, on is we're using asyncawait with fetch, which, uh, is not correct as asyncawait is an alternative better than fetch as it lets, uh, call call the API as a synchronously. Uh, apart from that, I believe we are setting the user data and the same useEffect, which is not correct as we are just fetching, uh, the user. And, uh, as of now, I believe it will set, uh, null to the user and user, uh, data will not be updated then. So this particular code will not work, uh, will not show the user data, uh, correctly. It will always show null or undefined. And so to, uh, correct this code, we need to have, uh, use, uh, dot 10 in this, uh, with, uh, I mean, without using a sync of it, we can use dot then, then it'll work. Otherwise, we could use, uh, a sync of it and add a another use effect, uh, so that, uh, set user updates, uh, only after when we fetch the call, uh, when we fix the user.

So, uh, I mean, we could use middlewares to handle multiple things. I mean, create multiple middlewares. How could you react to this to Huddl? So while creating a store, we could also create a middleware, and we could pass, uh, that middleware in, uh, in the store, uh, as with the name of middlewares. And, uh, there's also a middleware which helps in, uh, better development. I don't exactly remember the name of, uh, that particular middleware, but it helps in the movement mode where we can, uh, get all the states of it does all the our time frame and the states when it's being updated, all the, uh, flow for that update. Uh, yeah. Apart from that, we can also introduce more multiple middlewares like products, thong, products saga, which basically allows us to have a synchronous, uh, API calls or a synchronous and not a just a bit of a asynchronous request or functions, uh, methods, whichever we want to do. So, uh, in, uh, React Redux only, uh, that is how we create, uh, I mean, uh, we can introduce middle west, uh, in a form of Harry. Yes. Synchronous actions, which provides

It's like how you would configure and deploy the other container with the React application to AWS. So, uh, to answer the solution, I mean, uh, I basically, uh, configure all my environment variables. Uh, I mean, I'll basically be the 1st Docker container, uh, inside the Docker Docker container. If there are multiple environments, I'll basically have to create 3 let's say, I mean, generally, I go ahead with 3 different environments of testing from. So I basically create 3 different AML, uh, YML files, uh, different containers, which basically, uh, takes the code from a particular branch, uh, dev, test, and prod, uh, or master main. So we can name any of, uh, change the name of any of the branch. So, uh, after having 3 different MFS files, we'll basically configure all the environment variables which, uh, we have in that project, uh, into the AWS I mean, the Docker container that, uh, these are the environment variables required and also provide those environment variables in the AWS environment for, uh, these particular branches to access. So environment variables could be different from, uh, for different environments, uh, dev test and crash. Same. So we could grow, uh, I'll configure that into the AWS and, uh, I'll create the container. Uh, I mean, this Docker container, uh, based on that file and I'll, you know, provide that to AWS whenever all the files I mean, uh, I provide that to a little whenever, uh, main changes pushed, it will follow the set of instructions written down in the container. And, uh, creating a bill, uh, and getting the environment variables from, uh, AWS space. And then, uh, if we have a specific location for build, I mean, that too, we can provide that. And then then I'll receive worded to AWS and, uh, deploy it. So based on that particular, uh, container, uh, all the sets, uh, sets of, uh, all the set of instructions or, uh, steps will be followed every time we make a change to the code, uh, to the branch. And, uh, those steps will follow and, uh, we'll have updated, uh, version of deployment.

In what ways can Jenkins integrate into the the links that that includes we have done used React and PHP together for integration. I'm a little bit not sure about that, but, I mean, I have, uh, I'll have to see what I believe I'll, uh, this is something which I can, uh, quickly look at look around and get the answer to As, uh, I believe people are using it, and I'll be able to get what exactly what they are doing. And, uh, I will be able to come up with a, you can say, a viable approach that this is what, uh, we should do, uh, based on, uh, based on the learning and the things which are present, uh, there are, um, on the on our different websites. So as of now, I don't know, but I believe it won't be a a huge task or huge roadblock, uh, uh, for, uh, to if we ever want to do this. I mean, if we are doing this, and I believe I'll, uh, get acquainted to this 1, uh, pretty easily.