Sandeepa singh

Could you help me understand more about your background? Sure. So I am Sandeepa. I am a senior software engineer, more majorly expertise in front end development. So in front end development, I have been playing with React, JS, HTML, CSS, JavaScript, React Native for mobile applications as well for creating Android and iOS applications. CSS, SCSS, material UI, semantic UI, these are the all, um, libraries that I have worked on in last 5 years. So in last 5 years, I have created app from scratch and deployed it to production, uh, to use by millions of user. So one of those application is in class plus DIY. In that application, we were working as a product as a front end team of 14 engineers and deploying it to production on daily basis, like, on weekly basis. And I have worked with method as well and bottle, uh, water water cycle method as well, but more majorly, uh, work with with work with Jira and Figma on front end to design, uh, to that helps us to design the large scale applications. Moreover, I have, uh, experience in team management as well. Uh, in last 2 years of my career, I was handling a team of 4 to 5 developers. Currently as well, I am also, uh, handling a team of 3 developers and 2 front end interns under me. That's about me. Thank you.

So okay. Tailwind CSS as speedy, uh, development helps us in developing the, uh, applications speedily. Instead of snitching between HTML and CSS files, we can directly, uh, use it as a markup CSS, like design and directly markup, and we can use it directly from there. Through the help of, uh, Tailwind CSS, we can highly customize our application. That is not possible with traditional CSS methodology even with the CSS. Or, uh, major drawback that I have come, uh, like, I have faced by using a UI or semantic UI was when we have to make a component customizable. Let's say we are using a button or a model. When we have to customize it, then we have to override their internal, uh, internal CSS a lot. Like, by let's say there is a dev inside a dev and inside a dev and then there is a label. So we have to, you know, drill throughout that label to customize it. That is very easy with Tailwind CSS. So Tailwind CSS, uh, is making development process very quick instead of, uh, traditional CSS methodology and utility and utility first approach all. So, you know, enhance the development process and drilling through a a component to make it customizable is very easy in building CSS altogether.

Okay. So in context, API is a way in React to pass, uh, is to store your variables or store your, uh, global or, like, store your variables or constant globally and leverage it throughout the applications. So it is a effective way to produce global variables that can be passed throughout the application rather than, uh, and it hap it helps a lot in reducing the prop drilling through like, initially, we have to, uh, previously, we have to prop drill a lot for, like, uh, if we want to use a particular state inside the child or grandchild component, then we have to pass it from grandchild to child and then to parent and so on. By the use of React constrict context APIs, we can easily store it inside a global variable and use it anywhere. Like, uh, if we if we have a parent and we want to use a particular date, let's say, in the child component or inside the child of a child component, component, let's say, a grandchild component, we don't have to pass it down through through the help of props. We can directly call it from the store. And Redux is also a similar kind of way to, uh, reduce the prop drilling and storing the variables globally. But context API is somehow more better than Redux itself because in Redux, we have to use actions. We have to use reducer. Then we have store. So for saving a particular component inside a store, we have to call the actions and action will call the reducer and they'll do the complex, uh, you know, the calculation, and then it will get to, uh, in store. But in React Context API, it's quite easy to storing a a variable globally.

Within JavaScript, uh, how do you ensure browser compatibility across major web browsers? Okay. So, uh, if you want to ensure the compatibility across the major web browser, first thing first, you have to use those kind of libraries or HTML, uh, context as well That is global, uh, that is, uh, compatible throughout the browser. Let's say, do not put some hacky kind of thing to, uh, work on Safari, let's say, and that will definitely broke on HDO, like, um, Microsoft Edge. So there are, uh, many functions in JavaScript itself that that will not work on Microsoft Edge. Like, set set time out, set time interval, sometime works glitchy on the Edge. So while working with those functions, we specifically, uh, you know, manage those states for Microsoft Edge as well. Like, let's say I'm using a particular JavaScript function that I know will not work on Edge, then I will definitely put a put a check on it. Like, okay. Or if the browser is Edge, then do this instead of that. You know? Uh, do different, uh, calculate different differently and, uh, show the diff, uh, result differently. Although the output will be the same, but the calculation and the process will be, uh, said differently. That thing, we have to keep in mind when whenever using JavaScript. Like, uh, any JavaScript function that we know, it will not work on different web browser. And, uh, but what I personally do to check the cross browser compatibility is by while making an application, uh, I simply code while but while use by, uh, you know, doing the dev testing, I definitely dev test it on major browser like Firefox, uh, Edge, Safari, Chrome so that will ensure, okay, if all the things are intact or not.

Okay. So, personally, I have worked with CSS Grid and Flexbox both. So Flexbox is usually used in mobile applications, and, um, their grids are not possible. So we use, uh, flex work Flexbox a lot in mobile applications. Okay. So the major difference between the grid and the flex box is CSF grid usually divides, you know, uh, the whole screen into the 12 grids. And in those grids, you can easily put your data in, like, uh, put your components in. And from there, you can, uh, manipulate it. But in Flexbox, it gives you a major flexibility in terms of, okay, you want to let's say, there are 3 components, 3 boxes that you want to show on the screen, and you want to show it directly, like, between the equal square distance, you can simply apply a CSS on parent component like diff, uh, display flex and, uh, justify content space between. It will automatically, uh, you know, make the space between the three components equal. There, uh, that is the time when Flexbox comes in handy. While CSS grid is all uh, definitely, we should use CSS grid when there is complex table components or, uh, components that we have to, you know, uh, put it at a certain position. Like, you have 12 we have a grid of 12. Right? Then we want to show, okay, this this particular box should stay here only, not depending on the browser, not depending on the screen of, uh, like, the width of the screen. It should not change. It should come at a particular place, then we showed you CSS grid. Flexbox is by, uh, like, by handy on. When you have a flexibility, like, okay. We want to show it here and here. That will work. Does the space between them should be equal? When we have such kind of requirement, we use to export.

Stateful components again. Definitely. So I use just for unit testing, uh, in. So in just what, um, okay, so in just what I do is when there is a stateful components, right, uh, when we have, let's say, uh, a component that is having a modal component, that should be shown on the button click. So for handling such states in unit testing, you have to define okay. On firstly, give data test ID to everything. If you want to, uh, see, okay, if the model is appearing on that button, click or not. So, uh, make a fire event on that button that you want to, uh, let's say we will naming a button called show model, and it data test ID show model. Show model, something like that. So, uh, in in the unit test cases, just try fire event dot click. Your data test ID, show model. If that fired up, then apply the case. Okay. After this, uh, let's say our model is called beautiful model. Then after that case, just write okay. Screen, uh, screen dot get text screen dot, uh, get text. In the brackets, you should write beautiful company beautiful model to be in the document. By by doing this, we are ensuring, okay, after that particular event click, that particular modal is showing up, and the the text of that model is in the document right now. So while handing the stateful components, firstly, or even not straightaway components also, data study is very important. And after clicking those events, like, after clicking, uh, we are having state or state components where they are doing some actions. Right? So after that particular action, the reaction is also in the document. In the screen, it is shown. That to ensure that is very important. So that is a one way of, you know, uh, testing the stateful components are working fine in React or not. I am personally using just testing library for this. We can do the same with Cypress as well.

An API call is made in the rear conference, but there is a comment best after that is not being followed. Can you identify it and show how to improve it? Definitely. So it is class user details extend. We have component from the sector testing and user details. Okay. Component and noise that we are using an API. It is having the data. There's dots at state. User details data. Loading thoughts. Okay. Seems good. An API call is made in the React components, but there is a common that is not being used. Can you identify and show how to improve it? Okay. So it seems okay. So firstly, we are using React, uh, previous React version, like, uh, 14 or 16. No. Not 16. We are using React 14th here. That's why we're having class component. Okay? And in component did mount, uh, so there is in constructor. We are making a state called user details unloading. And after the API call in the component in mount, we are using then response dot JSON then. We are setting the state. Okay. So there are a few issues with this. So while making an API call, the first thing first, we have to put it in the try catch method. This is this this will work in in the best case scenario. Let's say your API is giving you perfect data response, and you are storing that data in the set state. But what what happen if that API is not working? The API is giving 500, 400, 404. Anything can happen. Right? So we should firstly put that put this API call in the try catch block, and, uh, we should address the error. If it doesn't catch block, we should maintain a state for that also, and, uh, we will we should show some toaster or some error message on the screen. Okay. The API is not working because of the following thing. Let's say the data is not this is just a good API, so that will not be the case. Payload is correct only. But let's say if something happens, like, uh, Internet connection is not proper or maybe the API internal server error is there. So we should catch that in the catch block and show the error. Otherwise, what will happen, this will break and a blank screen a white blank screen will appear on the, uh, application saying something went wrong. That will be very, uh, you know, bad user experience. We should handle the catch, uh, catch thing, like, error in the catch block. So that is missing here. And, uh, when doing component and mount, uh, and fetching the API, that is all correct. Uh, if we are using any set loaders or anything, we should do component and dot mount as well, but that seems fine only. So major issue is that we are not handling the error cases here. Yeah. That seems good.

In a small mistake, that would cause the problem. Please identify the mistake and explain how it might affect the app's behavior. Okay. Sure. Template and then loading user data. This this we're done. For default. Okay. Inside the data, uh, it's been returned. If it did not create an that gives our API then catch. Okay. Better catch. Then. Okay. So the major issue with this is we are not putting inside a try catch block again in creator. We are doing the catch, uh, before then itself. Like, first, we are doing then response response to our JSON. That is okay. And then we are using dot catch. This dot error is goes to true. And then we are doing dot then data and saving the data into user data, which is completely wrong. Firstly, the statement should be for, uh, dot then response response dot JSON, then again dot then data, this dot user data dot data, uh, is equals to data, then cap statement should be there because this is breaking the whole method. You know? We you are using, uh, we are using a promise. Let's say if we are calling the promise fetch here, the API call, and then we are using then we are resolving the promise. And before we are applying catch and then we are resolving the promise, this will break the whole flow of it. So this statement created one is correct, uh, like, wrong itself. And second thing is we are using user data dot name, and we are not saving user data dot name anywhere in the application. We are using this dot user data as goes through data. We are not sure if the user data contains something called name. Right? We are not sure if the data coming here is an, uh, object which has name. So what will happen if the, uh, user written dot name is not there? Again, the application will break and completely white screen will be. Come on. So we should apply optional chaining in user data dot name to in, uh, like, uh, in the port line, we are using p. Right? P v l's, p tag inside the v l's, and then user data dot name, we should apply user dot optional chaining, question mark operator dot name. That is 2 of the things that are wrong with this.

Okay. What strategies can you employ to manage React application state in a large scale React application? Sure. So in React, uh, in large scale React application, I use personally use Redux to handle the, um, states globally. That is one thing. What strategies you can employ to manage applications straight for it? Okay. So application state is first thing first, we are using use states for handling a a a state that is used inside that particular component only. Let's say for the model or the button or the set smaller components, we'll use state to store the component, uh, store the state. Okay. Let's say if there is show model, set show model, and, uh, on that show model comes through, model will appear. All those things, all those states are handled locally in the use state variables. But for the states that we have to pass down in the again, from the grandchild, uh, grandparent to child, uh, to the parent to the child, and so on, uh, for those states, I use deducts for, uh, storing the states and making it global. And throughout the application, we can use those states. So that is one thing that I personally employ, uh, for the application state management in react in large scale React application. In large scale React application, it is very important to have global states because, let's say, on the button click, you want to show a side menu. Right? But you want to show the side menu again when we click on the file, like right. Or you want to show the similar kind of, uh, side menu when we are doing some other actions. So if, let's say, if a particular side menu is having 3 action buttons, you cannot use local states and pass it down again and again. You have to use the global state that is responsible for that, but, uh, for that side menu to show up. That is very important to manage the global state. So what I'll do is I create a a global file called store. In that store, we have actions. We have reducers. We have store itself where all the variables are stored. And then in every file, uh, in every feature, every small small features, we have actions and reviews us to call that, uh, to call that state or to, uh, store something in that stores. And, uh, through those actions and reducer, we, again, store all the data in inside the global store.

What experience do I have setting up? See if we do find friends for the for the app applications. Okay. So for React applications, I have, uh, used to kind of, uh, two methods of deployment. 1st is through NGINX. That one very old way, uh, to handle it. Uh, so, uh, for our internal portal, like, for staging, we have NGINX to, uh, you know, deploy the applications on. So in NGINX, it is very, uh, straightforward. You, uh, you go to your Ubuntu, log in there, and then set up your variables and then push the code on production or staging the environment wherever you are using. And other other other ways, you know, to say Jenkins, that is very popular, or, uh, you can deploy through AWS, I think, but I I have no experience on that. Uh, I have done it through Jenkins. In Jenkins, once you have, uh, you know, written the script to, uh, manage your CICD pipe pipelines, then it is very easy to just you have to click a button to trigger the new build, and it got trigger. You can pull back, uh, you know, you can roll that back as well. You can stop in between if you think, okay, that particular feature will break down. So in through Jenkins, that is very easy. Oh, yeah. I remember. 3rd way is through Versal. So there was our internal CRM tool. We were using, uh, Versal to deploy it because, again, the users were internal users only. So we do not think to buy some paid service. For that, we use version. So in Versa, it is very easy. So, uh, we have implemented with GitHub. So, uh, integrated it with GitHub. So if, uh, if any of my PR contains, you know, the starting prefix of, uh, hotfix enhancement and feature. You know? If if any of my branch are features slash this, enhancement slash this, or, uh, hotfix slash this, it you, uh, it automatically created a new link for, uh, after deployment, it will create a a new link for, uh, of Versal, and we can simply, you know, uh, give that link to the tester or the quality team to, in your verify the usage. That kind of practice comes handy when you are using hotfixes only, and that is, uh, we have to, you know, uh, go on production immediately to just to stop the whole process. Like, first, you have to create a staging build, and then you have to create a pre prod build, and then you have to deploy it on production. You can simply cut out a branch from the production. You can do, uh, a small deployment on Versa. Just get it, uh, get the thing tested there and the rest of the thing, of course. And then you can simply merge that branch inside the production branch itself. So that helps a lot to maintain our CICD pipeline as well as maintain a good branch flow. So that, you know let's say you have some kind of code that you don't on staging that you don't want to go on production. So you don't have to cut a branch from staging, uh, hotfix there, and then go to production, and then think about it. Oh, just particular code I don't want to deploy. You can simply cut out our fixed branch from there and deploy it onwards. I'll get it tested there and then push it into production.

How would you utilize AWS Cloud Services to deploy a static application with maximum availability? So, personally, I don't have any experience with AWS cloud services, but to deploy a React application with maximum availability, and that is that was static, uh, React application. So for static React application, I don't think we have much to worry about. We can simply, uh, deploy it through whatever the AWS process is there. I'm not very sure of that. But we can simply deploy it because it is a static website, so we don't have to, uh, you know, think about, uh, the load or the load it gonna cost to server because there is no back end DPA calls. There is no server connection. So the costing of the server or the load of the server will be the minimum in this case. So I think it will be, uh, easy process to deploy that. Again, not sure. Thank you.