Mukesh Suthar

Hi. Uh, my name is Mukesh Sitar, and I'm from Dothpur, Rajasthan. Uh, I have completed my BTech degree from Dubliq Professional University in computer science and engineering. Uh Science and Engineering. Then I started my tech career by joining a Becker System as a software engineer. I have worked there for straight 2 years, uh, where I have learned many things. I have worked on multiple projects and multiple technologies so far. Uh, so, uh, I like mainly, I have worked on 2 projects there. The one was the Jamfetch, which is basically built on top of Node. Js. The back end was in the Node. Js, and, uh, that front end was in the, uh, React. Js. So we have worked on the, uh, like, I, uh, like, I worked on the Node JS as well as the React JS as I was an, uh, a junior developer there. Uh, so after that, uh, that project was basically from US. And, uh, the second project that I have worked on is the Abaka M, which is the same technologies have been used there. Uh, there I've implemented one big feature that is the WhatsApp BSP model. Uh, I have created the back end and the front end for that. Uh, the feature is still live on the aim. Abaqassist.com. And, uh, apart from that, I have also built one mobile application for the same. I have strictly worked for that mobile application single handedly, and, uh, that, uh, was built in, uh, Flutter. Uh, after that, I have joined, uh, Livon Techno Solutions as a senior product engineer. I am, uh, working here as a back end mostly back end developer and the, uh, DevOps engineer. Uh, so I have worked on, uh, worked here and on the Node JS and the React JS. I'm handling 2 projects under me and the 4 team. Uh, 2 are the web application team, and 2 are the mobile application team. Uh, apart from that, I am also working on the AWS part, uh, like, the deploying, uh, web, uh, like, applications onto the EC 2. And, uh, I have also deployed one application on the, uh, like, onto the AWS Lambda, which is the serverless, uh, architecture. Thank you.

Okay. So we have, uh, component reusability. So suppose, uh, I have, uh, 2 components. I mean, I have the whole web page and in certain places I'm using the card element. Uh, so like in the card element, uh, I will have one image, one title and the description of that. So like, uh, rather than creating that particular style component again and again, what I will do is I will create a a simple, uh, child component, uh, component everywhere, wherever I will require that, uh, card component. So that is how this, uh, react, uh, reusability component works. So, like, uh, same, uh, like, same this way, we can also use the styling. If we are using Tailwind CSS, we have, uh, uh, like, we have grouping of that. We can also group, uh, like, you know, we can also group, uh, the CSS classes, and we can, uh, put, uh, like, uh, like, we can assign that particular classes to a particular dev. So this is how this, uh, reusability component works. Uh, so this is the main feature of the, uh, React, basically, which help us to write the less code, and we can use the same, uh, design component everywhere. One of the main require one of the main use case and one of the main, uh, what to say, um, good thing about that is that we can use the same component and we like if I want to use, I suppose I want to make it a gray background color, I can use its, uh, like, one one place, and that will be changed in the entire application wherever my that card component is being used. So this is how, like, we, uh, it is having this own, uh, advantages.

Okay. So we have, uh, something called, uh, to handle this particular API fails, uh, we have, uh, Axios, uh, like, whatever I have used is Axios, uh, NPM library, uh, which basically help us to, uh, like, you know, uh, create, uh, like, uh, help us to, uh, make the API calls. Uh, so suppose I have a login API, and, uh, whatever the response I'm getting, uh, I will check whether the response status code is 200 or 201 or not. If that is not the case, um, I will use the library in the, uh, in the React. There are tons of libraries that are available for, uh, uh, to show the error, uh, like, error messages in the React. So, uh, like, uh, like, I can use that library and, uh, like, I can create a state for that, uh, and that I will put whatever the response text I like, I'm getting. Suppose the 500 code or maybe the username or password is not matching. So I will use that text and, uh, like, you know, assign it to some, uh, state. You'll, uh, like, the state will be created by use state, and that state variable I can use, uh, further down. I mean, uh, mostly, I have used, uh, the material UI alerts slider. Uh, alert, uh, what to say, snake butt. So there I can use that. And, uh, whenever, uh, like, I'm getting any error that will be coded in the red color. We have multiple, uh, what to say, style things are there. Uh, we can, which will, uh, like, which can be changed by the props that particular SNEC bar provides us.

Okay. So, mostly, uh, what I prefer to use when it comes to UI or styling a particular component, uh, I mostly use the, uh, Tailwind CSS, which, uh, which gives us, uh, like, a better idea and, uh, like, better, uh, like we can use that in deep. Uh, so suppose, uh, like like I said, I have like I've given one example of a card. So suppose I want to use the, uh, font size of that particular so, like, uh, that that particular card component I have, like, I can create that particular as a library. So whenever anyone like anyone wants to use that particular card style, I can, like, uh, they directly can install our NPN package and they can directly use that particular card. Directly can install our NPN package, and they can directly use that particular card. Uh, this is how many, uh, UI libraries are there, like sheds, uh, like, uh, shed c n and, uh, like, material UI, you can say. Uh, so the they are also using mostly, uh, Tailwind CSS, or under the hood, they are using style components. Uh, so with the help of those, we can use, uh, those, uh, libraries, and we can also build our own with the help of Tailwind CSS style components. There are tons of things to like, available, uh, for us to build, uh, these kind of things. Uh, and, uh, like like, it will be, uh, easily maintainable because, uh, like, uh, the, uh, the amount of, uh, like, you know, depthness we can get in the Tailwind CSS and the style component. We can use, like, uh, they are, uh, like, after all, they are, uh, like, you know, the, uh, the Tailwind CSS basically used, uh, used in the class name. So we can provide that class name also in the props. Or if we are using style components, we have an area, I mean, area of object. And that area of object also in that we can pass multiple custom values and magical numbers for the height, width, and all those things. If like, that will be totally customizable by the user, uh, itself. Home server will going to use that particular library.

Okay. So we have, uh, multiple, uh, uh, React library to handle the state. Uh, so we have Redux, uh, that I mostly have, uh, worked on. Uh, we have Zestend also, which is very, uh, like, you know, which is very trend in these days. So, uh, we can use complex to complex state management with the help of toolkit. Uh, I mean, uh, redux toolkit, we have redux saga also to maintain big complex estate states of the application. And how I can prevent the memory leaks. It's basically, uh, whenever I'm, uh, any, uh, any, like, uh, suppose I have a function which is basically doing the API calls, and I will put that function into the, uh, use state and, uh, like, which will be very helpful for the like, if I'm declaring that particular function in the use state only, and I'm calling there only, so it will be And, uh, And, uh, it will be very, uh, like, it will really prevent the memory leaks. And the second thing is, uh, like, if I'm using the something called 10 stack query, uh, that will be very helpful for the caching, uh, that, uh, that will maintain itself the memory leaks also. These kind of things we can, uh, do to prevent the memory leaks and the complex estate management is the, like, we can use multiple, uh, like, you know, tools that are available, uh, for the React, uh, like the Redux, the standard.

Okay. So, uh, like, if, like, if we are using the, uh, scalable, like, if I'm talking about the scalable architecture, uh, the create react tab is basically used to be very slow these days. So we like, I mostly prefer the next JS over the React JS. So it gives you more, uh, uh, like, you know, we can we can, uh, go into the depth of, uh, like, line component and the server component. That, uh, we don't have to create the separate, project for the back end also. We can directly implement the APIs there. So that will be very useful for, uh, nowadays architecture. That is, uh, basically and if we are talking about the API integration, so API we can use the third party APIs in the, uh, Next. Js itself in the server component. And if I like and and, uh, we can use the inbuilt APIs also, like, uh, what we want, Like, if I want to create some APIs, I can create in the next days itself. And I can use that in the client component or in or in the server component also. So this is how, like, uh, this is what I usually prefer. And when it comes to, uh, styling and all, I will prefer the Tailwind CSS over, uh, uh, like, over anything, or we can also go with the style component, uh, for the, like, you know, styling a particular component itself and not a particular day or something.

Okay. So we have a function which is basically, uh, doing the API calls with the given URL, uh, which is passing from the parameter. And, uh, like, we are just converting the response into the response into the JSON. And we are not, uh, we are just consoling out. Uh, instead of that, we can use in the then statement. We can use, uh, like, a stated status code to improve it. Like, uh, if it is a get API, uh, then like, the the code, uh, now itself is basically dependent on the get API only. We are not, uh, like, you know, specifying a particular will be by default to get to pay only. And we are not returning from it. And, uh, like, there are multiple step, uh, steps we can improve this code. Uh, the first one will be the specifying a particular method. The second one will be the specifying headers. Uh, the third one will be to return a particular data. And the 4th one before returning a data, we have to check whether the status code is okay or not. If that is okay, then only we have to return it. Otherwise, there might be something. Uh, I mean, the code is working fine, but there might be from the API side that can be, uh, that can go wrong or they are or that can return any error. So, uh, we can do that if suppose we are getting any, uh, like, you know, empty some like, uh, empty area. If it is returning multiple data that will be an empty area. So we can also handle with that also. Uh, and we have catch statement. We can use a better library list for that. Like if I'm having any error, we can, like, I can use material UI, uh, alert, uh, snake butt to, uh, like, you know, show my error. We can use well a sweet alert to, uh, to, uh, like, you know, so that user will, uh, will get to know whether, like, they are getting any error or something. So these are the steps we can, uh, improve this particular code. Uh, and, yeah.

So this particular code is basically the first button one is, uh, looks okay, uh, but, uh, we are not using on click anywhere. Uh, instead of that, we have to create a JSX component, which basically we'll use as a suppose if I want to create a button, I have to pass like, I have to return a particular, uh, JSX, uh, I mean, HTML component, uh, which will be like button. And inside that on click, we have to pass this on click method that we are getting from the, uh, props. And the children will be, uh, like, children might be the title or, uh, the other uh, arguments that we can pass in that, uh, like, button, uh, statement. Uh, the first one can be improved by that, and, uh, like, the default function, uh, app is, uh, basically, it have multiple problems. Uh, the alert, uh, it is only showing alert, but, uh, the export function will basically okay. We don't have anything here. I think this, uh, this, uh, second code is basically having some problem. And might be the children. The second code looks too much, uh, messy, but, uh, the thing is we have to return a JSX element if we are creating any component. So yeah. I think, uh, they are trying to, uh, create the I mean, call this button component in the f, uh, uh, function. So, yeah, it is the half code I'm getting.

Okay. So, uh, state management is basically, uh, we used in every every single application. Uh, like, state is very, useful for any application to handle the multiple states. So basically, uh, what I have used is the React toolkit, uh, which is a very good library for handling the state. They like, I've handled the, uh, like, big to big complex state and, uh, small to small state. So they are manageable. And, uh, the second one is, uh, uh, if I like, if I'm talking about the state management, if I'm calling any API, I will require some sort of, uh, caching. I don't want my application to reload again and again and getting the data from the Internet. Instead of that, I can use the, uh, something called caching, and that can be easily integrated with the help of a package which is called, uh, which is previously was calling as React Query. But nowadays, uh, they changed the name to 10 stack query. Uh, it is, uh, like it is having, uh, like, a, 10 stack query. Uh, it is, uh, like it is having, uh, like, some as, uh, there are many benefits of using that. One of the main benefit that I like is to, like, you know, they are just doing cashing by their own. We don't have to do anything and any extra thing to do that. To do that. So, yeah, these are the things that we can, uh, make a large scale application. And, uh, of course, we we have to look for the API calls and all. Uh, so yeah.

I actually never worked on the Django back end, but, uh, I have worked on the Node JS back end. So I would like to answer this in the Node JS only. So what strategy will you use to serialize and reserialize data? Okay. Yeah. Management. Okay. So if we are using the JS, uh, JavaScript, for that, we don't have anything to manage the types of that. So it will be like, uh, we have to pass the initial data. And, uh, like, uh, before, uh, putting our data, like, whatever suppose I'm using, uh, like, I'm getting, like, I'm getting the number of user data from the API. So what I will do is I will just sort it out, I mean, serialized way, uh, in the serialized way. I will sort it out with the help of, uh, some sort of date, created date or updated date. And I will then only I will, uh, push that code, uh, push that data into this state. So this is how this, uh, this thing will going to work. Or from the back end only, I will sort that data, and I will send in the response.

Uh, like, I won't be able to give the answer for this particular Django question because, uh, uh, to be honest, I never worked on Django. I mostly work on the Node. Js and the React JS. So I think yeah. Okay. So I would also like to give the sample in the Node JS perspective. Uh, so, like, there are multiple ways of optimizing, uh, Node JS application. Uh, so, like, if suppose I, like, I mostly work on the, uh, the MongoDB database. So, like, optimizing my query would be a great option there. Uh, the second thing is, uh, the using the Redis database or any like anything where like any like any database, uh, with, uh, which uses the caching, uh, so that the my query will be more optimized, and, uh, I don't have to wait for, uh, like, more time for, uh, for a simple query. And, uh, yeah, these kind of things, I will take care of, uh, in the back end side so that my query and my back end will be faster.