Abhay Gupta

Yes. Sure. So, hey, my name is Abha, and I'm working as a front end developer. Like, I have around 4 years 9 months of experience in the front end development domain. So from the starting of my career onwards, I've been working with React JS, HTML, CS, and JavaScript, then later on, I picked Next. Js because it is, like, a much better version of React in its entire framework, whereas React is, like, green only. And it also provides server side caching and all those, sorry. Server side rendering, static side generation, and all those things. So that's why, like, I started working on Next. Js also, which is also built on React. And, recently, I'm working with Zuma, which is like a prop tech, a company a prop tech based startup, which is funded by, Viacom, and recently, they have closed their series here. So I was the lead front end developer there, and I build many of the applications from scratch. So first was the inbox. Inbox is basically just like a WhatsApp messenger app where the users can just communicate with each other seamlessly. And the users here were, like, one of our agents and the customer, which we are we were dealing in a b to b space. So the customer can send the message and of Kelsey, which is our, like, AI chatbot, was unable to respond. So then, our agents will come into the picture, and they'll just reply on behalf of the Kelsey. So apart from the real time conversation, it has around 38 35 to 40 features, which was, like, the appointment booking that you'll schedule link. And, the user wants to update any of the information or, like, his or her preference for the unit in which they are supposed to move and some more options which we can, like, give around the budget or the preference or the area selected by the user. So apart from that, this was one of my project in which in this, we have used GraphQL, h, React, HTML, CSS, and all those to the rest API. Some of the APIs were, built on the rest API. So yeah. And apart from that, I was recently, I was leading a team of analytics team dashboard, like analytics dashboard where the users can visualize the performance of Zuma on their entire portfolio. Like, it's like the number of messages, the users number of messages that Kelsey has sent to the to these particular communities or to these clients, they can just log in to the dashboard and they can see then they can manage the users that, portal users will get the access to the dashboard and what sort of permissions do they have. Then we have the skill c connect where there were some sort of questions for each community, and there were specific answers for each community. So whenever a community is going live, then, those answers will automatically be fetched by the, Kelsey, so that it helps in, like, building a database and making Kelsey more accurate. So, yeah, this is this is all about. And before that, I was working I was working as a front end developer in Angara Ecommerce and World of Fashions Private Limited, whereas in Angara, I was, like, responsible I was a part of the team, which was responsible for migrating the site the entire PHP site into the Next. Js, and I was handling their product page, cart, and checkout page flows. So this is this is, all about, my journey of my entire career.

Yes. So JWT is basically a token based authentication which, most of the apps in today's world are using to just do the authentication and authorization of that for that particular user. So let's just start the flow. I'm a user, and I'm going to a site which requires a login. Without login, I can't access much of their, functionalities or, like, it's such a bare minimum criteria that first you should log in, then only you can access, certain things. So this is also called as a JSON web token, which is we are storing the we are storing the information of the user in some sort of encryption so that no one by just looking at the token, no one can analyze that, what are permissions, or what is the username, or what is the user email, or any sort of sensitive info, we are not letting, anyone to made visible on the UI. So let's say someone is coming in. Let's say my name is Abhin. I won't log in to a particular site in which I have already registered. So I'll just go I'll just type my name, password, whatever the login flow is there, and then I'll get a web token. So that web token will be responsible for, like, communication between my front end and the back end. So whenever I let's say I want to fetch the number of users my org has. So I'll send the rest API, like, let's say, slash users with that JWT token. Then at the back end, that particular on that particular, right, they'll analyze whether I'm, I'm authorized to perform this particular operation or not using the permissions defined in the JWT token. If I am allowed, then I'll get the data. If I'm not allowed, the server will through 401 authorized tonight. And after some time, also, it has the expiration time, which after 8 as I had to log in to the system again. If I'll go to the if I'll go to the site and if I'll try to access any of the APIs or, like, any of the pages, then they'll just directly throw me 401 saying that your token has been expired. So this is, like, kind of what do we say? This is kind of system which is required for the security of the site so that no one can no one can manipulate the digital token or no one can access the access our side without having the proper, permissions or the authorization. So this is all about, like, the strategy of JWT token in React.

Display method 2 unit test unit test. We have to confirm that logs on. Okay. So one of the method, is, like, in React components to write, your test cases, which is using the contacts. So what we can do is we can just move the entire context, which has been, like which we are importing from let's say there is a component there, which is, like, importing the context provider a, and we are using some of the some of the properties of that particular context. So instead of just going and writing the entire context flow, what we can do is we can mark the entire context in the unit test cases. And, not exactly the entire context, but whatever the values our component is using that we can mark. And once we have done the mocking of that particular, values or, like, the context provide for that particular context, then we can just simply use the variables and then add their own test cases to see that whether the value of these particular the values of some of the properties are best, then their results should be equal to that particular thing. So, I think just by working, we can simply achieve this.

Use just to simulate browser events and, yeah, to your test. So I'm just giving you let me think how you can use how you can use just to simulate PROWSCR browsers, events, and, via unit test. Yeah. So browser events are, like, mostly like, let's say, the doom events are, like, handle click or, any sort of the events which are provided about by the browser. We can just simply write the mock functions for all those, for all those unit test cases that if the these functions have been called, then use these mock functions instead of the regular functions, and we can simply achieve, whatever we want to do with those functionalities.

What style do you follow to ensure we have shared management logic as a robust and maintainable contact? So I think there are a couple of techniques to ensure that the React suite management logic is robust and maintainable. So first one is first one is, we can use we can use the Redux toolkit in which we can create the store. We can create the dispatch functions or the dispatch events, and there will be one more file which will be, like, holding the states, whatever the states with the and they'll be associated with, each dispatch functions. And, initially, we will be having all the initial values for all these states, and we can just directly write the like, let's say, use dispatch, get this particular thing, and it will go to the store. It will find that dispatcher, and it will call the API, then it will update this state on itself and will get the updated value. So here, in this case, we have, like, a single source of truth that is the reduct state. And for each page or, like, each component or whatever the how complex our app is or, like, how com on how complex functionality which you're working is, we can either create the, like, dispatchers and the states for each of the functionality features, or I think we can do it on the page level also. That also works. So that is the first thing was we are not writing any sort of logics in the components. We will be writing all the logics, all the modifications and all the logics in the Redux toolkit files so that it will be easy for us to maintain that as a single source of truth. Another one is, like, which is my personal favorite, is to use the context providers as much as possible to wrap the entire app in a global context provider in which we can store the data. Sorry. in which we can store the data. the global data is basically the not really JW token, but any other user related information we can store or I can which language user wants the entire site to be and so and so, like, some global things. And then we can make, like, the context for, each of the pages or, like, each of features. But we can do both, like, pages. We can make, the context providers. And if we see any complex functionality, we can just create one more context provider and wrap their entire context provider into, wrap their entire feature into that context provider, which we have specifically created for, that particular feature so that, there will be a single source of truth, the entire state, the entire logics, the handle change, clicks, entire thing, the entire data part of the thing will be in that particular file. And, our normal files will be just, simple HTML and CSS with some rendering logics. That's all. So I think that's easy to use also, and that is, like, pretty much maintainable because if we want to do anything logical, just go to that particular context, find the variables, find the function, update the states, and you are good to go. And it is also, I think, robust because we have, like, single source of truth. It's not it's not a buggy thing that some of the functionalities are in file, some are in file, and some are in file c. We have to debug that. We have the errors occurring. Everything is there in the context, and we are good to go. So, yeah, these are the 2 techniques which I use personally to make the react sheet management logic more robust and maintainable.

How do you ensure rest API and are handled efficiently to provide unnecessary renders? Cool. So I think the rest APIs, which we'll be calling in the React, we'll not call them directly. We'll not write them we'll we'll be just writing all those API calls in the use effect only so that, either on the use effect or on some even based clicks. Like, let's say, if someone wants to submit the form, if someone is applying the filter or so and so, then only we'll be, like, calling those particular APIs or either we'll be writing them in the use effect. So whenever the someone is, like, someone wants to change their data or someone wants to update anything or someone wants a new data on their page, then, we'll call the API. Otherwise, if any of the our parameters are changing, which on which, like, our get data is dependent on, which we have provided some filters or anything filters are updated, but our data needs to update. So we can pass a dependency error, and the user have to call the APIs whenever all those functionalities, whenever all those values change, then we can call the APIs. And, also, what we can do is, like, let's say there are multiple dependencies, like, there are a, b, c, and 3 dependencies out there, and let's say 2 of the dependencies are changing. So a and b both are changing, then our app the use effect will be running further 2 times. So what we can do is we can either stringify it, like a hyphen b stringify that particular thing. So if this entirely is changing, then so the benefit of this is, like, let's say, a and b both are changing, then our string will change for the first time only, and our user will be calling for the single for the single time only. There won't be any multiple user calls or multiple API calls. So yeah.

In this Node. Js code, extract the server as unresponsive. Determine why and indicate how you would debug this issue. Express is equals to require express app equals to express app dot get request.set time out. Hello world r dot lesson 3,000. I'm sorry. Who is unresponsive? I'm gonna apply. I'm gonna apply. It goes to express app.card. I think everything seems fine. I think Harry is dot send cannot be arias dot send is not any sort of, keyword or, like, request aria dot send. I think instead of aria dot send, we should have used something else. Or because of this aria is not send hello world thing, this will go there. So this is my finding, I guess.

Imagine the following snippet causing the application to run-in critical screen which cache a new method might be improperly used here and what the potential as user profile, a concept of all user data and a component of non component to a user. There's not such static data as it does not browser or user data. Static get try to check from. I think, it's, it's updating the data when we are when we are, like, doing the component mode. So this is using the set state. K? So I think, instead of component mode, we should use component update. So whenever the props are changing, our component update will call, and it will set the state user data to the latest, whatever the props which props we are getting. So I think, yes, the instead of component mount, we'll be using the component update method, and then everything will be rendered correctly for this particular component.

How would you design the actual management system that can handle complex search between the components efficiently? Okay. So as I've already answered this particular question, what I'll do is, let's say, I have these 5 components and each of the 5 components has, like, 1 or 2 child components. And so what I'll do is I'll just whatever the things I'll globally use in. So let's say, I have defined 2 states, and I'm passing all these states into these 5 components then from these 5 components to their child components. And let's assume there are, like, 3rd level of, children out there, and we are sending those states to, like, 3rd level of children or, like, from, like, parent to the grandchildren, which we can say. So instead of doing this, what we can do is I can create a context provider. Once I've created the context provider, I can wrap the entire functionality into that particular context provider. I can define the state in that context provider, and then I'll be importing the use context. By using the use context hook, I'll be importing the entire context. And whatever the values I want to use in each of the conference, I can just simply use them. I don't have to take all the values which the context provider has. I'll just import 2 to 3 I'll just take 2 to 3 values or whatever the values or whatever the values which are required for rendering of that particular component. I'll be just using that. And in this way, we can just, we can just avoid prop drilling. We can improve, we can improve the readability of the code, and, also, it's easy to maintain because, we aren't really 100% sure that we have not missed any of the props or, like, we have not, we don't have to think of that we have passed the props correctly or this shared correctly to the child component, and that child component has passed the correct things to their child component. So I think that this in this way, I'll be handling the complex React complex shared states between the components.

Yes. so there was a situation where, like, where there was analytics dashboard, so its loading time was, like, 7 to 8 seconds, and we have a huge data. We have a huge sort of data. So it was causing rerendering again and again and again and again for some of the components which were not required. So I started with the React dot memo thing. Let's say if the props are not changing, let's just not rerender all these components. Because if the parent prop is changing, let's say someone is applying the filter, then the table and all those things, were changing. Let's say if I'm clicking on any particular tab and the drawer is opening and it is causing the rerendering of all the components. So first step, I just use the react dot memo thing. Then, again, the page load time was not that good. So then I started thinking on how we can make how we can actually you take, how we can actually use the next JS. So, I started building out I started, writing code and get server side props in which I was getting I was getting the data from the server. And, initially, the page will load with the CSS, not with the bundles. And then after that, it will go and start rendering the client side bundles on the client side. So this, helped me a lot in improving the performance. And apart from this, also, I've shared one of the example wherein which, if our useEffect has, like, the multiple dependencies, multiple array dependencies, then either we can create a string or we can just send or stringify it or we can do anything so that our use effect will not be rendering a number of times and our API won't be calling that number of times. So that is the another thing. And apart from that apart from that, I also use the preconnect things to make the things better, just to reduce. Like, 500 milliseconds have been reduced when the handshake was done on the server itself. So they don't have to come to the client, wait for the server to get response. That is one of the thing. Apart from that, I think for some of the values, which were not updating as frequently, I use the use memo thing so that, our React application React application or the React components don't have to do that calculation again and again, and we can save their time. And so this was one of the one of the rendering techniques, I have used. And I think, yeah, these are, like, pretty much I have used only these 3, 4 things to optimize their engine techniques or improve their engine techniques, from my last startup in which I have worked.

Assured the process of constructing a retroactive user while considering okay. The process of constructing leverage and the app to user interface and react while considering the performance and maintainability. So the process is quite simple, in my opinion. So what we can do is from the starting onwards, we can create some of the basic components. We can create some of the basic components such as, like, buttons, text header, footer, sidebars, and the correct image carousels, image components, and some other basic components, which are, like which we can call atoms so that, those atoms, we can just combine and make something bigger. First, we can do that. Once that particular thing is done, then we can start creating our pages, our home page, product page. Whatever the application requirements are, we can start building those pages, and we can use those components. And we can make sure that every component itself is reusable, whatever the components which we are trying to make. Let's say, from all these items, we are trying to make a component, which I think which will be used by other pages also, by other features also, by other components also. So let's try to make each and every component unique and share as shareable as possible, so that we can use that component, anywhere, anytime in any of those components. And, it should it should be able to handle all of the logics and all the things inside that particular component only so that, we can reuse it anytime. this will save a lot of effort and performance also in while rendering the React app because every time if we are writing the same code, we'll just increase our bundle size and it will decrease our site performance. And apart from that, it's easy to maintain. Thus, you have to just go and change that to a single place. Once you are done with that, we are good to go. You don't have to change it everywhere. Let's say you are importing a button and we want to change some of the colors or some of the fonts or anything in the button. So the first thing is, like, just go to the every file or every component, change the color or the text of the buttons. Another thing is you have this one global component or one atom in which if you'll change, it will change in the entire site. So I think by using this by using, by making our components, as do I say like, by creating components in such a way that we can use it in a number of places, at a number of times with different, for different features or, like, for different business requirements. So the in this way, it will be easy to maintain and it will be high performance. And, obviously, we'll be, like, shipping out features in the product much faster. So this is my process. I'm understanding this is the overall process of con constructing a large interactive user interface in React.