Aakash Bhardwaj

I have a total 5 years of experience as a React JS developer. I have total 6 years of experience working in the industry. I've been working as a JavaScript engineer with experience in front end, back end technologies both. In back end, Uh, very hands on experience on Node. Js, Nest. Js, and stuff related to Express, microservices, Kafka, and databases like MongoDB, MySQL, and all. In front end, yeah, React and then, uh, there's a new thing coming up now that is Next. Yes. So that's 2 I've experienced with and then Redux and all the stuff related to front end technology, HTML, CSS. These are my experiences in the areas. Apart from that, yeah, I have been experienced with leading a team, uh, working as a senior software engineer. So I have experience of leading a team of 5 to 10 people. So I have that managerial skill as well.

How do you collaborate with back end development designer team? So it's more so of a mutual collaborative approach that I follow. So and I follow, like, agile practices here. Like, I Look at the design, the Figma, uh, wireframe, whatever is being given to me. And then I look for the, uh, like, The way, uh, designer design it, they must have something as their perspective, so I try to get that. And after that, I Talk to back end developer about the APIs and what are the things they are expecting, what will be the format of the, uh, payload that they are expecting from front end. And if they are sending some, uh, payload back to front end, what are the structures there? What are the things they are expecting in their proper format or JSON? These things, like, I get into and try to find out before going and implementing things also. Like, I, uh, whenever a problem comes in, I I thought think of it, like, as of, like, second order behavior. So I just try to think of what will happen if I do this and then the end order implementation of that? So, yeah, that's how I do it.

So recently, I was working for a Fintech project. So there, uh, it's basically a crypto based thing. So there, what happens is, uh, the price of the, let's say, cryptocurrency for that matter, keep changing every second or something. And there is a whole list of table where you have multiple things. So, uh, you have to, like, blink up the, like the tables row, whichever price has changed. Let's say something has went up of the current price, so it should be blink up the entire row as green. Something goes down, it should blink up entire row as red. So that's something, uh, I had to do it with your JavaScript in React. Js and all. So, yeah, that's, uh, something, like, I have never worked before, so I don't know. I wasn't aware of how to do that, but yeah. And after going through some manipulations of, uh, useEffect and then trying to do it with, uh, React. Yeah. I was able to do that. So, yeah, that was the challenge.

How would you identify the bottleneck, and what metrics would give you optimization? Uh, okay. So sometimes what happen is as a premature developer, There's a classical example of use effect for that matter. Uh, generally, people, uh, in like, initiate a call, and then they forget to return it back, and that causes leakage in their application? Similarly, uh, there can be multiple areas where the leakage can be there due to the coding practices, the bad coding practices? Sometime, it can also be because of the way you're calling APIs or, uh, receiving data from the APIs? So there cannot be only a single pinpointed problem that you can solve when we talk about optimization and all. But there can be multiple such thing, and one of those can be looking down to the codes, like, what, uh, the things is there, some bad practices being followed the way I, uh, talked about the use effect example? Things like that. And, yeah, there to overcome this, primarily, there's a React build that we make, the optimized build, That should not be, like, very huge, uh, sized in gigabytes or megabytes for that matter as well. So it should be very smaller in size. And after that, yeah, there is a dev tools that we can use to check what are the issues and rendering things. But, uh, sudden spike in traffic is not just a front end problem. That has more to do with, Uh, how the things are working in order in terms of routing, load balancers, and

Okay. So internalization, when we say, uh, first thing is the language, Like, I'm in US. I'd see something in English. I'm in India. I should say something in Hindi. So for that, we Generally, like, if we are using state management like Redux, so we'll, uh, we'll maintain a document global document where we'll keep, uh, translation scripts, like, whatever, like, whatever is something said in English, and then what will be the corresponding Hindi word for that. Yeah. So things like that. So it happens through that global file that like, so far, I have worked for a prod project in Germany, and there we were doing this. It was a big company in automobile, and then we were doing this. Like, we had, um, created a global file where we were keeping all the, uh, translation script, and then, uh, that is what we consume in our application.

For a large React app, I think Redux is what I would go with, because so far, that's what have been, uh, working for me in large application. Like, I have worked for some really large projects. And for state management, yeah, I've I'll definitely go with using

So, uh, right now, as we can see, A's is a optional parameter here. Right? So that means if you like, if you passed in data and there's no like, as mentioned in the problem statement, Uh, age property is not passed to render user, especially. Yeah. That will still be fine because, age is a optional parameter here. But, yeah, at the same time, the user object Object has a type of user, uh, which has 3 elements, ID, name, and age, of which age is optional. So Mentioning case value is not necessary here.

Yeah. There is a show. Uh, when you say if there is nothing, like, there is no user data available, you are returning loading. So, uh, the return thing, either you have to put this loading thing in front of return. Otherwise, you have to wrap it with a small bracket. And that's how it works. Like, yeah, the second part of that is that return and then that small bracket. That works fine, but Same should happen above. Otherwise, you should take that loading text in front of return. Otherwise, it will break. It will not work. Okay. And, uh, potential unnecessary render Good. Yeah. That's

So, uh, yeah. Like, React DevTools is what I would use here. And whenever we see, like, this is something that I have observed with some junior developer as well, like, they're working, sometimes you are changing. You are hitting a button, but it's not updating on UI. That happened usually, that happened. Like, the primary reason can be that the way React works is, uh, it render only something when the state has like, when the value has been changed via state. So where in functional component useEffect and, uh, sorry, use state. In class based component, we do the this dot set state. Sometime people do what? They say let name equals to some value and then directly reassign it name equals to this. So this way it doesn't stop. Uh, don't know how to enter things if you do not specify it via state changing protocols. So that can be a reason. Other than that, we have to check via dev tools. We have to add debugger and check if there's something more than that.

So for this, uh, yeah, again, globalization is what I will do for languages support. So, basically, we'll follow-up something called a global file where we'll have all the language and their translation so that we can access that. And whenever, uh, we need to change it to some language, there will be sufficient, uh, data available to us. So, uh, as a JSON format or something, key value pair.

Uh, service worker, I do not experience much with that, but, yeah, I know, like, how they work. They basically optimizes. It's like, I'll take example of, like, this. Service worker helps to do things, uh, like, otherwise, 1 parent is doing this. Now there can be multiple service worker which does it for you so that, uh, can be multithreaded kind of scenario can come up. An asynchronous thing can happen.

So, yeah, um, as a design, uh, yeah, I have worked as, uh, discussions in architect level discussions as well, and I have contributed in system designs here. So, primarily, like, we like, I had to design how a dashboard for monitoring different services and their health status should look like. So I followed, uh, molecular structure of HLS, and I used Redux for our state management and then Axios for our API calling library. MUI is what we were using for our, uh, like, UI related things like forms and dialogues and all. So, yeah, uh