Narendra Maurya

So I'm Nari Moore, a full-stack software developer. I've been working in the industry for the past five years, with hands-on experience in React JS, Node Express, MongoDB, the Laravel framework, as well as React Native and Ionic applications. I also have some hands-on skills with C++ and Arduino programming, including user interface creation and handling pin setup for microcontrollers. Currently, I'm working on a side project to help factories use appliances with Arduino. In addition, I'm a full-stack software developer and a programming instructor on the Codebook Inc YouTube channel, where I used to teach programming. However, due to job constraints, I couldn't continue as much as I wanted to. But I'm doing well with my current company now. I'm looking to switch, which is why I'm here. I have hands-on experience with Vue JS, React JS, Next JS, Remix JS, Node Express, Fastify, MongoDB, and PostgreSQL. I've created several applications using these technologies. That's a bit about me.

Okay. Okay. You use this to clean code clean code transfers to improve this code. So if x is less than 0, say, if any negative number is there or if it is greater than 12, then alert should be thrown there with error and return. Otherwise, if the x equal to 12, then it should give you x plus 1. 1. Otherwise, x plus 1. I feel this code is quite optimized. I feel so. But if you want to make it more cleaner instead of using ternary operators, we can make the use of if conditions, but I feel this code is quite good. So we are good with this.

Below is a function to calculate the total amount paid at a table in the restaurant. There's a 12% VAT on the total bill. Which is a constant for all meals and additional tip is how would you use clean code principles to improve this function? Additionally, how would you modify this function so that it would be used across different tables in different restaurants? Const bill for person 1, person 2, and so on, tax percent, and tip. So we can define a constant for the tax percentage, which is 12%. We can define that. As well as instead of passing all the arguments, like person 1 amount, person 2 amount, we can make the use of an array where we put the values of the bills of each person as an array and just pass that in. As well as a tip is fine. So, whatever that tip is. From the arguments of this function, we can get rid of the person 1 amount, person 2 amount, and so on. And we can make use of the reduce function to begin the sum of the total bill that has been passed as an array in it. We can make the tax percentage a constant that we have declared outside of the function, in order to calculate the tax, as well as then add the tip and then return the final bill to that. So that would be my approach in order to make this function look more cleaner. And in addition to that, we can add more safety checks, like if the array passed has been empty or something like that. So it would handle that. Even in order to handle any random arguments have been passed into that, we can make the proper checks for that. And along with that, we can also use TypeScript to define the arguments that have been passed just to validate them. So that would be my approach to do that.

So the effect is an effect that we want to get in our component, when the component is mounted or based on a certain dependency. So we can make use of useEffect. UseFocusEffect is, like, I'm not that sure about it, but I haven't used it that much. Use layout effect is something which runs when the DOM has been completely painted with the initial layout, so we can create some kind of action if we want to perform it, so we can make use of use layout effect.

Our company wants to launch a fitness app in six months, and I'll be leading the development as the lead developer. To create the project timeline, I would ensure all the features such as sign-up working, workout tracking, and social sharing deliver high quality. Like I mentioned earlier, I'll use agile methodology where we'll break down all the features and their flows and get them into place. We'll start by initializing the sign-up process. Then we'll create the layouts along with some functionality. Later, we'll bind with the rest APIs, which will record all sorts of data and make get and post calls. We can use Redux Saga or Redux Thunk to manage the application state. For example, we have authentication state, where we can find out if a user is logged in or not, which is globally shared. If we don't want to use a side library, we can use the built-in React Context Hook to create context and provide that whole state to the application, which can be accessed at any point in time. To handle all the APIs, we can use a third-party API calling library like Axios, which is very decent and comes with a lot of features. We will also define some constants where we'll add all the constants or make them based on the build. We can create an ENV file from where our constants will be. For example, API-based URLs can be a constant. Some other things, like region and whatever the requirement is, we can use constants. Then we can define all the components and their layouts using some kind of a third-party UI library, which is already available and solves our problem. For example, to show key matrices, we can analyze which charting library we can use to achieve that. So, that will be my approach, and we'll go through the documentation of that library we are going to use. To make the UI more seamless and more performant, we can go through the documentation and make things easier for us. And also, what I'll do, my approach will be to focus on the flows and catch errors, loggers, and create a separate API endpoint in the back end where we can log all sorts of errors where we are facing, so that in the future, we can rectify them to prevent our app from breaking. That would be my approach.

So in order to make our rerendering much more efficient in areas with heavy competition where we're using a database, I'll use memo so that our React application doesn't break each time it rerenders, making the use of predictive handlers as well as forward graph in order to make the state as local as possible so that it doesn't force the main component to rerender itself again and again. And optimizing them will be, I have already worked with several applications where I have tried optimizing. Like, I have implemented caching so that it doesn't go through the API calls most of the time. Using function caching where we pass the arguments and we cache them and the results if the results are gonna be constant. So we'll make use of that too so that our functions are not called more frequently. Instead, it will give the cached results. If the results are not gonna be depending on something else, it will be constant. So that is one more thing. Making use of less use of state and those things in order to make the React app rerender itself again and again, avoiding those kinds of things. For example, using useReducer hooks where we have a lot of state to manage, and we can make use of useReducer hook just to optimize them and just to prevent state changes. So that would be my approach as well as using API for less use of API calls. I will use a third-party library called React Query in order to make API calls on component load, use mutation functions in order to make things more seamless. And whenever we require it, then it will call it. So that will be my approach here. And along with that, yeah, that's it from my end so far for this one. So, yeah, my plus point is, like, using dynamic tags with React Query, which I have implemented in several other projects where it has given a better edge over things.