Mitanshu Patel

So I have basically more than 3 years of experience in developing web and mobile applications using React, React Native, Node. Js as well as Next. Js and particularly in programming languages. I have proficiency in JavaScript, TypeScript, HTML, CSS. Then other frameworks I have used within that are Redux, then created custom hooks, then also worked on material UI, tenant, CSS, then SaaS, then Chakri UI. And in databases, I have experience in working with MySQL as well as MongoDB. And in cloud services also, I have used AWS, Heroku, as well as Versal. So, yeah, I think that's bit of introduction about me.

I would implement a feature flag in Redux application. Is that, firstly, I can create a store using the, uh, the Redux store available. And then if, uh, I have requirement of using a synchronous operation, then I would also add a middleware like, Thunk, in my Redux store as, uh, while configuring the store. Then after the store has been created, then I will firstly add one action as well as the reducer. And I will also define types so that my, uh, reducer can be uniquely identified on the these other types. And then whenever I need to use that particular feature flag, then I will use I will import it using the use selector. And inside, I will get state and whatever, like, I had to find that inside this particular folder so I can input it. And if I want to edit or update the flag, then I can use the Accord by importing using the dispatch use dispatch hook, uh, given from the relux. And then after using the dispatch feature, uh, dispatch function, uh, in the callback, I will pass the action of updating that feature flag. So, yeah, that's how I would manage, uh, feature flag in React Redux application.

I will firstly integrate a 3rd party JavaScript library, which is not comfortable with any late life cycle matter. Then first, they will go through the documentation that how it would work in my, like, core c core HTML and just the part. And here, I will, like, check that whether it supports any script loading or any function loading inside of my HTML page. So I will import if any script loading is there, then I will add in my index dot HTML file, which would be given inside my React application. And, uh, after the script has been loaded, I will add in my use effect. And whenever, like, using the new keyword or pen constructor, if I need to input that, then I can use it. Or else other than that, we have different, uh, like, I we have different functions given according to the requirement of the particular libraries. So I will add or call that function inside my use. Right? And depends on, like, where it would be placed. First of all, it was to be placed, like, uh, throughout the application, then I will add in my app dot JS or layout dot JS file so that it would be available throughout the application. Or else, if I want to integrate with particular module, then I can import it or call that function of useEffect of that particular container only.

Conditionally applying CSS styles, uh, to a React component in response to user interaction. Firstly, I will add a user ref. I will import the user of hook coming from Viet, and then I will add it for that ref to particular like, target the ref to particular container, like do or p tag or a button wherever we have requirement. And then on the basis of that on click method or any other event, I will add inside my use effect. And here, I will add, like, uh, let's example, I have given the name as div ref or container ref. So I will add that container ref dot current dot style is equal to for example, I want to change the background color, then I will add inside my curly braces that background color is equal to red or black according to requirement. And then afterwards, the most important part is that inside the return statement of use effect, I will also unmount that particular, uh, life cycle method so that it could improve my performance of any web application. Or else it would, like, continuously listen the events whenever this button is on click or this event has been triggered. It will help to it will, like, trigger automatically again and again. So to avoid such scenarios, I will even unmount that event listener inside my return statement of user file.

The first, uh, setup and management of routing will react application that would require dynamic payloading is that, firstly, I will add I will, like, import the library via router dom and inside of which it has, like we can add a browser router. The browser router, then another thing could be memory router, hash routers. So according to requirement, I will add a browser router. And inside it, I will define the route which first, uh, parameter would take path, for example, dashboard. And then in second, uh, parameter, I will add the component. And inside my component, what I can do, I can, uh, wrap my component with the lazy loading. And here, while defining the routes, there also I can create 1 suspense so that if my component does fail to load, so here I can add a fallback. Like, for example, error or error page or any other loading page if I want to display. So that whenever lazy loading happens, for example, let's say the user scrolls on that particular view port, then only that particular component is being loaded instead of calling that component unnecessary from the dashboard page or from the top page only. So, yeah, that's my approach for using routing inside my React application.

In my middleware to implement, uh, logging on every action changes. So firstly, like, during my firstly, if I'm implementing the create store method, then here only I can add 1 middleware. For example, let's say, on every reducer, uh, I have I will defend reducer for each and every actions or any update methods, uh, to be called. So there only I would add, like, log, for example, this type particular has been called and this is the new data coming from this particular action called. And inside my reducer, I will add login statements. And for example, if anything goes wrong, then here also we can make, like, default that this particular, uh, this particular, uh, log has been created by because due to this type has been called and this particular action has returned this data. So here, we can add logging statements. And another thing could be, like, we can also add react redux developer tools extension so that it would be easier for me to log or even if I want to, like, make, uh, debug any statements that which particular type has been called, which data was, uh, changed, or which was the data before this particular reducer has been called. So we can also use Redux developer tools for that particular scenario.

Consider the statement when you are doing that there is a bug which could cause it not to work and read it for. Okay? Assign function. Password data. Insert this one. Okay. So here, while if I am using fetch statement, then, uh, we need to convert it into JSON. So firstly, uh, we need to add over here the await keyword of a response to JSON. And another thing could be the even the URL is also, like, not given into string. For example, I I fetch, and after that, we have used backslash. So it will, uh, the react will or just it will take it as a reject expression. So here, this thing is one more, uh, like, not working scenario. This could be a bug over here.

Here also the same thing. Like, we are, like, defining the return type of increment and the function increment, uh, creator. Then here, we haven't passed, like, uh, the data and action the payload data coming from the, uh, licensing encounter as a parameter. We are returning just type, but we are not returning the payload as well as action over here. And another thing could be, like, type is expecting a string, but we have passed over here. It's a kind of project. So here, that could be an issue.

I think with multiple feature domains, we can, uh, in our current Fintech product, also, we have added a monolithic React application architecture where, let's say, uh, from 1 GitHub repository, 6 or 6 or 7 applications are being hosted from 1 GitHub repository due to the monolithic architecture. And so here also, we have added, like, different, uh, stores are being created for different applications. So it would not, like, uh, tender or come from like, it would it wouldn't, uh, become a conflict according to different stores or different applications, uh, their own unique stores so that data won't be manipulated from one store to another. So here, we would design, like, multiple stores so that, uh, every application provider has their own stores. And they have their own reducer as well as their own actions. And another key feature we could use over here is that if I am integrating different domains so that I can also have multiple local storage as well as session storage access. So I can also use that particular point of time, like, different local storage as well as different session storage coming from that particular applications.

Unit test cases for reducer could be where we are, like, uh, passing payload data coming from the reducer. And, uh, if the pay payload data if we are expecting screens and if it is coming number, then our, like, calculation of or if any, we are creating any middleware, which could, like, convert it from one particular type to another or conversion from 1 Bitcoin to US dollar. So here, if we are passing string, then definitely it would, like, uh, throw an error or, uh, it would also, like, the user can experience any type error, uh, while while updating the data. So here, we would make that particular test case for type cases. Then another thing could be, like, 0, uh, or passing in a negative integer, passing as a reducts data, or else any, uh, like, new date is being called, then which particular time stamp to be called. For example, if the user has a pop time stamp and we are passing the particular new date object, so there also the user can get, like, bad experience due to type error coming over. So we can handle such test cases. You we can also handle so and write such test cases using Jest.

The web pack for better bundling and efficient load times could be, firstly, I would integrate that, uh, which, uh, like, the latest libraries as well as the latest codes based available in the NPM. Then another thing could be, like, uh, live like, images could be called parallelly instead of, like, putting in our static asset file. And even we can add, like, bundling of that particular images so that compression over happens over such period of time. So that image won't take a long time to load. Then another thing could be, like, uh, we can add JS bundlers so that our JavaScript files could be, like, minification. Uglification can also be, uh, help to increase the performance. So that minification for example, let's say, all of the file, uh, is to be, like, bundled into 1, uh, like, thousands of files are to be bundled into one size so that it will help to increase our bundle size overall. Then uglification could be, for example, if I have one variable defined, let's say, constant name is equal to metan show. Then over here, if I'm using a nullification, then what it will do that it will change my constant into, like, variable name could be changed to, like, random, like, constant is all to Mitancho so that this variable name wouldn't be long or big so that, uh, less amount of memory would be allocated. And it will help to increase our load times as well as performance of any web application. Then another key feature is to integrate Babel so that, for example, if any old browser which doesn't have compatible to ES 6 error functions, So that they will automatically convert it to ES 5 to the regular functions statements over there. So these things could be taken care if I'm opt of if if I'm customizing Webpack inside my React application.