Rakesh Kumar

Myself, Rakesh, I have around 15 years of experience. I'm a full stack developer. I mostly work on 1 stack. I use React as a front end technology and Node as a back end technology. I have worked with both, uh, service based companies as well as broad based companies. Out of the 10 years, I have worked in as an engineering manager in, uh, multiple companies. For around 8 plus years, I have been engineering manager in OLX, uh, FreeCharge, and Domino's. Uh, I have experience in, uh, uh, managing teams, hiring, cross function collaboration, like with product design, UX marketing, stakeholder management. Uh, I have experience in designing the front end, back end architecture, and automation. I have exposure to, uh, SQL and NoSQL databases like MySQL, Postgres, MongoDB. I have worked with most of the cloud, uh, technologies like AWS, Azure, GCP, and even with OCI. Uh, I have done multiple projects with multiple, uh, companies from scratch, and I have contributed to growth in most of the companies. For example, in OLX, I was responsible for growing the user base and also the number of post on the platform. I created a lot of initiatives. For example, I reduced the posting funnel steps from 15, 20 steps to 4, uh, 4, 5 steps and did a lot of automation in in that flow, which resulted in growth of the growth of around 15% on the platform. That's all about my myself.

Asset principles are, uh, usually associated with the RDBMS. As as per my understanding, IndexedDB is is a browser API, and it supports, uh, supports NoSQL. I'm not sure if asset properties are even, uh, applicable to index DB. Even if there are, of course, there can be, uh, um, uh, methods to mimic that. And I can also think about mimicking, uh, those, uh, those behaviors of asset properties. But I'm not really sure that this is the right, uh, approach because IndexedDB is supposed to be a no sequel. And and creating asset property on the browser side, for me, is it it's there is something wrong with the architecture because it's supposed to be for smaller use cases like supporting, uh, offline use cases. If when when you say asset and and you are even making RDBMS, I'm not sure if that's the great I that's a good idea, uh, for to have such kind of a a storage or or or database, uh, behavior on the front end side, that too on the browser.

Access is cross site scripting. So basically, uh, when you inject script on the front end, maybe through input or directly through URL, and that's get injected. And then and sent back to to server and then return as is, and it gets executed. This behavior is called XSS because then the browser will consider that particular script as part of the page, and it will execute that, uh, script. And that script get, uh, could contain anything, like, you know, extracting user session, uh, information, and sending it to any remote server, so on and so forth. There could there there can be a number of things that can be done with that. So to stop accesses, first thing is the thing that you do is validation. You do first of all, you do front end validation. You you, uh, you end end end, uh, you validate the the input, whatever, and you look for, uh, special characters. And you either, uh, encode them or, uh, filter them, and then you send to the server. And the the server should do the same. It should validate the, uh, the request data received from the front end and, again, do the filtration and encode the data while sending it, uh, on on the client. So that's what is needed to prevent accesses. Validation is the simple answer. Though there are other there are various other tools nowadays, you can there are various NPM packages available, which can do, uh, this for you. Uh, but they also do the same thing. It's the validation that prevents the, uh, the access to the attack.

Okay, so it looks like the question really emphasis on using index.db to store the shopping card across multiple session. So local session storage does not work on multiple tabs and local storage can work on multiple tabs. So local storage can be one option, but index db can also be one option to store cards information. It can also be stored in Redux or any other global state management also, unless the card information is huge, then maybe storing it in index db makes sense. And efficiently managing a shopping cart state across multiple session using index db. I'm not sure what exactly is needed here because the approach remains the same, whether you store it in index db, whether you store it in a global state manager, or even in local storage for that matter, the approach remains the same, the methods for storing and extracting the data remain the same, we have to ensure that it is available across any tab even if the user has ended the session, close the browser and reopen the same, then it should be available. If that's a use case, then of course, if you go with local storage or index db, in that case, global state manager may not persist. But if you want to only persist the cart information as long as the browser remains open, then you can use the global state manager as well. And in you can also send that data back to backend and store it and when the user reopens it, then you can load the data from the from the backend API in that case, global state manager will work just fine. So I'm not exactly sure how what's what's the question is what do you what you want me to answer here like efficiently using index db because the approach will remain the same.

Okay. Error handling. Uh, there are various ways to do error handling in front end as well as, uh, back end. So on front end, you especially in the React, you can use error boundary. You can have, uh, global error handler with, uh, which you can attach on, uh, on on the document or on the window object, which which will which will, uh, capture all the errors and send and you can send that to any customer custom logger on on the back end. Or even you can use tools like Sentry, which which can, uh, capture the front end error, and you can monitor that on on the UI of of tools like Sentry. Then, of course, I talked about, uh, our React boundaries and having a custom window error of ops event handled on the front end to check if there are any errors. Then you can have try cache blocks to handle, uh, out of the front end gracefully. So so that's, uh, about front end. On on the back end side, again, the same thing applies. You do try, catch. You do global error handling, like, in in in router, you can in in express, you can have a middle there for error handling that will act as a global error handler, uh, for various SOTP, uh, ports. So that's that's there. Uh, so other than that, you can have logger, uh, NPM logger integrated on the back end. Like, Winston is another library. You can log, uh, the errors, uh, or you can have other tools like ELK Stack, even a new relic, uh, which supports Node as well. And even New Relic Browser is also there, uh, which supports, uh, the cap captioning of, uh, of of of the, uh, JavaScript errors. So there are so many ways to handle, uh, capture and handle, uh, error on both front end and back end. Uh, like I said, on on the on the back end, you do try catch. You have a glow you you do try catch. Along with that, you must have a global error handler, and and you should log error on on on on any error handling tools, uh, like NPM or or Splunk or any other tools of your choice so that you can debug, uh, them in production because the number of errors can be multiple

How can you manage state in React application when using Tailwind CSS for styling without compromising performance? I'm not sure if I fully understand the question. So, uh, I so you, uh, if you're talking about global state because you because the question say React application, that will be you're talking about the entire state of the app of the application. Right? So you have a global state manager there. So, um, so styling of controlling a a styling of a particular component or an entire application for that matter and and global state management is are 2 things or 2 different things altogether. Even if we're talking about an individual, uh, uh, individual component, uh, and then applying c and s styling is is done through CSS classes. And that happens even before a a status is is processed. Unless the question talks about switching, uh, between different styles when the state changes. That's a different thing altogether, which is not really clear from this question. So I assume that you're talking about managing state and applying CSS, uh, when the state changes. For example, changing the color of a button or changing a theme without compromising the uh, the performance. Well, uh, in that case, uh, you have to ensure that you are doing batch, uh, batch processing of the state. And latest version of React, which is 18.2, uh, provides that so that, uh, you're not, uh, compromising on on any kind of flickering or any kind of performance related to switching from one style to another on the application. That's one thing that you can do. Another thing that you can do, uh, is is is is probably, uh, when applying when switching style on a on a smaller component, then have it have the state, uh, managed on the component level rather than the global level because this is the question. Simply says React application are not the com component state. So if you're doing on the component state, uh, then I I assume that, uh, switching the styles and managing the state on the component level will be faster. Having said that, you can use React profiler. You have React dev tools, browser tools to check the performance. If if there are any performance issues, then you should you can refactor a code. The question is very ambiguous. It it doesn't really give any context. So my and it's very open ended, and that's why my answer is also open ended. Uh, unless the question had specified any special use cases, I could have answered in in more specifically.

Okay. So solid has, uh, see so so far solid principle is a single responsibility principle. So this class, drone control, has fly, gather data, process data, render data. So it seems this particular line is doing everything. So the first first, uh, thing which it's violating is, uh, single responsibility principle. This class is handling everything. So you can have you can segregate these, uh, responsibility in multiple class. For example, probably rent gathering and processing data could be done in a separate class. Rental could be in separate class, and, uh, things were to fly. I can be in that different class. So that's one thing which is violating. Yeah. That's the that's the first thing, uh, this wording. Another thing is, uh, I stands for interface segregation, so which is similar, uh, to what I have said here. So that it's all too validating, uh, this principle. But I I guess, uh, for to answer this question, the first principle is definitely violating, so that should suffice.

Uh, there are multiple things that I can identify. One thing is that it's handling promise, this test data and update function. It's handling promise, and it has not used async. So that's one thing which is there. Second thing, dot, uh, it's dot then is being used, which is different, which is usually associated with fetch and also promises. I'm not sure if needs to be converted in in JSN, uh, first before the actual data can be, uh, can be assigned to update data. So that could be another problem, but it's not handling promise promise properly. That's this that's the that's very, very evident. It's not using s s sync. It's also not handling any kind of error. It does not have any cash flow. That's another thing which is there.

Oh, that offline functionality is usually, uh, achieved through web worker and especially with service worker because, uh, we need to check whether the user is offline or not. And so so on so web workers work, uh, so web service work is one of the web one of the type of web worker. So web workers, uh, work in the background. Uh, so they can check, uh, things like whether these particular user is offline or not. So you can help you build offline related functionalities. You can design offline funk offline, uh, user interface. For example, you can gray out, uh, the background color and disable a few things, uh, so and so forth. So so it depends on the design, like, what kind of a design you want to show to the user when the user is offline. So the so end design can be used, uh, and for that, you can probably have and and design components, which which, uh, which give you the look and feel of online and offline differently and and load them, uh, based on on the on the current state of the user, whether the user is offline or online, which can be, like I said, uh, achieved through a web worker. You can cache a certain thing. For example, you can cache a certain, uh, assets, certain classes, certain certain styles, uh, when the user is offline. And yeah. So you can use a browser caching to populate, uh, uh, that minimalistic content and styles to showcase, uh, the offline, uh, user interface. And once the user is back online, then, of course, you can you can switch these tires and also make API calls and load, uh, the the dynamic data. So, yeah, uh, the the, uh, that's how progressive works. That's offline handling is one of the properties of PWA, progressive web app. Of course, there are many other, like, full screen and having a icon, uh, for for, uh, opening the website, uh, which which is another property of of of a VWO. Uh, so yeah. But for offline, like I said, service worker cast caching, uh, certain styles and assets on on on on the on the browser, uh, should should be sufficient.

Okay. So GraphQL is more or less, uh, data aggregated flare, kind of a middleware between the the actual service and the, uh, the front end. Uh, so it's kind of a b f layer. And GRPC is is a remote procedure call. GRPC was developed by Google to it's an alternative to other, uh, testing protocols. So for real time collaboration using this, well, it can be trivial that also. But using this, if I have to answer that so so so so, basically, the front end, which will be, uh, there on on the on the drone. So we'll send capture some data and send it to the back end. And and also consume some data. So GraphQL, like I said, is a VIP player. It can give you exactly what you need and send exactly, uh, what what needs to be sent with without worrying about what what changes uh, are made on on on, uh, back end and without making too many API calls. Yeah. Because that's the purpose of GraphQL. So in real time design collaboration, I assume that a lot of data will, uh, will flow to and fro. And there and using GraphQL will minimize, uh, the number of API calls. So that's one benefit which I can clearly see here. And remote procedure calls, again, uh, you can make remote procedure call to uh, process the data on on various services. So that's what I can answer with with this limited, uh, context here. Uh, around that, I'm not sure what else is needed. If if if it went through with with a real person, then uh, then I could have answered any follow-up question. But that's all I can think of right now.

how would you use gRPC within a Node.js context to manage inter-service communication in a microservice architecture? Well, I have not worked with gRPC, but it's not that I want to be able to work with gRPC. So what I can understand here that you're using Node.js and there are microservices and microservices are communicated with each other. So when you talk about talking between two microservices, there are various ways. One is, of course, normal HTTP request and response. Another one is asynchronous, in which you can use messaging queues. I guess gRPC could be a third alternative, probably to HTTP. So gRPC is a remote-processed protocol, so basically you're following the procedure of the remote service which you want to update without using the HTTP protocol. And you're using the remote procedure, or a procedure is nothing but a function directly. So one microservice is calling the procedure of another microservice to communicate. So yeah, that's what will happen in that case. So basically you're communicating using a remote procedure call. I'm not really sure, probably one thing which could be a benefit here is that with gRPC, if I can recall correctly, is that probably there is a backward compatibility because you're making a procedure call, and if something changes in that procedure, probably you don't have to make any changes with HTTP API call. You must know the data format that you need to send. If I can recall correctly, I could be wrong, because like I said, I haven't worked with gRPC before. But yeah, I can work with that if there's a need to use gRPC only for communication.