Mukesh Suthar

Hi, my name is Mukesh Sitar, and I'm from Dothpur, Rajasthan. I have completed my BTech degree from Dubliq Professional University in computer 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, where I have learned many things. I have worked on multiple projects and multiple technologies so far. I mainly worked on 2 projects there. The one was the Jamfetch, which is basically built on top of Node.js. The back end was in Node.js, and the front end was in React.js. So we worked on the like - I worked on the Node JS as well as the React JS as I was a junior developer there. The project was basically from the US. And the second project that I have worked on is the Abaka M, which uses the same technologies. There I've implemented one big feature that is the WhatsApp BSP model. I have created the back end and the front end for that. The feature is still live on Abaqassist.com. And apart from that, I have also built one mobile application for the same. I strictly worked on that mobile application single-handedly, and it was built in Flutter. After that, I have joined Livon Techno Solutions as a senior product engineer. I am working here as a back-end mostly back-end developer and the DevOps engineer. I have worked on Node JS and React JS here. I'm handling 2 projects under me and the 4 team. 2 are the web application team, and 2 are the mobile application team. Apart from that, I am also working on the AWS part, like deploying web applications onto EC2. And I have also deployed one application onto AWS Lambda, which is the serverless architecture. Thank you.

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

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

Okay, so, mostly, what I prefer to use when it comes to UI or styling a particular component, I mostly use Tailwind CSS, which gives us a better idea and allows us to use it deeply. So, suppose, like I said, I have given one example of a card. So, suppose I want to use the font size of that particular card component I have, I can create that particular as a library. So, whenever anyone wants to use that particular card style, I can have them directly install our NPM package and they can directly use that particular card. Directly they can install our NPM package and they can directly use that particular card. This is how many UI libraries are there, like Sheds, and Material UI, you can say. So, they are also using mostly Tailwind CSS, or under the hood, they are using style components. So, with the help of those, we can use those libraries and we can also build our own with the help of Tailwind CSS style components. There are tons of things available for us to build these kinds of things. And, like, it will be easily maintainable because, like, the amount of depth we can get in Tailwind CSS and the style component. We can use them because they are basically 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, an object area, and in that we can pass multiple custom values and magical numbers for the height, width, and all those things. If that will be totally customizable by the user itself. Our server will use that particular library.

We have multiple React libraries to handle state. So, we have Redux, which I mostly have worked on. We have Zestend also, which is very trendy in these days. So, we can use complex state management with the help of toolkit. I mean, Redux Toolkit, we have Redux Saga also to maintain big, complex application states. And how can I prevent memory leaks? It's basically whenever I'm in a situation where I have a function that's doing API calls, and I will put that function into the use state, and it will be very helpful if I'm declaring that particular function in the use state only, and I'm calling it there only, so it will be very helpful to prevent memory leaks. And the second thing is, if I'm using something called 10 stack query, that will be very helpful for caching, which will maintain itself and prevent memory leaks also. These kinds of things we can do to prevent memory leaks, and complex state management is the kind where we can use multiple tools available for React, like Redux, the standard.

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

We have a function which is basically doing the API calls with the given URL, which is passed from the parameter. And, we are just converting the response into JSON. Instead of just console logging, we can use the then statement. We can use a specific status code to improve it. If it's a GET API, then the code itself is dependent on the GET API only. We are not specifying a particular method by default to GET only. And we are not returning the data. There are multiple steps we can improve this code. The first one will be specifying a particular method. The second one will be specifying headers. The third one will be to return a particular data. And the fourth one, before returning data, we have to check whether the status code is okay or not. If it's okay, then only we have to return it. Otherwise, there might be something from the API side that can go wrong or return any error. So, we can do that if we are getting any empty data. If it's returning multiple data, that will be an empty area. So we can also handle that. And we have a catch statement. We can use a better library list for that. If I'm having any error, I can use Material UI's alert, or a sweet alert to show my error. So that the user will get to know whether they are getting any error or something. So these are the steps we can improve this particular code.

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

State management is basically used in every single application. Like, state is very useful for any application to handle multiple states. So basically, what I have used is the React toolkit, which is a very good library for handling the state. I've handled big to complex state and small to small state, making them manageable. So, the second one is, if I'm talking about state management, I will require some sort of caching if I'm calling any API. I don't want my application to reload again and again and get the data from the Internet. Instead, I can use caching, and that can be easily integrated with the help of a package called React Query, but nowadays it's called 10 Stack Query. It has many benefits. One of the main benefits is that they're doing caching by themselves. We don't have to do anything extra to make that happen. So, yeah, these are the things that we can make a large-scale application. And, of course, we have to look for API calls and all.

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

I won't be able to give the answer for this particular Django question because, to be honest, I never worked on Django. I mostly work on Node.js and React.js. So, I think yes. So I would also like to give an example from a Node.js perspective. There are multiple ways of optimizing a Node.js application. If I mostly work on the MongoDB database, optimizing my queries would be a great option there. The second thing is using a database like Redis, which uses caching, so that my query will be more optimized, and I won't have to wait for more time for a simple query. And, yes, these kinds of things, I will take care of in the backend side so that my query and my backend will be faster.