Sejal Pande

Hello. Yes. My my name is Sejal Panil. I currently work as a lead, uh, front end engineer at Apex Global. I have a professional experience of 8 years working in 2 soft grid development, predominantly in front end development. I have had a I have experience of working in health care and Fintech domain. Uh, currently, I'm working with on a Fintech product that revolves around payment orchestration ecosystem. I have had an experience of implementing, um, Fintech solutions into payment and orchestration, like smart checkouts, cascading, intelligent routing engine, uh, revenue product, uh, and so on. All these products have been, um, implemented using the text tag based in JavaScript, React JS, uh, storybooks, bootstrap, and Java on the back end. Uh, I have, uh, more more work mostly on the front end side, but I have also have had, uh, chances to interact with my design team, back end team, and testing team to cover up the activities that revolve around them. Uh, I also participated in the API designing phase to ensure, um, uh, the implementation of APIs in the, uh, format which is compatible with the data that is needed on the front end. And, um, I am aware of, uh, Agile and Scrum methodologies. I am certified scrum master, and, uh, I also conduct these scrum related activities in my team. I act as a scrum master for my current development team. And other than that, uh, I am aware of CICD and, uh, test driven development. I have, uh, the experience of collaborating with the product owners and stakeholders and reporting to the CTO and the, uh, higher management regarding the development and evolution of the product. So that is my, uh, overall experience. Uh, thank you.

So while doing the high level system design for a React application, the very first thing that needs to be considered is, uh, how the UI component library has to be implemented because, uh, React is a, uh, UI component library, which is mostly used to develop the UI related elements. So identifying the, uh, UI models of the project and implementing a well written dynamic set of components, uh, is a very important thing that makes us makes our code, uh, plug and play, and the development time is significantly reduced if we have a well written UI code library return. Then, uh, in case of React, uh, if we are rendering a list and, uh, or in case if you are rendering heavy data on the screen, it is important that we have a proper loading mechanism, and we have a shimmer shimmer UI to give a consistent user experience. And the API has a proper paging and, uh, paging and, uh, paging implemented so that the load time of the application is reduced. And, uh, in case of caching, uh, it is important to consider the caching as well. So having proper caching mechanism in place as for, say, for example, uh, other disc can be utilized to implement the caching to reduce the fetch time of the APIs. And then, uh, while doing so, it is important that we consider that the if in case we have a caching database in between and the sync, uh, happens with the actual database as well. So in case of that, we can have a proper cron cron jobs scheduled which would eventually do regular updates on between the, uh, caching database and the actual database so that the data remains in sync. So we like, for considering these activities would really help us to scale and boost the, um, performance of my of our React application. Considering the performance, we should have a good performance tooling, uh, performance tool implemented, uh, within the React, uh, project. Uh, we can use webpack bundle analyzer to handle the uh, performance related issue. Uh, doing package checks, package auditing is important. So, yeah, uh, all doing this following these practices helps us to maintain a good React code base that is, uh, eventually quite, uh, scalable and secure.

So in order to ensure code quality and maintain maintainability in the team, uh, which uses React and TypeScript, uh, we should have, uh, proper, uh, linters, ESLint and CSS linting tools, uh, defined and implemented in the code base that helps us to write a clean and consistent code. Because we already have TypeScript, we have strongly defined interfaces and data types that helps us to, uh, have a well written code. It is a a strongly typed code in case if we are having TypeScript. Then then we can have a SonarQube implemented within our code base too and identify code smells to identify if there are any redundant codes, um, then we we can have regular code reviews, peer reviews to identify the code quality is maintained and avoiding uh, identifying the code base which is reusable and moving that as a part of custom hooks and, uh, reducing the redundant data, categorizing all the, um, all the in all the code base as, uh, having a separate utils file for the generic utility functions that is used across the application, then moving all the hard coded string as a part of file to increase the maintainability of the code and reducing the, uh, rework in case of any changes in any kind of user centric messages that we have in our code. Um, and, uh, yeah. So this this would really help us to ensure uh, a code quality and maintainability, like having proper peer reviews, code reviews, implementing SonarQube, and having e ES link and CSS linking enabled in our, uh, code base.

So in order to mention, uh, sorry, in order to manage the state in a large scale React application, uh, we can we all we have a deduct state management library that we can leverage. But, um, using the library comes with its own, uh, steps. We have to write a lot of boiler code. And, um, it always depends upon the use case of, uh, use case of this, uh, use case that we are targeting. In case if the state management is pretty complex, then having a Redux tool introduced in our code base will help us to maintain our central uh, state management, uh, will help us to maintain a global, uh, state and a global store and making the, uh, state updates quite, uh, predictable and synchronous and, uh, would, uh, avoid, uh, in every help us to maintain the immutability of the state in our React code, which is very important, uh, so that the we have, uh, 1 way, uh, say, unidirectional flow of data as React is not bi directional, unidirectional flow of data. It helps us to maintain the immutability. So, yeah, we can use React as a state management library to handle the state in our React application in case it has a complex use case to handle. In case if the use case is pretty small, then, uh, introducing the reducts into our React application would um, unnecessarily increase the complexity of our code.

So in case of using, uh, SVGs and interactive animation, what we can have is we can, um, the SVGs could be either locally stored or we can host them on the, uh, CDN somewhere, and we can fetch the, uh, SVGs from the, uh, CDN and, uh, and reduce the bundled size of our React code. And in case of interactive animation, we can leverage the different types of, uh, React hook to use layout or, uh, use ref in case of, uh, or handling interactive animation. We can leverage these React hooks to manage them efficiently and, uh, introduce the complex city of the code that is being written inside the component. So, yeah, using the CDN would help us to reduce, uh, the size of our application instead instead of storing all of them in our, uh, local folder inside the asset, and interactive animations could be handled using the different React Hooks that we have And, um, either implementing them as custom hooks or using the traditional, um, uh, default React Hooks could also help us to simplify the way the animation is being handled.

So, um, to use the GitHub action workflows to ensure continuous integration, uh, firstly, would be to help, uh, to have a proper git ignore file so that we do not introduce unnecessary code getting, uh, committed to or pushed to our gate, and, uh, that would be for first step. Secondly, uh, implementing a strict, uh, pull get a good pull push policy in case of the master branch. Um, then creating feature branches uh, or demanded should be a practice for all the feature that are being implemented. And setting the, uh, setting, uh, git push pull, uh, on the feature branches. And once the git code is pushed, we can have a a rule, a git hub action being set to merge the code from the, um, to run, uh, actually, to run a a check on the code that is being committed to the git uh, feature branch to identify, uh, of any, uh, unnest unwanted code or an invalid code. Then, uh, during the merge of the feature branch to the master branch, we should have a a CICD pipeline running, uh, that triggers certain actions after push or merge, uh, that would first check all their dependency that would first run an NPM install, then run a check on the NPM dependencies if there are any, uh, malicious dependencies being installed. Secondly, then we can have the NPM test running, uh, to verify if all the tests are running successfully, then running a code smell using the uh, SonarQube. The SonarQube will give us a code quality report that will help us identify what is the code coverage. And after that, we can have a a proper, uh, deployment that would be triggered, uh, to the environment uh, that is, uh, it is that it is supposed to deploy the code to. So, yeah, that could be the possible data action workflows.

So, uh, in this case, the and operator that is being used here acts as, um, uh, act as a a conjugation, I would say, which says that the hover applies to button. So in case, uh, of any uh, class, any form element, HTML element with the class name as button, uh, uh, is whole word, then the background color of that, uh, element with the class button will change to dark blue. And in case if we introduce 1 more, um, uh, class or dot button inside the scope, then that would actually, uh, be conflicting the 2. And the the the the last 1 would take priority in that. And, uh, also, like, whatever is, uh, whatever element that have the class button would have the CSS, uh, of a hover being applied and the background color being applied and change whenever it is hover. So and, yeah, in case if there is, uh, same, uh, 2 classes with the same name as button, then the last 1 would take precedence.

So, uh, the use effect here is, uh, uh, setting the value of the variable, uh, value using the, uh, use state after an interval of 1, 000 millisecond, and, uh, the dependency array is empty. Uh, so in this case, because it is empty, this would be called, um, recursively causing a memory leak. And the third important thing to note here is that we should avoid using state updates inside useEffect. So because it causes performance issue.

So, uh, to maintain the CSS styles in large scale application using the SaaS, you should we can leverage CSS module, uh, which helps us in encapsulating the CSS specific locally to the component. It is being used to avoiding conflict in CSS. We can then use style components here, or we can use the then method, the block element modularity here to help local, uh, local component scoped CSS to avoid conflicting CSS and also helps us to maintain the code, uh, and have a minified version of the CSS, which is not redundant. So, yeah, we can use this design use pattern of BEM, uh, block element modularity or, uh, CSS modules to have a maintain to increase the maintainability of the CSS. And in case of SASS, we also have these mixins and, uh, we can create variables and then we can import those CSS and variables in our project. We can have, um, OOPS concept implemented within the SaaS based CSS, which also increases the maintainability of the CSS that is being, uh, written.

So, uh, to create a reusable form component in the lab, we can first identify what possible types of elements a form can have. Say, an input field, an input field, which can be of type number, which can be of type text, which can be of type passport, radio buttons, checkboxes, drop downs, um, multiple checkboxes, uh, multi drop downs, uh, selectable drop down boxes, and those elements can either be single or they can be grouped. So firstly, preparing a list of all possible elements that can exist in a form, implementing them using our TypeScript based video, which can have, say, a name a unique name to that element. What is the type? Say, an input drop down, a radio button, a checkbox, or so on. Then, uh, a value property, then we can have an object inside it called as validator. Inside that validator, we can have different sub attributes, like, if it is required, if it has a pattern check, uh, then if it has a pattern check, we can define a regex there. Then, um, in case if it had if the field is valid or not, say, is valid, false, and true, and then a validation message field, which could be a validation specific to that, uh, form field. And, uh, we can use that object and pass that object to the reusable form component. And using that object, the form could be rendered dynamically using the data that is being passed. And to handle the CSS, we can either implement the form the base form using the global application look and feel. And for the, uh, element inside the form, we can have, uh, another object inside our, uh, form, uh, object, which could be, let's say, style, which can have their own, uh, element specific class names and, uh, CSS, which can which we can handle to manage the look and feel. And, uh, we we can have state variable call validator, which would, uh, set the state in case if the form has a property with valid faults, then the state would be updated every time on change of the field. And we can display the validation errors, um, uh, on the screen using that. So, yeah, we can implement that the reusable form. Uh, that also we have a very good React form, like, as a library that can also be used to implement, uh, forms in React.

Uh, we can, uh, create a a mock, uh, data that could be a mock of the Figma API, and we can create a mock render component of the React, pass that mock API, uh, data to the rent mock offender method of the component, and verify and have expect criteria as accordingly to check if the, like, component is being rendered accordingly or not.